一：什么是Vue？

vue是一个渐进式的JavaScript框架，采用的是MVVM模式。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二：vue的安装

1： 官网下载安装包 https://cn.vuejs.org/v2/guide/installation.html

　　直接用

　　你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

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

$ npm install vue

4：使用官方提供的CLI工具，为单页面应用 (SPA) 快速搭建繁杂的脚手架

　　npm install  -g @vue/cli

三：MVVM模式

四：创建一个Vue实例

1：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的，当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

:2：除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来，例如：

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

五：v-text和v-html

1：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值；Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

2：v-text更新元素的 textContent。如果要更新部分的 textContent ，请使用 {{ Mustache }} 插值。

3：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令，你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

4：通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定；

这个将不会改变: {{ msg }}

六：v-bind绑定属性和v-on绑定事件

1：v-bind 指令可以用于接收一个“参数”，在指令名称之后以冒号表示，响应式地更新 HTML 特性，可以写js表达式。

2：v-on 指令，它用于监听 DOM 事件

七：小练习—跑马灯

实现前一个字走到头后跳转到最后一个字后面接着向左走，运用了事件绑定，数据获取和更改

八：事件修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。

提示：

事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

事件捕获：思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

九：v-model双向数据绑定

原理是：

自从html5开始input每次输入都会触发oninput事件，所以输入时input的内容会绑定到sth中，于是sth的值就被改变

文本框

多行文本

复选框

单选框

请选择 选择框 A

十：类class和样式style使用

1：我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

2：可以传给 v-bind:class 一个对象，以动态地切换 class

十一：for循环和key属性

1：我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名；

2：在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引；

3：你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法；

4：可以用 v-for 通过一个对象的属性来迭代，注意，第一个参数是指值，第二个参数是键值，第三个是索引；

5：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性

6：vue中数组数据操作注意事项

支持方法：push()  pop()  shift()  unshift()  reverse()  sort()  aplice()      filter()  concat()  slice()

特别注意：vue数组不支持如下操作：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

解决办法：

　　 1：Vue.set(vm.items, indexOfItem, newValue)   （数组，索引，新值）

　　       vm.items.splice(indexOfItem, 1, newValue)    （从第几位截取那一个元素替换新值）

　　 2： vm.items.splice(newLength)

7：vue中对象操作注意事项

特别注意：vue数组不支持如下操作：

　　 1：直接添加对象元素  vm.name='tom'

　　 2：合并两个对象  Object.assign(vm.userProfile, {age: 27, favoriteColor: 'Vue Green'})

解决办法：

　　 1：Vue.set(vm.userProfile, 'age', 27)   （对象，键值，值）

　　 2：vm.userProfile = Object.assign({}, vm.userProfile, {age: 27,favoriteColor: 'Vue Green'})    （返回一个新对象=（空对象，对象1，对象2））

8：类似于 v-if，你也可以利用带有 v-for 的