初探 Vue.js
简介
Vue 是一套用于构建用户界面的渐进式框架，与其他大型框架不同在于，Vue 被设计为可以自底向上逐层应用。
Vue 的核心只关注视图层，即 View。不仅易于上手，还便于与第三方库或既有项目整合
与现代化工具链及各种**支持类库结合使用时，能够为复杂的单页应用**提供驱动
快速上手
JSFiddle 在线演示
或按照上例在本地引入 Vue
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
vue.js 核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
解读：vue 是这样一个系统：允许你使用简洁的模板语法来声明式地将数据渲染进DOM
<div id="app">
{{ message }}
</div>
这是一个 DOM 结构，div 有唯一标识(id)——app
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
声明一个 VUE 对象，来给 id 为 app 的这个元素声明式地将’Hello Vue!’（字符串数据）渲染进其 DOM
这样就已经创建了一个 Vue 应用，并且数据和DOM建立起关联，所有东西都是响应式的
测试：在浏览器控制台中修改 app.message 的值，会看到相应更新
除了上面的文本插值，还可以如下这样绑定元素特性：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: "#app-2",
data: {
message: "页面加载于 " + new Date().toLocaleString(),
},
});
v-bind称为指令，vue 的指令都以v-为前缀，它们会在渲染的 DOM 上应用特殊的响应式行为
此处指令 v-bind:title=“message"意指“将这个元素节点的 title 属性和 Vue 实例（new Vue()）的 message 属性保持一致”
同样，在 Vue 中数据和 DOM 存在响应式关联，即修改 app2.message = ‘其他消息’会看到绑定了 title 特性的 HTML 发生更新
That is really interesting!
条件与循环
控制一个元素是否显示：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: "#app-3",
data: {
seen: true,
},
});
此外，Vue 还提供强大的过渡效果系统，可以在 Vue插入/更新/移除元素时自动应用过渡效果
每个 Vue 指令都有特殊的功能，例如 v-for 指令可以绑定数组的数据来渲染一个项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: "#app-4",
data: {
todos: [{ text: "元素1" }, { text: "元素2" }, { text: "元素3" }],
},
});
在控制台内向 app4 这个 Vue 实例中的数组再添加一个对象
处理用户输入
v-on 指令可添加一个事件监听器，通过其调用Vue 实例中定义的方法，可与用户进行交互
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: "#app-5",
data: {
message: "Hello Vue!",
},
methods: {
reverseMessage: function () {
this.message = this.message.split("").reverse().join("");
},
},
});
注意点：
选择器是#app-5 而非 app-5
中英文符号{}
methods 而非 method
Vue 还有 v-model 指令用于实现表单输入和应用状态之间的双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: "#app-6",
data: {
message: "Hello Vue!",
},
});
该双向绑定对比 Angular 最简示例更加轻便
组件化应用构建
组件系统是 Vue 另一重要概念（区别于前面过渡系统）
因为组件系统是一种抽象，允许使用小型（tiny）、**独立（independent）**和可复用（reusable）的组件构建大型应用（类似 React）
一个组件的本质是一个拥有预定义选项的一个 Vue 实例
在 Vue 中注册组件：
Vue.component("todo-item", {
template: "<li>待办项</li>",
});
现在可以有用它构建另一个组件模板
<ol>
<todo-item></todo-item>
</ol>
但这样为每个待办项渲染同样的文本很差劲
应能从父作用域将数据传到子组件
Vue.component('todo-item', {
props: ['todo'].
template: '<li>{{ todo.text }}</li>'
})
使用 v-bind 指令将待办项传到循环输出的每个组件中
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
<todo-item>
</ol>
</div>
Vue.component("todo-item", {
props: ["todo"],
template: "<li>{{ todo.text }}</li>",
});
var app7 = new Vue({
el: "#app-7",
data: {
groceryList: [
{ id: 0, text: "待办1" },
{ id: 1, text: "待办2" },
{ id: 2, text: "待办3" },
],
},
});
这就像是在前端使用面向对象思想声明了了类，并实例化一个实例来处理数组
这个例子将应用分割成两个更小的单元。
子单元通过 prop 接口与父单元进行了良好的解耦
可进一步改进组件，提供更为复杂的模板和逻辑，而不影响父单元
在一个大型应用中有必要将整个应用划分为组件，以使开发更易管理
如下例展示了使用了组件的应用模板是什么样：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-siderbar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
与自定义元素的关系
Vue 的组件非常类似于自定义元素——它是 Web 组件规范的一部分，因为 Vue 的组件语法部分参考了该规范，如 Vue 组件实现了Slot API与 is 特性
但是，有几个关键差别：
Web 组件规范仍处于草案阶段，并未被所有浏览器原生实现。而 Vue 组件不需要任何 polyfill，且在所有支持的浏览器（IE9 及以上）中表现一致。必要时 Vue 组件也可包装于原生自定义元素之内
Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信和构建工具集成
参考链接：