探索Vue.js component内容实现

前端之家收集整理的这篇文章主要介绍了探索Vue.js component内容实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

Vue.js是一个构建数据驱动的web界面的库,其目标是实现

响应的数据绑定

组合的试图组件

Vue.js拥抱

数据驱动的视图

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

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

// 这是我们的 Model var exampleData = { name: 'Vue.js' }

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

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

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

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

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

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

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

计算属性

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


var vm = new Vue({ el: '#demo',data: { firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar' } })

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}}

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

构件上 Selected: {{ selected }}

v-if,v-else 

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

v-for

这个用于对数组元素的遍历,举个例子: 

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

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

  • 标签显示出来

    为了避免对整个列表进行渲染,经常会使用:track-by = "$index",表示只对当前数组元素进行操作。  

    至此,关于Vue的最基本的东西已经介绍完,需要更多的API资料可以参考:

    Vue文件的结构以及数据流的控制

    在vue文件中,我们经常可以看到这样的格式: