网站建设资讯

NEWS

网站建设资讯

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).



方法一:




 
 Document
 
 


 

方法二:




 
 Document
 
 


 

三、动态组件

动态组件:






 
 Document
 
 


 

运行效果:

vue组件定义,全局、局部组件,配合模板及动态组件功能示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。


网页标题:vue组件定义,全局、局部组件,配合模板及动态组件功能示例
网页网址:http://njwzjz.com/article/piopdc.html