快速构建vue-cli脚手架传送门：
http://blog.csdn.net/nideshijian/article/details/62227890
https://www.cnblogs.com/ganmy/p/6029774.html
基础教程
<p v-if="seen">现在你看到我了</p> //添加else块 <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
<li v-for="todo in todos"> {{ todo.text }} </li>
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义属性
// 这个属性名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
<div id="app-7">
<ol>
<!-- 现在我们为每个todo-item提供待办项对象 -->
<!-- 待办项对象是变量，即其内容可以是动态的 -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
}
})
7. 纯HTML <div v-html="rawHtml"></div> 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，需要使用 v-html 指令
8. 使用js表达式：每个绑定都只能包含单个表达式
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
9.过滤器用于文本格式化
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
{{ message | capitalize }}
{{ message | filterA | filterB }}//过滤器可以串联
{{ message | filterA('arg1', arg2) }}//过滤器是 JavaScript 函数，因//此可以接受参数：
//这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
10. 修饰符：用于指出一个指定应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>//.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
11. 缩写
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
12. 计算属性：
计算属性可以通过函数调用达到同样的效果；
不过计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变是才会更新重新取值；
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div>
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })
默认只提供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]
}
}
}
// ...
13. Watched Property
方法 $watch ，用于观察 并响应Vue 实例上的数据变动。
当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。
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
}
}
})
14. 样式绑定
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> data: { isActive: true, hasError: false }
数组语法：
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]">
绑定内联样式：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
直接绑定到一个样式对象通常更好，让模板更清晰：同样的，对象语法常常结合返回对象的计算属性使用。
<div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } }
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]">
v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
v-show 始终渲染，只是控制了display属性；另外v-show不支持<template>语法；适合频繁切换
v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
如同 v-if 模板，也可以用带有 v-for 的 <template> 标签来渲染多个元素块。
key://todo
变异数组：
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()pop()shift()unshift()splice()sort()reverse()
重塑数组：
变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组，Vue 实现了一些智能启发式方法来最大化 DOM 元素重用，这并不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表，效率高效；
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
数据更新不能检测跟新dom的解决方法：
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
- 当你直接设置一个项的索引时，例如：
vm.items[indexOfItem] = newValue ====》Vue.set(example1.items, indexOfItem, newValue)或者 example1.items.splice(indexOfItem, 1, newValue) - 当你修改数组的长度时，例如：
vm.items.length = newLength ======》example1.items.splice(newLength)
显示数组处理后的副本而不实际改变原始数据的解决方法：计算属性或者方法
计算属性：
<li v-for="n in evenNumbers">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } }
调用方法：
<li v-for="n in even(numbers)">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } }
17:事件处理
HTML中监听事件：1.看html轻松定位对应方法2无需js手动绑定代码，和dom完全解耦3档viewmodel销毁，所有的事件处理器都会被自动销毁，无须担心如何自己清楚他们。
js代码与定义方法：
var example2 = new Vue({
el: '#example-2',
data: {
counter:0,
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
},
} }) //写js代码执行 <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div>
//定义方法调用 <div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div>
//内联处理器方法
$event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop.prevent.capture.self
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div>
按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 同上记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名： --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
Vue.config.keyCodes.f1 = 112 //可以通过全局config.keyCodes对象自定义按键修饰符别名：
按键别名
- enter
- tab
- delete (捕获 “删除” 和 “退格” 键)
- esc
- space
- up
- down
- left
- right
18. 表单控件绑定
v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。
checkbox 单选绑定到属性为true或者false；绑定到数组为选中的数组集合；
单选时想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
<input type="checkbox" v-model="toggle" v-bind:true-value="a v-bind:false-value="b"> // 当选中时 vm.toggle === vm.a // 当没有选中时 vm.toggle === vm.b
修饰符：
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
<input v-model.number="age" type="number">//如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值： <input v-model.trim="msg">//如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
19 组件
扩展html元素，封装可充用的代码
局部注册：不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用；
var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } })