vue.js
AMD
CommonJS
ES Module
三个规范
vue 属性改变时，视图会重新渲染，创建时不会。
钩子：实例触发函数：
created, mounted（被替换），updated ，destroyed
原始HTML
<div v-html='rawHtml'></html>
特性
<div v-bind:id="dynamicId"></div>
支持js表达式
{{ok ? 'yes':'no' }}
指令 条件渲染 根据v-if 来控制显示隐藏 v-else if
<p v-if='seen'></p>
<p v-else>No</p>
列表 v-for
<ul id="example-1">
<li v-for=' item in items'>
{{item.message}}
</li>
</ul>
var example1=new Vue({
el:'#example-1'
data:{
items:[
{message: 'Foo'}
]
}
})
v-for 与v-if 组合时，v-for优先级高于v-if
<li v-for="todo in todos" v-if="!todo.isComplete">
监听
<a v-on:click="doSomething">
简写
v-bind:href :href
v-on:click @click
计算属性
可以直接使用的属性，相当于getter()
var vm=new Vue({
el:"#example",
data:{
message:'hello'
},
computed:{
reversedMessage:function(){
return this.message.split('').reverse().join('');
}
}
});
<p>{{reversedMessage}}
计算属性不会更新，有缓存，除非依赖值发生变化，方法能够实时更新
可以使用计算属性替代watch
计算属性可以有getter和setter
computed:{
fullName:{
get:function(){},
set:function(val){}
}
}
观察者
watch:{
field:function(data){}
}
样式
绑定Class
<div class="static" v-bind:class="{active:isActive, 'text-danger':hasErrot}">
</div>
data:{
isActive:true,
hasError:false
}
还可以使用计算属性绑定class
还可以数组语法：
<div v-bind:class="[activeClass,errorClass]"></div>
<div v-bind:class="[ {active:isActive},errorClass ]">
data:{
activeClass:'active',
errorClass:'text-danger'
}
内联样式：
<div v-bind:style="{ color : isActive,fontSize: fontSize + 'px' }">
vue会重用两个相同的组件，可以用key来标识不同的组件，阻止重用
<ul id="example=2">
<li v-for="{ item,index } in items">
{{index}} - {{item.message}}
</li>
<ul>
迭代一个对象 v-for="{value,key , index} in object"
变异方法
使用变异方法会触发视图更新,同样使用索引设置值也不会触发更新，除非
Vue.set(example1.items , indexOfItem, newValue )
等价 this.$set()
所以，建议使用Vue.set来更新数据
非变异方法不会触发更新，如filter ,concat ,slice()
事件修饰符
.stop
.prevent
.capture
.self
.once
<form v-on:submit.prevent= 'onSubmit'></form>
监听键值修饰符
<input v-on:keyup.enter="submit">
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
表单输入绑定 v-model
选取text，取value
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
选中model
<input type="radio" v-model="picked" value="a">
修饰符
.number 自动将用户输入转为Number
.trim 自动过滤首尾空格
组件：
使用is 作为标识
局部组件：
var Child={
template:' <div>A custom componet</div>'
}
new Vue({
components:{
'my-component':Child
}
})
component组件中，data必须是一个函数
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})
<child message="hello!"></child>
这样使用
组件需由html调用，vue实例监听调用html，实现解耦
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
})
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
在组件上监听原生事件
<my-component v-on:click.native="doTheThing"></my-component>
非父子组件通信
var bus=new Vue()
bus.$emit( 'id-selected' , 1 ) //一个触发事件
bus.$on( 'id-selected' , 1 ) //一个监听事件
