探索Vue.js component内容实现

现在来系统地学习一下Vue（参考vue.js官方文档）:

Vue.js是一个构建数据驱动的web界面的库，其目标是实现响应的数据绑定和组合的试图组件。

Vue.js拥抱数据驱动的视图概念，这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据。一旦创建了绑定，DOM将于数据保持同步。

以下参考代码与上面的模型相对应

   Hello {{ name }}!

// 这是我们的 Model
var exampleData = {
   name: 'Vue.js'
}
 
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
   el: '#example-1',  // 在一个id为'example-1'的实体上挂载
   data: exampleData  // 数据流
})

通常我们会把Model写在Vue实例当中，下面写法与上面写法效果一样：

   Hello {{ name }}!  

 
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model

这样一段程序执行后，在#example-1这个控件中就会显示‘Hello Vue.js!'。

下面来看看指令(Directives)：
指令是特殊的带有前缀 v- 的特性，指令的值限定为绑定表达式，比如一个if的指令：

hello!

还有绑定指令，即将某些属性值与一些值相绑定，比如：

这里省略了“v-bind”，使得input的属性值赋值具有“计算”的效果。　

计算属性

这里介绍一下$watch的用法，用于当一个数据需要根据其他的数据而变化时的情况：

 
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实例中的数据：

  
{{message}}
    

比如要用来绑定一个表单控件，就是把选择的值显示出来：

  // 外面这一层我一开始没有加，然后就出错了，el好像一般是挂载在构件上
 // data的数据类型是selected，值是选取的值
  A
  B
  C

Selected: {{ selected }}

 

v-if, v-else　  

这个指令可以用的很灵活，比如我在表单中生成新题目，有“单选题”、“多选题”、“文本题”三种，那么针对不同的题目应该显示的控件有所不同，这时可以使用如下语法：

 // 注意是三个等号
    


    

v-for

这个用于对数组元素的遍历，举个例子：　

  
  
    {{parentMessage}} - {{$index}} - {{item.message}} 
  

点击我

以上代码的意思是遍历demo实例中的items数组，将里面的每一个数组元素（'Foo'，'Bar'）分别在