前言
开始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>