Vue.js是什么？
vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页提供驱动。
Vue.js的核心是：允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统
声明式渲染
上述示例中，数据和DOM已经建立了关联，所有东西都是响应式的。上述例子是利用了文本插值的方法。
除了文本插值我们还可以利用v-bind来绑定元素。
上述例子中的v-bind特性被称为指令。指令带有前缀v-，以表示他们是Vue提供的特殊特性。他们会在渲染的DOM上应用特殊的响应式行动，上述例子中这个指令的意思是：将这个元素节点的title特性和Vue实例的message属性保持一致。
条件与循环
控制切换一个元素是否显示：
上述例子演示了我们不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。
v-for:该指令可以绑定数组的数据来渲染一个项目列表：
在控制台输入app.todos.push({ text:'新项目'})后，你会发现列表最后添加了一个新项目。
处理用户输入
为了让用户和我们的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法：
注意：在message方法中我们更新了应用的状态，但没有触碰DOM--所有的DOM操作都由Vue来处理。
Vue还提供了v-model指令，他能轻松实现表单输入和应用状态之间的双向绑定。
组件化应用构建
（还未理解透彻，之后再补全）
Vue组件与自定义元素的关系
Vue组件非常类似于自定义元素--它是web组件规范的一部分。
Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
虽然 Vue 内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。
------------------------------------------------------------------------------------------------
Vue实例（待理解）
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的：
虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。因此在文档中经常会使用vm这个变量名表示Vue实例。
当创建一个Vue实例是，你可以传入一个选项对象。
一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。举了例子，一个todo应用的组件树可以是这样的：
我们会在稍后的组件系统章节具体展开。不过现在，你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
数据与方法
当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中，当这些属性值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时，视图会进行重新渲染。值得注意的是只有当实例被创建时 data中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：
那么对b的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始他为空或者不存在，那么你仅需要设置一些初始值。比如：
这里唯一的例外是使用Object.freeze(),这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
除了数据属性，Vue实例还暴露了一些有用的实例与方法。它们都有前缀$，以便与用户定义的属性区分开来。例如：
（上述代码待理解）
实例生命周期钩子
每个Vue实例在被创建时都要经历一系列的初始化过程--例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
（上述代码待理解）
模板语法
插值
#文本
数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：
Mustache标签将会被替代为对应数据对象上msg属性值。无论何时，绑定数据对象上msg属性发生变化，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
#原始HTML
双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令。
#特性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>对于布尔特性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
#使用JavaScript表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
指令
指令是带有v-前缀的特殊特性。指令特性的值预期是单个javascript表达式，（v-for是个例外情况，之后再讨论）。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。
<p v-if="seen">现在你看到我了</p>这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。（也就是说用v-if后面的属性值（true/flase）来控制元素（p标签）是否显示。
#参数
一些指令能够接受一个“参数”，在指令名称之后以冒号表示。例如v-bind指令可以用于响应式的更新HTML特性：
这里的href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。
v-on指令用于监听DOM事件：
这其中，button叫事件源（也就是说事件发生的地方），click叫事件类型（就是表示怎样的操作导致事件发生的，这里的click是点击事件类型），f1叫监听器（就是说事件发生后要执行的操作）
#动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<a v-bind:[attributeName]="url"> ... </a>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
<a v-on:[eventName]="doSomething"> ... </a>同样地，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。
例如，下面的代码是无效的：
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
另外，如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板)，需要留意浏览器会把特性名全部强制转为小写：
<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>#修饰符
修饰符是以半角句号"."指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如， .prevent修饰符告诉我们v-on指令对于触发的事件调用了event.preventDefalut（）：
| 事件修饰符： | |
| 之前阻止默认事件的写法： | |
| e.preventDefaut() | |
| <a href="javascript:void(0)"></a> | |
| vue中通过修饰符的写法： | |
| @click.prevent="f1" | |
| 常用的修饰符： | |
| stop 阻止冒泡 | |
| prevent 阻止默认事件 | |
| capture 冒泡改为捕获 | |
| self 只处理发生在自己身上的事件，不理会冒泡或捕获 | |
| 把self放到谁的身上，谁就不会触发 | |
| once 只执行一次 |
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
#基础例子
结果：
Original message: "Hello"
Computed reversed message: "olleH"
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
#计算属性缓存vs方法
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
#计算属性vs侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
<div id="demo">{{ fullName }}</div>var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})上面代码是命令式且重复的。将它与计算属性的版本进行比较：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})好得多了，不是吗？
#计算属性的setter
计算属性中的getter方法是用来获取值的,setter方法是用来设置值的。
计算属性其实是非常强大的，先看一段代码：
<div id="app">
{{fullName}}
</div>
let vm = new Vue({
el: '#app',
data: {
firstName: 'Dell',
lastName: 'Lee'
},
computed: {
fullName(){
return this.firstName + ' ' + this.lastName
}
}
})插值表达式{{fullName}}首先回去data中去找fullName这个属性，找不到再去计算属性中去找，找到之后在将它显示在页面之中。
计算属性中的fullName我们换一种写法：
<div id="app">
{{fullName}}
</div>
let vm = new Vue({
el: '#app',
data: {
firstName: 'Dell',
lastName: 'Lee'
},
computed: {
fullName:{
get(){
return this.firstName + ' ' + this.lastName
},
set(value){
var arr = value.split(' ')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})当我去使用这个计算属性的时候，调用插值表达式，去读这个内容，它就会走get的方法
当我去设置这个属性属性值的时候，set方法会被执行，同时会拿到设置的这个值，我就可以通过这个值去设置firstName和lastName。
computed有这样一个特性，它呢什么时候会重新计算，当它依赖的值发生变化时，它就会重新去计算 ，重新计算之后，那么你看，当你set fullName时，this.firstName的值就会发生变化，恰好这个值又是fullName所依赖的一个值，所以就会引起fullName的重新计算，重新计算之后，fullName的值变了，页面上显示的fullName也就跟着变了。
绑定 HTML Class
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。
你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>和如下 data：
data: {
isActive: true,
hasError: false
}结果渲染为：
<div class="static active"></div>当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里：
<div v-bind:class="classObject"></div>data: {
classObject: {
active: true,
'text-danger': false
}
}渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
<div v-bind:class="classObject"></div>data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}用在组件上
这个章节假设你已经对 Vue 组件有一定的了解。当然你也可以先跳过这里，稍后再回过头来看。
当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
例如，如果你声明了这个组件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})然后在使用它的时候添加一些 class：
<my-component class="baz boo"></my-component>HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>对于带数据绑定 class 也同样适用：
<my-component v-bind:class="{ active: isActive }"></my-component>当 isActive 为 truthy[1] 时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
