<!-- 缩写 -->
...### 最近想搞一些微信小程序，顺便了解一下Vue。15年看过一点angular，一直没有实践的时候，这次用国人学的框架试试手。
学习新事物的三个单词 W(why)W(whar)H(how),就从这三个单词入手
WHY:
VUE是一种MVVM架构，我们在改变数据的时候不需要再去操作DOM，而是直接改变数据即可，Angular等都支持这种方式。
而且它还是国产，方便我们去学习。
WHAT：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
How：
因为是国人开发，文档更加友好，可以从官网入门。
下面做一些学习记录，记录一下学习过程。
渲染DOM数据
<div id='app'>
<p>{{msg}}</p>
</div>
var app = new Vue({
el:'#app',
data:{
msg:'hello Vue.js By Liuser'
}
});
此处dom中ID与VUE进行绑定，在data数据发生改变的时候，dom中的数据会相应的进行改变
绑定元素（属性）
绑定元素与绑定DOM不同，使用一个指令v-bind。
指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
<!-- 缩写 -->
#这里也可以使用缩写形式 <span :title="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-if
<div id="app-3">
<p v-if="flag">显示</p>
</div>
]
var app3 = new Vue({
el: '#app-3',
data: {
flag: true
}
})
这时，默认为显示，如果使用控制台手动修改app3.flag=false,则会隐藏循环语句使用v-for
<div id="app-4">
<ui>
<li v-for="item in list">
{{item.text}}
</li>
</ui>
</div>
var app4 = new Vue({
el: '#app-4',
data:{
list:[
{text:'javascript'},
{text:'java'},
{text:'php'},
{text:'c'},
{text:'c++'},
]
}
});
在控制台里，输入 app4.list.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。交互
使用v-on添加事件
#这里也可以使用缩写
<button @click="reverseMessage">逆转消息</button>
<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.js'
},
methods:{
reverseMessage:function () {
this.message = this.message.split('').reverse().join('');
}
}
});表单输入和应用状态之间的双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
在输入的时候，会自动映射到p标签内