vue官方文档阅读笔记，以下笔记包含vue1和2，不能完全保证有些语法可用
1.给组件绑定原生事件
<my-component @click.native="doThis"></my-component>
2.slot
最初在slot标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
a.单个slot：当子组件模板只有一个没有属性的slot时，父组件整个内容片段将插入到slot所在的dom位置，并替换掉slot标签本身
b.具名slot：<slot>元素可以用一个特殊的属性name来配置如何分发内容。多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素。可以设置一个匿名的slot，没有指名的内容片段可以默认插入匿名slot里
3.vue中想在dom更新之后做操作需要使用vue.nextTick(callback),使用vm.$nextTick()实例方法特别方便，因为它不需要全局的vue，并且回调函数中的this将自动绑定到当前的vue实例上
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: 'not updated'
}
},
methods: {
updateMessage: function () {
this.message = 'updated'
console.log(this.$el.textContent) // => '没有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})
4.mounted界面初始化方法
mounted:function(){}
5.数据只加载一起，后续数据再有变化也不在更新用"*" {{*text}}
6.过滤器
1.{{example | toUpperCase}}
2.{{example | filterA | filterB}}//过滤串联
3.{{example | filter a b}}//可传参数 ab为参数用空格隔开
7.关于v-model添加参数
<input v-model='msg' number/> //将输入的值转为number，如果原值转换的结果为NaN 则返回原值
<input v-model='msg' lazy/> //change事件发生时，数据才会改变
<input v-model='msg' debounce="5000"/>//设置一个最小的延时，这里时延迟5000ms
8.关于数组
除了常规的数组用法外vue还提供了$set 和$remove来观测数组的变化，也可以使用filter，concat，slice方法，返回的数组将是一个不同的实例。我们可以用新的数组替换原来的数组
demo.items = demo.items.filter(function(item){
return item.childMsg.match(/hello/)
})
9.v-for
9.1如果每个对象都有唯一的id属性，则可以使用track-by特性给Vue.js一个提示，因而Vue.js能尽可能的复用已有的实例。如果没有唯一的键供追踪，则可以使用track-by="$index",它强制让v-for进入原位更新模式：片段不会被移动，而是简单的以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。(该属性在vue2里已经删除)
<div v-for="item in items" track-by="_uid"></div>
9.2 filterBy和orderBy:语法：filterBy searchKey[in dataKey...];语法：orderBy sortKey[reverseKey]。例子：<li v-for='user in users | orderBy field reverse'></li>(vue2中被删除)
10.v-text :<span v-text='msg'></span> 等价于<span>{{msg}}</span>
11.v-html:可以更新元素的innerHTMl。内容按普通HTML插入——数据绑定被忽略。如果想复用模板片段，则应当使用partials（不建议在网站上直接动态渲染任何HTMl片段，容易导致XSS攻击）<div v-html='html'></div> 等价于 <div>{{html}}</div>
12.prop必须在子组件中声明，可以用修饰符指定不同的绑定类型
.sync: 双向绑定，只能用于prop绑定 <my-component :prop.sync="someThing"></my-component>
.once:单次绑定，只能用于prop绑定<my-component :prop.once="someThing"></my-component>
.camel:将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定，通常用于绑定用驼峰命名的SVG特性，如viewBox
13.v-on：在监听原生DOM事件时，如果只定义一个参数，DOM event为事件的唯一参数；如果再内联语句处理器中访问原生DOM事件，则可以用特殊变量$event把它传入方法<button @click="dothat('hello',$event)"></button>;在监听自定义事件时，内联语句可以访问一个$arguments属性，它是一个数组，包含了传给子组件的$emit回调的参数
.stop:调用event.stopPropagation()，停止冒泡 <button @click.stop='doThis'></button>
.prevent:调用event.preventDefault(),阻止默认行为，用法同上
.capture:添加事件侦听器时使用capture模式
.self:只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode | keyAlias}:只在指定按键上触发回调。vue提供的键值有：esc(27),tab(9),enter(13),space(32),delete(8,46),up(38),left(37),right(39),down(40)
14.v-ref:在父组件上注册一个子组件的索引，便于直接访问。不需要表达式，必须提供参数id。可以通过父组件的$sefs对象直接访问子组件。当v-ref和v-for一起使用时，注册的值将是一个数值，包含所有的子组件，对应于绑定数组；如果v-for使用在一个对象上，注册的值将是一个对象，包含所有的子组件，对应于绑定对象。（因为html不区分大小写，camelCase风格的名字比如v-ref:someRef将全部转换为小写。可以用v-ref：some-ref设置this.$els.someRef）
15.v-el:为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEl.例如：
<span v-el:msg>hello</span> //获取 this.$els.msg.textContent
<span v-el:other-msg>world</span> //获取this.$els.otherMsg.textContent
16.v-pre:编译时跳过当前元素和他的子元素，可以用来显示原始mustache标签，跳过大量没有指定的节点会加快编译
17.v-cloak：保持在元素上直到关联实例结束编译。angularjs也提供了相同的功能。当和css规则如[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的mustache标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到mustache标签，然后看到编译后的数据。
用法：[v-cloak]{display:none;} <div v-cloak>{{msg}}</div>
18.自定义指定
18.1钩子函数：bind update unbind
18.2指令实例属性：所有的钩子函数都将被复制到实际的指令对象中，在钩子内this指向这个指令对象。
el:指令绑定的元素
vm:拥有该指令的上下文ViewModel
expression:指令的表达式，不包括参数和过滤器
arg:指令的参数
name:指令的名字，不包含前缀
modifiers:一个对象，包含指令的修饰符
descriptor：一个对象，包含指令的解析结果
//属性指令
Vue.directive('my-directive',{
bind:function(){
//准备工作
//例如，添加事件处理器或只需要运行一次的高效任务
},update:function(newVal,oldVal){
//值更新时的工作
//也会以初始化值为参数调用一次
this.el.innerHTML='name -'+this.name
},unbind:function(){
//清理工作
//例如，删除bind()添加的事件监听器
}
})
当只需update函数时，可以传入一个函数替代定义对象：
Vue.directive('my-directive'，function(value){//这个函数用作update()})
使用：<div v-my-directive="somevalue"></div>
//元素指令:不能接受参数或表达式，但可以读取元素的特性，从而决定它的行为。不同于普通指令，元素指令是终结性的。这意味着，一旦vue遇到一个元素指令，它将跳过该元素及子元素，只有该元素指令本身可以操作该元素及其子元素。
Vue.elementDirective('my-directive',{
bind:function(){}
}）
使用<my-directive></my-directive>
19.计算属性：当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新
<input type="text" v-model="d"/>
<input type="text" v-model="f"/> {{result}}
computed:{
result:function(){return this.d +this.f} //此方法里还可以提供getter和setter
}
