vue 的基础应用（上）
Tip: vue 的基础应用分上下两篇，上篇是基础，下篇是应用。
在初步认识 vue一文中，我们已经写了一个 vue 的 hello-world。对 vue 已经有了一个大概的印象。
接下来我们应该掌握 vue 的最基础知识，学会 vue 的基本应用。
比较好的方法就是花个几天的时间将 vue 官网的基础篇尽量走一遍，写一写例子。以下是 vue 2.x 的基础篇的目录：
- 教程 2.x
- 基础
- 安装
- 介绍
- Vue 实例
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
注：如果你像笔者一样，只有 jQuery 开发的经验，在看基础篇的过程种，肯定会有很多的不懂之处，先看下去，把能看懂的先看完。
- 基础
本文记录的是笔者当初看 vue 基础篇遇到的一些重要的、不好理解的知识点，算是基础篇的一个补充或笔记。
Vue 实例
通过 new Vue() 来创建一个实例，其中 el 选项提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
vue 实例会经历一系列的过程，比如数据侦测、模板编译、渲染到视图等，这就是 vue 实例的生命周期，vue 对外提供了生命周期的钩子函数，这就允许我们在 vue 的各个阶段插入一些我们的逻辑。
document
{{message}}
Tip: 后续不在提供完整的代码，省略 head、body 等。
模板语法
前文说过 vue 是声明式操作 dom 的框架。我们只需要描述状态与 dom 之间的映射关系即可，状态到视图的转换，框架会帮我们做，状态改变，视图也会自动更新。
而 vue 是通过模板来描述状态与 dom 之间的映射关系。所以模板的知识点稍微会多一点。
条件渲染
用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。如果需要表达“这两个元素是完全独立的，不要复用它们”，只需添加一个具有唯一值的 key attribute 即可。
// 给 input 添加 key 属性
v-if vs v-show
v-if 是真正的条件渲染；v-show 只是简单地切换元素的 CSS property display；
例如下面这种场景，点击一个新建按钮，显示弹框组件（custom-dialog），弹框中有一些 input 输入框，如果需要每次点击新建，弹框组件整个都重新生成，则可以使用 v-if；否则在弹框中输入了文字，通过 v-show 隐藏弹框，下次在显示时，可能之前输入的文字、错误信息都还存在。
表单输入绑定
v-model：在表单控件或者组件上创建双向绑定。
应用在表单控件上，请看示例：
Message is: {{ message }}
v-model 本质上不过是语法糖。行{1} 的本质其实是 行{2}。
v-model 在组件中的使用请看下文。
组件基础
上面介绍的其实是基础中最简单的部分。而组件是基础篇中最应该掌握的部分。
Vue.component()
可以通过 Vue.component() 注册或获取全局组件。请看示例：
{{message}}
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。
因为组件是可复用的 Vue 实例，所以它们与 new Vue() 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
通常一个应用会以一棵嵌套的组件树的形式来组织，这样就能完成一个功能很复杂的页面。
props
props 用于接收来自父组件的数据。请看示例：
number: {{count}}
Vue.component(‘button-counter’, {
data: function(){
return {
num: 10
}
},
template: `
