1、Vue简介

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

是一个构建用户界面的框架
是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定
数据驱动和组件化的前端开发
通过简单的API就能实现响应式的数据绑定和组合的视图组件

MVVM模式图

MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理

2、Vue安装

（1）直接用<script>通过CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

（2）使用NPM安装

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。npm install vue

（3）命令行工具（vue_cli脚手架）

① 下载node

Node 版本要求，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

② 使用命令安装包：

npm install -g @vue/cli。可以用这个命令来检查其版本是否正确：vue -version

3、vue_cli创建项目

① vue create

运行以下命令来创建一个新项目： vue create `name`。然后会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

② 使用图形化界面（vue ui）

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。【演示】

4、项目目录介绍和开发工具（VScode和Vue Devtools）【演示】

5、数据绑定

文本：{{}} 里面可以使用js表达式 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }}
html：{{}}只能显示文本，要转义html，要是用v-html指令 <span v-html="rawHtml"></span>
标签属性数据绑定：<button v-bind:disabled="isButtonDisabled">Button</button> 可简写

6、vue语法

（1） v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。也可以用 v-else 添加一个“else 块”：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面。

v-show：用法和v-if大致一样。但是v-show 不支持 <template> 元素，也不支持 v-else。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 好；如果在运行时条件很少改变，则使用 v-if 较好。

（2） v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

也可以用 v-for 来遍历一个对象的。

<ul id="v-for-object" class="demo">
  <li v-for="(value, name) in object">
    {{ name }}: {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

js中数组改变，只有以下几个方法会重新渲染，否则要用到this.$set(arr, index, value)

原文链接：https://blog.csdn.net/qq_40519017/article/details/107188450