1. Vue 提供的特殊特性，带有前缀 v-。
声明：
<span v-bind:title="message">
条件：
<p v-if="seen">现在你看到我了</p>
循环：
<li v-for="todo in todos">
v-on 指令添加一个事件监听器，
<button v-on:click="reverseMessage">逆转消息</button>
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<input v-model="message">
2. 组件化
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})3. vue实例
所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
数据属性：
var data = { a: 1 } //data数据类型应该是个对象实例属性和方法：前缀 $，以便与用户定义的属性区分开来。
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true4. 实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。
created //实例被创建后执行
mounted //实例被安装好后执行
updated //更新后
destroyed //销毁后执行5.模板语法
# 文本： 使用“Mustache”语法 (双大括号) 的文本插值
<span>Message{{ msg }}</span>原始Html: v-html
<p>Using v-html directive: <span v-html="rawHtml"></span></p>表达式：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}#指令：带有 v- 前缀的特殊特性。参数: (href是参数）在指令名称之后以冒号表示
<a v-bind:href="url">...</a> 缩写：
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>6.计算属性和监听器
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'计算属性只有一个getter,必要时可以创建一个setter:
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}侦听器：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
7. class和style绑定
绑定class:
#对象：
html:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
js:
data: {
isActive: true,
hasError: false
}
渲染结果：
<div class="static active"></div>#数组
html:
<div v-bind:class="[activeClass, errorClass]"></div>
js：
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为：
<div class="active text-danger"></div>绑定内联样式：
#对象：CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名,绑定到样式对象更好
html:
<div v-bind:style="styleObject"></div>
js:
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}#数组语法：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
8. 条件渲染
v-if 是一个指令，所以必须将它添加到一个元素上。
# key 管理可复用的元素
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换,表单需要频繁切换时使用
9. 列表渲染
#数组：
HTML：
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
js:
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})#对象：可以提供第二个参数作为键名，第三个参数为索引。<div v-for="(value, key, index) in object">
html:
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
js：
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})10.数组更新
直接设置不是响应式的。所以：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)11.对象更新
已经创建的实例，不能动态添加根级别的响应式属性。
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)12. 事件处理
html:
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
js:
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'13. 按键修饰符
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">14.表单输入绑定
input和p 标签 两者同时改变message值：
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>