前言
开始Vue的学习，主要内容大概仅仅是官方手册的部分内容。主要是作为学习过程中的备忘录，以后可以翻翻快速回忆起Vue的内容。
一、 起步
基础内容
指令
v-bind
v-on:event
v-model
v-for
v-if
组件化构建
a. 简单的创建一个模板
JS代码
Vue.component('todo-item', {
tempalte:'<li>这个是例子</li>'
})
模板
<ol>
<!-- 创建一个自定义组建实例 -->
<todo-item></todo-item>
</ol>
b. 带传入参数的自定义模板
JS代码
Vue.component('todo-item', {
// todo-item 组件现在接受一个
prop: ['todo'],
tempalte: '<li>这个是例子</li>'
})
模板
<ol>
<!-- 创建一个自定义组建实例 -->
<!-- key必须传入 -->
<todo-item
v-bind:todo="val"
v-bind:key="val.id">
</todo-item>
</ol>
二、Vue实例
Vue实例
每个Vue应用从Vue函数创建一个Vue实例开始
var vm = new Vue({
// 选项
// data: data 传入的数据
})
Vue实例生命周期钩子
生命周期钩子：即Vue实例创建过程中，不同阶段被调用的函数。
如：
mounted、updated和destroyed。
生命周期钩子的this上下文指向调用它的Vue实例。
注意：
不要再选项属性或者回调上使用箭头函数，如：
created:() => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())
因为箭头函数和父级上下文绑定在一起，this不会指向所预期的Vue实例，导致报错。
三、模板语言
插值
#文本
"Mustache"语法， {{ 变量名 }}
html内容会随着变量动态改变。
指令：v-once，只一次性插值，后续不会随变量动态改变
#原始HTML
指令：v-html
<span v-html="name"></span>
将变量name解析为html内容并替代span的内容。
#特性
指令：v-bind
给html特性绑定变量。
<button v-bind:id="myId"></button>
注意，当变量为假时，id属性不会出现在html元素中（不会被渲染）。
#使用javascript表达式
在"Mustache"语法中，可以使用单条avascript语句。
指令
#参数
v-command:arg
command: 指令
arg: 参数
#修饰符
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v-bind:
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-for:
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
