vue组件定义,全局、局部组件,配合模板及动态组件功能示例
本文实例讲述了vue组件定义,全局、局部组件,配合模板及动态组件功能。分享给大家供大家参考,具体如下:
目前成都创新互联已为近1000家的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、大厂网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
一、定义一个组件
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({ template:'我是标题3
' }); Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式,函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({ el:'#box', data:{ bSign:true }, components:{ //局部组件 aaa:Aaa } });
1. 全局组件
Document
Document
组件里面放数据:
Document
2. 局部组件
放到某个组件内部
Document
另外一种写法,局部
Document
二、配合模板
配合模板:
1. template:'
标题2->{{msg}}
'2. 单独放到某个地方
a).
b).
标题1
- {{val}}
方法一:
Document
方法二:
Document {{msg}}
- {{val}}
三、动态组件
动态组件:
Document
运行效果:
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
本文标题:vue组件定义,全局、局部组件,配合模板及动态组件功能示例
URL分享:http://scyanting.com/article/piopdc.html