阅读本文前需要你有过vue的一些学习基础，本博文对一些基础的概念和示例不做重复介绍。如果你已经有扎实的基础积累可以直接阅读博文，会进入到更加深入的vue.js学习。
注意只有这些被data代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
你得在new之前，就把所有的data都传进去。实例创建之后，其实可以使用$set来加入属性，也可以实现响应功能。
Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。
app.$data === data // -> true
你要知道一个事实：app.$data.msg === app.msg，而且由于vue的响应系统，所以你直接app.msg = ‘Let us go!‘和
app.$set(app.$data, ‘msg‘, ‘Let us go‘)是一样的。
总之，因为javascript的对象是引用型数据，所以你只要使用对了引用，怎么搞都是一样的。
所谓计算属性，就是跟ES5的getter一样的，用function来定义个属性，当你获取这个属性的时候，实际上是要执行这个function，执行function的过程就是计算过程，所以也就叫计算属性。所有的计算属性被放在computed里面，computed和data, methods同级。
计算属性是基于它们的依赖进行缓存的!
计算属性是基于它们的依赖进行缓存的!
计算属性是基于它们的依赖进行缓存的!
重要的事情说三遍。。。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}相比而言，只要发生重新渲染，method 调用总会执行该函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。
然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代。watch是和data, methods, computed同级的一个参数，你可以在watch里面规定你要watch的属性，当这些属性发生变化的时候，它会执行对应的那个函数。栗子：
var app = new Vue({
data: {
message: ‘‘,
msg: ‘‘,
},
watch: {
message: function() { // 当app.$data.message发生变化的时候，执行这个函数
this.msg = ‘Changed!‘
},
},
})指令也可以有参数，主要是指v-on和v-bind这两个指令，它们后面跟上一个冒号，冒号和等号之间的内容就是参数，例如v-bind:src="src"。
<div v-if="is"></div><div v-show="is"></div> <div v-for="item in items"></div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div> * v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,需要提供一个 key 的特殊属性:
* ```<div v-for="item in items" :key="item.id">{{ item.text }}</div>
``` <!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 字符串拼接 -->
<img :src="‘/path/to/images/‘ + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + ‘px‘ }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, ‘other-attr‘: otherProp }"> </div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>* 动态地绑定一个或多个attr或prop属性。简单的说就是，通过v-bind绑定一个属性，
这个属性可以是html原本有的，也可以是某些特殊的，绑定的表达式的值赋值给这个属性。
* 在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
* 在绑定 prop 时，prop 必须在子组件中声明。
* 没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。 <!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat(‘hello‘, $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>* 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
* 用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
* 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：` v-on:click="handle(‘ok‘, $event)"`。
* 修饰符
* .stop - 调用 event.stopPropagation()。
* .prevent - 调用 event.preventDefault()。
* .capture - 添加事件侦听器时使用 capture 模式。
* .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
* `.{keyCode | keyAlias}` - 只当事件是从特定键触发时才触发回调。
* .native - 监听组件根元素的原生事件。
* .once - 只触发一次回调。
* .left - (2.2.0) 只当点击鼠标左键时触发。
* .right - (2.2.0) 只当点击鼠标右键时触发。
* .middle - (2.2.0) 只当点击鼠标中键时触发。 <input v-model="something">其实是<input v-bind:value="something" v-on:input="something = $event.target.value">的语法糖，也就是说v-model本身就已经包含了v-bind，所以当v-bind:value, v-on:input和v-model同时出现在一个input上时，这个v-bind, v-on会失效。理解这一点很重要。<span v-pre>{{ this will not be compiled }}</span>once让渲染失去了数据绑定机制，只有在第一次渲染的时候，会获取当时的变量对应的数据进行渲染，渲染结束之后，将不再跟着数据变化而变化。
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 [v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>* 编译结束的时候，就把这个属性移除掉。所以上面那个css，使得这些有v-cloak属性的元素全部先隐藏起来，最后当v-cloak被移除的时候，这些元素就显示出来了。为什么要有这么一个奇怪的属性呢？因为你要知道，{{message}}在原始的html中是字符串，是会显示在界面中的。如果你的浏览器编译模板速度慢，或者用户网速慢，vue代码半天没加载完，那么用户就会看到这些奇怪的{{}}，而如果使用一个v-cloak属性，就可以把这些内容事先隐藏起来，不让用户看到。vue提供了四个和事件相关的实例方法，分别是$on, $once, $off, $emit，用过jquery的同学应该非常熟悉了。
对于事件绑定而言，vue内部直接提供了非指令的事件系统，跟jquery的用法几乎一样，v-on主要是在模板中绑定DOM原生的一些事件，而$on, $once可以绑定自定义的事件，两者互不干扰。$emit也无法触发原生的DOM事件。
$on
vm.$on(‘test‘, function (msg) {
console.log(msg)
})
vm.$emit(‘test‘, ‘hi‘)
// -> "hi"$once
监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。
$on和$once绑定的事件是在实例上，而非DOM元素上，所以它们跟DOM原生的事件是两回事。DOM原生事件是在触发DOM元素特定事件时被触发的，比如click。但是对于这里的实例vm而言，click没有来源，实例根本不存在被click之说，所以$on和$once跟DOM原生事件扯不上任何关系。同理，$emit也是作用于实例之上，既然实例跟原生的DOM事件扯不上关系，那么$emit也就跟原生DOM事件扯不上关系了。
所以说，$on和$once绑定的是一个自定义事件，这些事件是存储在vue内部的事件管理器中，跟DOM事件是两码事，既然如此，跟v-on事件绑定也就是两回事。
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
在开发层面上，你只需要使用Vue.extend({...})就可以得到一个组件。而开发的大部分工作，就是写好大括号里面的内容。
上面说过了，开发层面上，创建一个组件只需要使用Vue.extend，如下：
var MyComponent = Vue.extend({
template: ‘<div>OK</div>‘,
})这样就创建了一个组件构造器MyComponent。实际上，Vue.extend的结果是Vue的一个子类。既然是一个类，就可以被实例化，通过实例化得到一个组件实例。组件构造器是一个类，可以被实例化为组件实例。
var component1 = new MyComponent()关于Vue.extend，我们会在后文继续深入。组件实例有一些方法可以用，例如$mount方法，这也在后面的Vue.extend部分去解释。
// 局部注册
new Vue({
el: ‘#app‘,
template: ‘<div><my-component></my-component></div>‘,
components: {
‘my-component‘: MyComponent,
},
})// 全局注册
Vue.component(‘my-component‘, MyComponent)全局注册有一个好处，就是可以在任何一个vue实例中去使用。
使用一个组件（比如在模板中插入<my-component>元素）的本质，是创建一个组件实例。也就是说，一个<my-component>就是一个组件实例，它们共享一个组件构造器（一个js类）。
上面我们的做法是先创建一个组件构造器，然后把组件构造器传入实例构造器。在实践开发中，基本不会这样干，我们大部分都会使用简易方式直接注册，跳过创建步骤，相当于注册过程会自动创建一个匿名的组件构造器：
Vue.component(‘my-component‘, {
template: ‘<div>OK</div>‘,
})之所以必须是函数是由于js本身的特性（引用）带来的。为了不使组件的实例化函数相互影响，data必须是函数。这个我觉得有点像闭包一样，我们需要一个闭包来保护变量不受外部污染，使实例的data属性都是独立的不相互影响。（这是我的理解，不知道对错哈）
一说到prop就要提一提和它很像又经常容易搞混的attrbution。这两个的区别就是attribution往往是固定的值的属性，而prop往往是动态的状态值属性。最简单的例子就是input checkbox的checked属性，checked属性的attr值是它的初始值，而prop值是它的当前值，这对于熟悉jquery的同学而已应该比较好理解。
vue里面，组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
子组件要显式地用 props 选项声明它期待获得的数据：
Vue.component(‘child‘, {
// 声明 props
props: [‘message‘],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: ‘<span>{{ message }}</span>‘
})属性名在注册组件时使用的是驼峰式命名方式。
Vue.component(‘child‘, {
props: [‘myMessage‘],
template: ‘<span>{{ myMessage }}</span>‘
})但是在使用组件的时候，传入的属性名得是短横线隔开的：
<child my-message="hello!"></child>这是因为html不区分大小写，你写成的话，假如有一个属性名是mymessage怎么办？所以，一定要注意这一点。
前面一节指出，子组件不能自己主动修改prop，以防改变了父组件或app的值导致bug。那么如果子组件确实需要上级应用修改这些变量，让自己更好的适应新情况怎么办？那就让父组件或app自己来改。可是父组件怎么知道自己要改？通过子组件的事件就可以做到了。
我们可以在子组件里面触发事件，在父组件里面监听这个事件，当事件被触发时，父组件通过绑定的回调函数来执行prop的更改。当然除了更改prop，还可以做其他的事情。
前文我们指出，直接用实例的$on方法来绑定自定义事件。但是在这里不行，不能直接在父组件里面直接用$on，因为我们使用<my-component>实例化组件时，没有得到一个变量用来存储实例化对象，它相当于是匿名的，所以我们找不到它，当然也找不到它的$on。
那怎么办？只能使用v-on来进行事件绑定。
<child @clicked="showSomething"></child>这里的clicked是事件名，在子组件里面，通过this.$emit(‘clicked‘)触发事件。父组件里面，通过上面代码中的@clicked="showSomething"监听这个事件，而showSomething就是事件回调函数，是父组件methods方法之一。
上面不是说只能使用v-on绑定事件吗？是的，但是你是否还记得前文提到过v-model其实是v-bind和v-on的语法糖？上一节我们说过了，<child>可以使用v-bind，而这里又说可以使用v-on，所以只要情况允许，就可以使用v-model。
所谓情况允许，是指符合下面条件：
Vue.component(‘child‘, {
template: ‘<input :value="value" @keyup="update($event.target.value)">‘,
props: [‘value‘],
methods: {
update(value) {
this.$emit(‘input‘, value)
},
},
})在父组件中才可以这样使用：
<child v-model="someData"></child>等价于：
<child :value="someData" @input="someData = $event.target.value"></child>组件内部，绿色的keyup是input元素的DOM原生事件，udpate是回调函数，当keyup的时候执行update()，而update()的时候就$emit(‘input‘)，触发了父组件的v-on:input。
基于这种原理，不一定要使用在input输入框上，实际上，任何元素都可以模拟这种方式实现数据双向绑定。当然，如果没有输入，双向绑定的说法就很奇怪。
组件的内容还有很多，但是项目中常用的就是组建的两个特性，一个是隔离性，父子组件通信的方式使得组件具有隔离性，主要表现在两个方面：
组件的另一个特性就是可复用性。基于上面两个方面的特性，组件应该是具备高可复用性的，当一个地方需要使用这个组件时，只需要实例化，并给适合的props即可。只要props给的符合要求，组件就可以根据自己的逻辑运行，既不受外界影响，也不影响外界。
本篇读书笔记是对唐霜的编写的这本vue.js中文教程的整理分析。个人觉得这本书（也可以称之为长博客吧）编写的很接地气，比官网更通俗一些。
原文：https://www.cnblogs.com/syqcoding-life/p/9821729.html