什么是Vue.js
用于构建用户界面的渐进式框架，可以自底向上逐层应用
最基础开始：
声明式渲染
Vue.js的核心是一个允许采用简洁的末班语法来声明式的将数据渲染进DOM系统
案例：
html: <div id="app">{{message}}</div> js: var app = new Vue({ el:'#app', data:{ message:'hello vue' } }) |
通过声明将数据渲染到HTML上，页面中会显示hello vue，并且他们是响应式的
即如果message发生改变，会自动渲染到HTML上
也可以用来绑定元素特性：
案例：
HTML: <div id="app"> <span v-bind:title="message"> 鼠标悬停查看信息 </span> </div> JS: var app = new Vue({ el:'#app', data:{ message:"页面加载于" + new Date().toLoacleString() } }) |
将span的title属性绑定为message
v-bind：指令，指令带有前缀v-，以表示他们是特殊的特性
条件与循环
控制切换一个元素是否显示：
HTML： <div id="app"> <p v-if="seen">这段文字目前是显示的</p> </div> JS： var app = new Vue({ el:'#app', data:{ seen:true } }) |
不仅可以吧数据绑定到DOM文本或者特性上，还可以绑定到DOM结构中
此处的文字是显示的，当seen为false时，p自动隐藏
v-for
v-for指令可以绑定数组的数据用来渲染项目列表
HTML： <div id="app"> <ol> <li v-for="todo in todos">{{todo}}</li> </ol> </div> JS： var app = new Vue({ el:'#app', data:{ todos:[ "第一条数据", "第二条数据", "第三条数据" ] } }) |
输入app.todos.push("第四条数据")会自动将数据插入
处理用户输入
为了实现交互，可以使用v-on指令添加事件监听
案例：
HTML： <div id="app"> <p>{{message}}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> JS: var app = new Vue({ el:"#app", data:{ message:"Hello Vue.js" }, methods:{ reverseMessage:function(){ this.message = this.message.split("").reverse().join(" ") } } }) |
在reverseMessage中，更新了应用的状态，但是没有使用DOM，所有的DOM操
作都由Vue来进行处理。
v-model
实现表单输入和应用状态之间的双向绑定
案例：
HTML: <div id="app"> <p>{{message}}</p> <input v-model="message"> </div> JS： var app = new Vue({ el:"#app", data:{ message:"Hello Vue" } }) |
当输入框输入数据的时候，p中显示的数据随之变化
组件化应用构建
组件系统是Vue的重要概念，允许我们使用小型，独立和通常可服用的组件构建大
型应用，可以将任何类型的应用界面抽象为一课组件树
在Vue总，一个组件的本质是拥有预定义选项的Vue实例
在Vue中注册组件：
Vue.component("todo-item",{
template: "<li>这是一个待办项"</li>
})
可以用它构建另一个组件模板：
<ol>
<todo-item></todo-item>
</ol>
如果这样，每个待办项都会显示相同文本，修改组件定义，使它能够接受一个prop
Vue.component("todo-item",{
props:["todo"],
template: "<li>这是一个待办项"</li>
})
HTML：
<div id="app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
>
</todo-item>
</ol>
</div>
JS：
Vue.component("todo-item",{
props:["todo"],
template:'<li>{{todo.text}}</li>'
})
var app = new Vue({
el:"#app",
data:{
groceryList:[
{id:0,text:'蔬菜'},
{id:1,text:'奶酪'},
{id:2,text:"吃啥都行"}
]
}
})
这个例子是刻意设计的，设法将应用分割为两个小的单元，子单元通过props解构与
父单元进行了良好的降低耦合，现在刻意进一步改进<todo-item>组件，提供更为复
杂的逻辑和模板，而不会影响到父单元