数据与方法
- 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。data的数据和视图同步更新。
- 实例创建后添加一个新的属性，对这个属性的的改动将不会触发任何视图的更新。
- 如果需要一个属性，但是一开始它为空或不存在，仅需要设置一些初始值。
- Object.freeze()方法可以阻止修改现有的属性
- 除了数据属性，Vue 实例还包含实例属性与方法，前缀为
$，例如：vm.$data，vm.$el，vm.$watch()(这里假设vm是某个实例名)，详情可以参考API
实例生命周期钩子
Vue实例有自己的生命周期，提供了一些钩子函数给我们写自己的逻辑代码：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
ps：不要在选项属性或回调上使用箭头函数，即这些钩子函数不要用箭头函数的写法，因为他们没有this
生命周期图
模板语法
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值Message: {{ msg }}v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
这个将不会改变: {{ msg }}原始 HTML
v-html 指令输出真正的html，而不是字符串Using mustaches: {{ rawHtml }}
输出字符串Using v-html directive:
输出rawHtml变量代表的HTML使用 JavaScript 表达式
所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}指令
常见有v-if,v-on,v-bind,v-for。
参数：...在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
动态参数：...这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用
修饰符：修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，例子的
.prevent就是修饰符
缩写：... ... ... ...
计算属性和侦听器
模板一般不要加入过多的逻辑，只是用来渲染会职责分明一些，把逻辑处理防盗计算属性，会更加合理；
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})这里的reversedMessage就是计算属性，可以逆序一个字符串。
定义一个方法，能够达到同样的效果：
Reversed message: "{{ reversedMessage() }}"
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
两者区别：计算属性是基于它们的响应式依赖进行缓存的，方法总会再次执行函数；在不同场景下选择不同的方式吧~
tips：使用计算属性，而不是侦听属性（watch里定义的方法）；计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter；自定义的侦听器watch在数据变化时执行异步或开销较大的操作时是最有用的
Class 与 Style 绑定
v-bind 用于 class 和 style，表达式结果的类型除了字符串之外，还可以是对象或数组
先介绍Class绑定
绑定对象
data: { isActive: true, hasError: false }当 isActive 或者 hasError 变化时，class 列表将相应地更新,也可以让绑定对象不内联定义在模板里，结果也是一致的：
绑定data: { classObject: { active: true, 'text-danger': false } }计算属性也可以更灵活的展现（不举例子了）绑定数组
data: { activeClass: 'active', errorClass: 'text-danger' }绑定组件（语法和前面完全类似）
Style绑定
v-bind:style 的对象语法
绑定对象
data: { activeColor: 'red', fontSize: 30 }或者直接写
data: { styleObject: { color: 'red', fontSize: '13px' } }绑定数组
条件渲染
v-if、v-else-if、v-else可以配合使用：
A
B
C
data : {
type : "B"
}
在 元素上使用 v-if 条件渲染分组，显示多个元素
Title
Paragraph 1
Paragraph 2
用key管理重复元素
使用key标示元素后，Vue不会采用偷懒的复用，而会重新渲染元素
v-show：只有显示和不显示两种
Hello!
v-if vs v-show：需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
列表渲染
v-for用于列表渲染
迭代数组
ps:index从0开始，- {{ parentMessage }} - {{ index }} - {{ item.message }}
in可以替换为of，迭代插值写的是{{index}}，不是{{item.index}}迭代对象
{{ index }}. {{ name }}: {{ value }}new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })使用唯一key配合v-for保证渲染正确（删除、排序、过滤等场景用得到）
数组变异方法 (mutation method)
push()、pop()、shift()、unshift()、splice()、sort()、reverse()，例子：
这些方法会直接改变数组本身example1.items.push({ message: 'Baz' })
非变异 (non-mutating method) 方法
filter()、concat()、slice()
这些方法不会改变传入的数组本身，但是方法的example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })返回值是一个新数组，可以把这个数组赋值给原来的数组达到同样的效果
注意事项
数组的一些错误写法：var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的正确写法：
//第一个问题 // Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) //实例写法 vm.$set(vm.items, indexOfItem, newValue) //第二个问题 vm.items.splice(newLength)对象的一些错误写法：
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b = 2 // `vm.b` 不是响应式的对于已经创建的实例，Vue 不允许动态添加
根级别的响应式属性，但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性：var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) Vue.set(vm.userProfile, 'age', 27) //或者 vm.$set(vm.userProfile, 'age', 27)
表单输入绑定
v-model指令在表单 、 tips: () 并不会生效，应用 v-model 来代替。
复选框
多个复选框，绑定到同一个数组，例子：
Checked names: {{ checkedNames }}
new Vue({
el: '#example-3',
data: {
checkedNames: ['Jack']
}
})单选按钮
Picked: {{ picked }}
new Vue({
el: '#example-4',
data: {
picked: 'Two'
}
})选择框
单选：
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: 'A'
}
})多选时 (绑定到一个数组):
Selected: {{ selected }}
new Vue({
el: '#example-6',
data: {
selected: ['A','B']
}
})v-for显示下拉框例子：
Selected: {{ selected }}new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串，有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串（不举例子了）
- .lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步
- .number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
- .trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：