首页 > 安全资讯 >

Vue.js笔记-组件

17-08-24

Vue js笔记-组件,组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

Vue.js笔记-组件

组件

组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。 Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项,但最核心的是以下几个:

模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式地声明为双向绑定。

方法(methods):对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。

生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,比如created,attached,destroyed等等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,可以理解为 Controller的逻辑被分散到了这些钩子函数中。

私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

除此之外,同一颗组件树之内的组件之间还可以通过内建的事件API来进行通信。Vue.js提供了完善的定义、复用和嵌套组件的API,让开发者可以像搭积木一样用组件拼出整个应用的界面。 组件大大提高了代码的效率和维护性以及复用率。

使用组件

注册

1.创建一个组件构造器:

var MyComponent = Vue.extend({

//选项

})

2.将构造器用做组件,用Vue.component(tag,constructor)注册:

Vue.component('my-component',MyComponent)

3.在父实例的模块中以自定义元素的形式使用:

例子:

// 定义

var MyComponent = Vue.extend({

template: '

A custom component!

'

})

// 注册

Vue.component('my-component', MyComponent)

// 创建根实例

new Vue({

el: '#example'

})

渲染为:

A custom component!

组件的模板替换了自定义元素,自定义元素的作用只是作为一个挂载点。可以用实例选项 replace 决定是否替换。

局部注册

用实例选项components注册,不需要全局注册每个组件,可以让组件只能用在其他组件内:

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({

template: '...',

components: {

// 只能用在父组件模板内

'my-component': Child

}

})

这种封装也适用于其它资源,如指令、过滤器和过渡。

注册语法糖

// 在一个步骤中扩展与注册

Vue.component('my-component', {

template: '

A custom component!

'

})

// 局部注册也可以这么做

var Parent = Vue.extend({

components: {

'my-component': {

template: '

A custom component!

'

}

}

})

组件选项问题

传入Vue构造器的多数选项也可以用在Vue.extend()中,除了data和el,如果简单的把一个对象作为data选项传给Vue.extend(),则所有的实例将共享同一个data对象,因此我们应当使用一个函数作为data选项,让这个函数返回一个新对象:

var MyComponent = Vue.extend({

data: function () {

return { a: 1 }

}

})

模板解析

Vue的模板是DOM模板,使用浏览器原生的解析器,所以它必须是有效的HTML片段,一些HTML元素对什么元素可以放在它里面有限制,常见的限制有:

a 不能包含其它的交互元素(如按钮,链接)

ul 和 ol 只能直接包含 li

select 只能包含 option 和 optgroup

table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup

tr 只能直接包含 th 和 td

在实际中,这些限制会导致意外的结果。尽管在简单的情况下它可能可以工作,但是你不能依赖自定义组件在浏览器验证之前的展开结果。例如不是有效的模板,即使 my-select 组件最终展开为 ...。 另一个结果是,自定义标签(包括自定义元素和特殊标签,如 、//。

相关文章
最新文章
热点推荐