现在来系统地学习一下Vue（参考vue.js官方文档）:
Vue.js是一个构建数据驱动的web界面的库，其目标是实现响应的数据绑定和组合的试图组件。
Vue.js拥抱数据驱动的视图概念，这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据。一旦创建了绑定，DOM将于数据保持同步。
以下参考代码与上面的模型相对应
<!-- 这是我们的 View --> <div> Hello {{ name }}! </div> // 这是我们的 Model var exampleData = { name: 'Vue.js' } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model var exampleVM = new Vue({ el: '#example-1', // 在一个id为'example-1'的实体上挂载 data: exampleData // 数据流 })
通常我们会把Model写在Vue实例当中，下面写法与上面写法效果一样：
<!-- 这是我们的 View --> <div> Hello {{ name }}! <!--- Vue的数据模型用{{datamodel}}包裹起来 ---> </div> // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model<br><script> var exampleVM = new Vue({ el: '#example-1', // 在一个id为'example-1'的实体上挂载 data: { name: 'Vue.js' } // 数据流 })<br></script>
这样一段程序执行后，在#example-1这个控件中就会显示‘Hello Vue.js!'。
下面来看看指令(Directives)：
指令是特殊的带有前缀 v- 的特性，指令的值限定为绑定表达式，比如一个if的指令：
<p v-if="greeting">hello!<p>
还有绑定指令，即将某些属性值与一些值相绑定，比如：
<input :type = "questItem.type", :name = "questItem.name"/>
这里省略了“v-bind”，使得input的属性值赋值具有“计算”的效果。
计算属性
这里介绍一下$watch的用法，用于当一个数据需要根据其他的数据而变化时的情况：
<script><br>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } })<br></script> vm.$watch('firstName', function (val) { // 当firstname改变时，立马更新vm.fullname this.fullName = val + ' ' + this.lastName }) vm.$watch('lastName', function (val) { // 当lastname改变时，立马更新vm.fullname this.fullName = this.firstName + ' ' + val })
在这里，所有的数据的对象都可以通过vm.firstname等来访问。
v-model
顾名思义，就是Vue当中的数据模型，它用来绑定Vue实例中的数据：
<!--- bi-direction bound ---> <div> <p>{{message}}</p> <input v-model="message"> <!--Model，input输入的数据会立即反馈到Vue实例中--> </div> <script> new Vue({ el: '#app', // View data: { message: 'Hello Vue.js' } }) </script>
比如要用来绑定一个表单控件，就是把选择的值显示出来：
<!--- 表单控件绑定-单选 ---> <div> // 外面这一层我一开始没有加，然后就出错了，el好像一般是挂载在<div>构件上 <select v-model="selected"> // data的数据类型是selected，值是选取的值 <option seleceted>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <script> new Vue({ el: '#myselect', data:{ selected:[] } }) </script>
v-if, v-else
这个指令可以用的很灵活，比如我在表单中生成新题目，有“单选题”、“多选题”、“文本题”三种，那么针对不同的题目应该显示的控件有所不同，这时可以使用如下语法：
<div v-if="questItem.type === 'textarea'"> // 注意是三个等号 <textarea></textarea> </div> <div v=else> <div></div> </div>
v-for
这个用于对数组元素的遍历，举个例子：
<ul> <li v-for="item in items"> <!--- $index指的是当前数组元素在数组中的位置 ---> {{parentMessage}} - {{$index}} - {{item.message}} <!--一个view结构--> </li> </ul> <button>点击我</button> <script> var demo= new Vue({ el: '#demo', data:{ parentMessage: 'Parent', items:[ {message: 'Foo'}, {message: 'Bar'} ] } }) </script>
以上代码的意思是遍历demo实例中的items数组，将里面的每一个数组元素（'Foo'，'Bar'）分别在<li>标签中显示出来
为了避免对整个列表进行渲染，经常会使用：track-by = "$index"，表示只对当前数组元素进行操作。
至此，关于Vue的最基本的东西已经介绍完，需要更多的API资料可以参考：
Vue文件的结构以及数据流的控制
在vue文件中，我们经常可以看到这样的格式：