Vuejs——(8)Vuejs组件的定义
来源:互联网 发布:2016中韩双边贸易数据 编辑:程序博客网 时间:2024/05/24 04:14
本篇资料来于官方文档:
http://cn.vuejs.org/guide/components.html
本文是在官方文档的基础上,更加细致的说明,代码更多更全。
简单来说,更适合新手阅读
(二十五)组件的定义
①组件的作用:
【1】扩展HTML元素,封装可重用的代码;
【2】组件是自定义元素,Vuejs的编译器可以为其添加特殊的功能;
【3】某些情况下,组件可以是原生HTML元素的形式,以is的方式扩展。
②写一个标准的组件:
分为以下几步:
【1】挂载组件的地方,需要是Vue实例所渲染的html元素,具体来说,比如上面的<div id=”app”></div>这样的html元素及他的子节点;
【2】定义一个组件,用
var 变量名 = Vue.extend({template:”这里是html的模板内容”})
这样的形式创建,例如:
//定义一个组件var btn = Vue.extend({ template: "<button>这是一个按钮</button>"})
【3】将定义的组件注册到Vue实例上,这会让指定标签,被组件的内容所替代。
如代码:
//注册他到Vue实例上Vue.component("add-button", btn);
具体而言,每一个以下这样的标签(在Vue的根实例范围内的)
<add-button></add-button>
会被
<button>这是一个按钮</button>
所替代。
【4】以上方法是全局注册(每个Vue实例的add-button标签都会被我们定义的所替代);
解决办法是局部注册。
如代码:(这是是设置了template属性,也可以在没有这个属性的时候,在<div id=”app”></div>标签内放置<add-button></add-button>标签
<div id="app"></div><script> //定义一个组件 var btn = Vue.extend({ template: "<button>这是一个按钮</button>" }) Vue.component("add-button", btn); //创建根实例,也就是说让Vue对这个根生效 var vm = new Vue({ el: '#app', template: "<add-button></add-button>" });</script>
③局部注册组件:
简单来说,只对这一个Vue实例生效,具体做法是,在注册那一步,跳过;
然后在声明Vue实例的时候,将添加到components这个属性中(他是一个对象,以KV形式放置)(注意,这个单词多一个s)
如代码:
<div id="app"></div><script> //定义一个组件 var btn = Vue.extend({ template: "<button>这是一个按钮</button>" }) //创建根实例,也就是说让Vue对这个根生效 var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "add-button": btn } });</script>
注:
根据官方教程,这种方法(指局部注册),也适用于其他资源,比如指令、过滤器和过渡。
④步骤简化:
【1】定义组件和注册组件结合起来一步完成:
//定义一个组件Vue.component("add-button", { template: "<button>这是一个按钮</button>"});
【2】局部注册时,定义和注册一步完成:
//创建根实例,也就是说让Vue对这个根生效var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "add-button": { template: "<button>这是一个按钮</button>" } }});
⑤data属性
直接给组件添加data属性是不可以的(无效);
原因在于,假如这么干,那么组件的data属性有可能是一个对象,而这个对象也有可能是外部传入的(例如先声明一个对象,然后这个对象作为data的值),可能导致这个组件的所有副本,都共享一个对象(那个外部传入的),这显然是不对的。
因此,data属性应该是一个函数,然后有一个返回值,这个返回值作为data属性的值。
且这个返回值应该是一个全新的对象(即深度复制的,避免多个组件共享一个对象);
如代码:
var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "add-button": { template: "<button>这是一个按钮{{btn}}</button>", data: function () { return {btn: "123"}; } } }});
另外,假如这样的话,btn的值是一样的(因为他们实际上还是共享了一个对象)
<div id="app"></div><div id="app2"></div><script> var obj = {btn: "123"}; var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "add-button": { template: "<button>这是一个按钮{{btn}}</button>", data: function () { return obj; } } } }); obj.btn = "456"; var vm2 = new Vue({ el: '#app2', template: "<add-button></add-button>", components: { "add-button": { template: "<button>这是一个按钮{{btn}}</button>", data: function () { return obj; } } } });</script>
注:
el属性用在Vue.extend()中时,也须是一个函数。
⑥is特性:
【1】按照官方教程,一些HTML元素对什么元素可以放在它之中是有限制的;
简单来说,如果我要在table标签内复用某个组件,这个组件展开后是tr标签,但是展开前不是,那么就无法正常运行(被放置在table标签内);
如代码(错误写法,会渲染错误):
<div id="app"> <table> <tr> <td>索引</td> <td>ID</td> <td>说明</td> </tr> <thetr v-for="i in items" v-bind:id="i" :index="$index"></thetr> </table></div><script> var vm = new Vue({ el: '#app', data: { items: [1, 2, 3, 4] }, methods: { toknowchildren: function () { //切换组件显示 console.log(this.$children); } }, components: { thetr: { //第一个子组件 template: "<tr>" + "<td>{{index}}</td>" + "<td>{{id}}</td>" + "<td>这里是子组件</td>" + "</tr>", props: ['id', 'index'] } } });</script>
渲染结果如下:
<div id="app"> <tr><td>0</td><td>1</td><td>这里是子组件</td></tr> <tr><td>1</td><td>2</td><td>这里是子组件</td></tr> <tr><td>2</td><td>3</td><td>这里是子组件</td></tr> <tr><td>3</td><td>4</td><td>这里是子组件</td></tr> <table> <tbody> <tr> <td>索引</td> <td>ID</td> <td>说明</td> </tr> </tbody> </table></div>
可以明显发现,内容没有被放在table之中。
正确写法如下:
<div id="app"> <button @click="toknowchildren">点击让子组件显示</button> <table> <tr> <td>索引</td> <td>ID</td> <td>说明</td> </tr> <tr is="thetr" v-for="i in items" v-bind:id="i" :index="$index"></tr> </table></div>
- Vuejs——(8)Vuejs组件的定义
- Vuejs——(8)Vuejs组件的定义
- Vuejs(15)——Vue的异步组件
- Vuejs(15)——Vue的异步组件
- Vuejs(15)——Vue的异步组件
- VueJs的组件化
- vuejs 组件的认识
- Vuejs——(12)组件——动态组件
- Vuejs——(12)组件——动态组件
- Vuejs——(13)组件——杂项
- Vuejs——(13)组件——杂项
- Vuejs组件——slot内容分发
- Vuejs组件——slot内容分发
- vueJS组件
- Vuejs——(6)Vuejs与form元素
- Vuejs——(6)Vuejs与form元素
- 学习vuejs的第一天(vuejs)
- VueJs—常用操作手册
- 读书笔记——初识保护模式
- js自动播放效果的实现
- C++中关于:文件包含太多,深度 = 1024
- linux永久修改主机名
- ITOO之界面显示、级联、模糊显示
- Vuejs——(8)Vuejs组件的定义
- 关于string,stringBuilder,stringBuffer
- [leetcode]15. 3Sum
- maven+springMVC+mysql+mybatis+velocity+事务整合
- 《自己动手写操作系统》学习笔记(五)
- mysql5.7安装和使用--CentOS操作系统
- 刷刷笔试题~~[矩阵]
- hive on spark VS SparkSQL VS hive on tez
- 创建和准备Oracle样例数据库