vue.js基础-组件
来源:互联网 发布:golang udp server 编辑:程序博客网 时间:2024/05/16 03:25
组件
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用。
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。
全局注册组件
//注册组件Vue.component('todo-item', {//template内写入组件的模板样式 template: '<li>自定义组件!</li>'})
使用组件:
<ul> <todo-item></todo-item></ul>
这个时候还是十分不方便的,因为我们如果想在另一个地方使用这个组件,文本都是一样的,这不能满足我们代码复用的需求,所以我们要使用 v-bind指令将需要自定义内容传入重复的组件中。
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供待办项对象 待办项对象是变量,即其内容可以是动态的。 我们也需要为每个组件提供一个“key” --> <todo-item //item是数组元素,groceryList是一个数组,item将数组groceryList数组遍历 v-for="item in groceryList" //将数组元素绑定在自定义属性todo上 v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol></div>
Vue.component('todo-item', {//props接口,定义了一个自定义属性,实现解除子单元和父单元的部分联系,也就是解耦 props: ['todo'], template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其他什么人吃的东西' } ] }})
运行结果:
1.蔬菜
2.奶酪
3.随便其他什么人吃的东西
总结:
props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进,而不会影响到父单元。
与自定义元素的关系
Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是,还是有几个关键差别:
1、Web 组件规范仍然处于草案阶段,并且尚无浏览器原生实现。相比之下,Vue 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。
2、Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流,自定义事件通信以及构建工具集成。
阅读全文
0 0
- vue.js基础-组件
- VUE.JS——组件基础
- VUE.JS——组件基础
- 【Vue.js】-Vue.js组件
- Vue.js组件
- Vue.js笔记-组件
- Vue.js说说组件
- Vue.js 组件
- vue.js组件开发
- Vue.js 组件
- Vue.js说说组件
- Vue.js常用组件
- vue.js之组件
- vue.js 组件问题
- Vue组件基础
- Vue组件基础
- Vue基础之组件
- vue组件基础拓展
- 自定义波浪加载小球
- mysql实现物化视图详解及视图与物化视图区别
- Android异步消息处理线程机制
- 【单调栈】codeforces 280b
- ccf集合竞价
- vue.js基础-组件
- QT关于屏幕保护程序
- js循环语句与循环嵌套
- 算法---从一个数组(或者集合中)找出和为某个值的下标
- jinja2.exceptions.UndefinedError: 'form' is undefined
- Uncaught TypeError: window.showModalDialog is not a function chrome 谷歌浏览器
- 图像搜索项目整理笔记
- redis采用序列化方案存对象
- 用户注册与登录功能的实现