Vue笔记一：简单入门
引言
vue.js是由尤大神Evan YOU主持的MVVM项目，相对angular更轻量，相对react更好用，结合了很多前段框架的优点。
入门
其实，在官网的教程也十分清晰。我讲讲双向绑定的优势吧。以前我们用Jquery进行dom的操作，虽然熟悉后开发效率很高，但是如果多个控件的相互操作多的情况下，还是会乱。相比之下，Vue的使用更加清晰，通过虚拟dom将数据绑定，而且组件化和路由的帮助下，让整个网页符合SPA（Single Page Application）的潮流趋势。如果你懂的Angular.js，那么Vue.js就是囊中之物。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
{{}}是一个标识符，将message将Javascript中Vue中数据的message绑定，它的初始值为Hello Vue.js!。当然，所有的操作要在id为app的作用域之中。
数据输入方面则是将input的数据模型通过v-model进行绑定。这样，当你在文本框输入文字时，对应的<p>的内容也会随之改变，效果参考。这些功能如果用Jquery实现则是非常繁琐。我必定会对很多id进行设置。
除此以外，还可以像angular那样进行循环渲染。通过v-for把数组数据进行循环显示，效果参考。
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
当然method也可以进行绑定，通过v-on:click把Vue中的method绑定。
组件
上面讲的都是html页面最顶层的
参考
转载，请表明出处。总目录前段收集器
