作者：烨竹
本文参考：
https://vuejs.org/v2/guide/list.html
http://www.runoob.com/vue2/vue-forms.html
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
生命周期详解：https://blog.csdn.net/qq_25186543/article/details/79470184
基本语法：
一、结构：
Vue.js 是个专注在视图层(View) 的框架，帮助开发者切分前端的资料状态和运作逻辑；（类似土豆变葡萄，土豆是一个整体，而葡萄想吃哪部分都容易，由你决定各自独立运作或是相连）
葡萄自然有个供应养分的起始点，也就是根。让我们三秒看完长怎样
//挂载点为#app，内容为data里面的内容
{{ message }}
二、写法（两种）
1.直接引入Vue.js（template与html混编）
//为例
{{ message }}
- {{ item.text }}
2.透过Vue-loader 编译（官方工具Vue-cli）
/* Menu.vue */
- {{ item.text }}
//使用官方工具Vue-cli，透过几行指令生成基本的专案环境
# 全域安装 vue-cli，當成系統命令用
$ npm install --global vue-cli
# 建立webpack樣板專案
$ vue init webpack my-project
# 若你剛開始學或不需要測試，簡化版本比較好懂
$ vue init webpack-simple my-project
# 安裝所需模組
$ cd my-project
$ npm install
# 開啟 http server
$ npm run dev
三、挂载点（Vue Instance）
const vm = new Vue({
el: 'app', /* 掛載點 */
data: { /* ... */ }, /* 初始資料 */
methods: { /* ... */}, /* 方法 */
});
四、资料绑定（模板相关语法）
{{ msg }}
{{ msg }}
{{ data | json }}
{{ username | capitalize }}
五、指令
1.样式套用
能取到的Vue属性都能当作传入参数（v-bind）
i.绑定Class
①.简单
//基本写法以JSON传入，当对应的数值为true时套用，false时移除该类别
Vue 测试实例 - 菜鸟教程(runoob.com)
②、复杂（class并非固定,可改用Array传入）
Vue 测试实例 - 菜鸟教程(runoob.com)
ii、绑定inline-style
Vue 测试实例 - 菜鸟教程(runoob.com)
菜鸟教程
2.条件显示
UI流程常有特定情况才出现/隐藏DOM 或Component 的需求，Vue 对应写法是
v-if / v-show
v-else
v-else-if
Vue 测试实例 - 菜鸟教程(runoob.com)
A
B
C
Not A/B/C
v-if，v-show区别
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好
3、列表渲染（ v-for又称循环语句）
Vue 测试实例 - 菜鸟教程(runoob.com)
- {{ site.name }}
- --------------
//对象
Vue 测试实例 - 菜鸟教程(runoob.com)
-
{{ index }}. {{ key }} : {{ value }}
//整数
Vue 测试实例 - 菜鸟教程(runoob.com)
-
{{ n }}
4、事件处理（v-on）
Vue 测试实例 - 菜鸟教程(runoob.com)
5、表单输入绑定（ v-model ）
Vue 测试实例 - 菜鸟教程(runoob.com)
input 元素：
消息是: {{ message }}
textarea 元素：
{{ message2 }}
//复选框
单个复选框：
多个复选框：
选择的值为: {{ checkedNames }}
六、过滤器
2.0版本中，过滤器只用于插入文本中({{}})
{{ message | capitalize }}
自定义过滤器
-
{{myfilter(item.label)}}
七、Watch
简单理解：我们希望变数改变时，也有人叫对应的处理器起床做事，这就是Watch 的用途
Vue 测试实例 - 菜鸟教程(runoob.com)
千米 :
米 :
八、计算属性（computed）
特性：当我们定义一个computed，其相依data 一变，computed 也会随之更新。好处：收纳Template中的逻辑
Vue 测试实例 - 菜鸟教程(runoob.com)
{{ message.split('').reverse().join('') }}
computed vs methods
computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值;而使用 methods (其相依的data改变，computed也随之更新)，在重新渲染的时候，函数总会重新调用执行
九、组件（Component）
使用组件有三个步骤：宣告建构子(Constructor)；注册组件(Regist Component) （建立组件(Create Component)）；挂载组件(Mount Component)
1、注册(组件存在意义是为了拆解逻辑、使得结构清晰好懂)
全局组件：所有实例都能用全局组件
Vue 测试实例 - 菜鸟教程(runoob.com)
局部组件
Vue 测试实例 - 菜鸟教程(runoob.com)
Vue.extend
2、prop
原本功能间的协同运作都在同一层，拆成组件后，变成各个独立的状态了，我们仍然需要维持彼此间沟通畅通，如同所有漂亮的JavaScript 模组一样，需要订出漂亮的对外介面(Interface)，使其改动内部逻辑的同时，又不失其重用性(环保可回收)，方便传入外部资料；官方建议使用props down, events up，透过prop传入资料、透过组件事件(event)传递消息,template用于呈现资料
对上图的解释：
右边：data (宣告内部状态)；props (宣告对外介面- 用于传入资料)；prop：接收父组件传递的值；
左边：自用，broadcast (父对子，向下传递)，$dispatch (子对父，向上传递)
總來客量: {{ total }}
template
要怎么让组件样板具有弹性
解法一 具名
Modal title
One fine body…
解法二- inline-template(这种作法会完全覆盖掉
These are compiled as the component's own template.
Not parent's transclusion content.
These are compiled as the component's own template.
Not parent's transclusion content.
3、挂载
透过模板(template)的基本挂载：
is屬性动态挂载:
透过Vue建构子或$mountAPI：
var Example = Vue.extend({
template: 'Here is Example'
});
透过建构子挂载
new Example({ el: '#app' })
挂载前的等效样板
挂载后
给$mount挂载点
new Example().$mount('#app');
跟(1)相同，完全换掉#app内容
当你加上新的组件，又不想盖掉原内容，参考这种做法
4、其他
i、组件(component)间的其他连结
①、children/children直接存取其下一层的子组件。
子组件可透过 root，直接存取最顶层的Vue Instance
②、ref属性& $refs
第二个直接连结是组件的自订索引名- ref，用于父组件对子组件的参照。
定义好的索引名，可以透过父组件的$refs取得
var parent = new Vue({ el: '#parent' })
/* 存取子組件 */
var child = parent.$refs.profile
若是搭配v-for，$refs对应的索引名也会取得阵列/JSON
这个属性在画面渲染完才会更新，资料可能不同步，只适合当备用方案
ii、
加速组件编译
- v-once
一次性编译，用于不会改变的静态资料 - v-pre
跳过不编译，用于不会改变的静态样板