做企业微信小程序_vue组件界说,全局、部分组件

vue组件定义,全局、局部组件,配合模板及动态组件功能示例     -M   这篇文章主要介绍了vue组件定义,全局、局部组件,配合模板及动态组件功能,结合实例形式分析了vue.js中组件的定义、全局组件、局部组件、配合模板组件及动态组件的相关使用方法与操作注意事项,需要的朋友可以参考下

本文实例讲述了vue组件定义,全局、局部组件,配合模板及动态组件功能。分享给大家供大家参考,具体如下:

一、定义一个组件

定义一个组件:

1. 全局组件

var Aaa=Vue.extend({
 template:' h3 我是标题3 /h3 '
ponent('aaa',Aaa);

*组件里面放数据:

data必须是函数的形式,函数必须返回一个对象(json)

2. 局部组件

放到某个组件内部

var vm=new Vue({
 el:'#box',
 data:{
 bSign:true
 components:{ //局部组件
 aaa:Aaa

1. 全局组件

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script src="vue/2.4.4/vue.min.js" /script 
 style 
 /style 
 /head 
 body 
 div id="box" 
 aaa /aaa 
 /div 
 script 
 var Aaa=Vue.extend({
 template:' h3 我是标题3 /h3 '
 ponent('aaa',Aaa);
 var vm=new Vue({
 el:'#box',
 data:{
 bSign:true
 /script 
 /body 
 /html 

title Document /title script src="vue/2.4.4/vue.min.js" /script style /style /head body div id="box" my-aaa /my-aaa /div script //另外一种写法,全局 ponent('my-aaa',{ template:' strong 好 /strong ' var vm=new Vue({ el:'#box' /script /body /html

组件里面放数据:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script src="vue/2.4.4/vue.min.js" /script 
 /head 
 body 
 div id="box" 
 aaa /aaa 
 /div 
 script 
 var Aaa=Vue.extend({
 //组件里面放数据:data必须是函数的形式,函数必须返回一个对象(json)
 data(){
 return {
 msg:'我是标题^^'
 methods:{
 change(){
 this.msg='changed'
 template:' h3 @click="change" {{msg}} /h3 '
 ponent('aaa',Aaa);//放在这里是全局
 var vm=new Vue({
 el:'#box',
 data:{
 bSign:true
 /script 
 /body 
 /html 

2. 局部组件

放到某个组件内部

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script src="vue/2.4.4/vue.min.js" /script 
 style 
 /style 
 /head 
 body 
 div id="box" 
 aaa /aaa 
 br/ 
 br/ 
 my-aaa /my-aaa 
 /div 
 script 
 var Aaa=Vue.extend({
 template:' h3 {{msg}} /h3 ',
 data(){
 return {
 msg:'ddddd'
 var vm=new Vue({
 el:'#box',
 data:{
 bSign:true
 components:{ //局部组件
 aaa:Aaa,
 'my-aaa':Aaa//这里的my-aaa需要用引号
 /script 
 /body 
 /html 

另外一种写法,局部

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script src="vue/2.4.4/vue.min.js" /script 
 style 
 /style 
 /head 
 body 
 div id="box" 
 my-aaa /my-aaa 
 /div 
 script 
 var vm=new Vue({
 el:'#box',
 components:{
 'my-aaa':{
 data(){
 return {
 msg:'welcome vue'
 methods:{
 change(){
 this.msg='changed';
 template:' h2 @click="change" 标题2- {{msg}} /h2 '
 /script 
 /body 
 /html 

二、配合模板

配合模板:

1. template:' h2 @click="change" 标题2- {{msg}} /h2 '

2. 单独放到某个地方

a).

 script type="x-template" id="aaa" 
 h2 @click="change" 标题2- {{msg}} /h2 
 /script 

b).

 template id="aaa" 
 h1 标题1 /h1 
 li v-for="val in arr" 
 {{val}}
 /li 
 /ul 
 /template 

方法一:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script src="vue/2.4.4/vue.min.js" /script 
 style 
 /style 
 /head 
 body 
 div id="box" 
 my-aaa /my-aaa 
 /div 
 script type="x-template" id="aaa" 
 h2 @click="change" 标题2- {{msg}} /h2 
 li 1111 /li 
 li 222 /li 
 li 3333 /li 
 li 1111 /li 
 /ul 
 /script 
 script 
 var vm=new Vue({
 el:'#box',
 components:{
 'my-aaa':{
 data(){
 return {
 msg:'welcome vue'
 methods:{
 change(){
 this.msg='changed';
 template:'#aaa'
 /script 
 /body 
 /html 

方法二:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script src="vue/2.4.4/vue.min.js" /script 
 style 
 /style 
 /head 
 body 
 div id="box" 
 my-aaa /my-aaa 
 /div 
 template id="aaa" 
 h1 @click="change" {{msg}} /h1 
 li v-for="val in arr" 
 {{val}}
 /li 
 /ul 
 /template 
 script 
 var vm=new Vue({
 el:'#box',
 components:{
 'my-aaa':{
 data(){
 return {
 msg:'welcome vue',
 arr:['apple','banana','orange']
 methods:{
 change(){
 this.msg='changed title';
 template:'#aaa'
 /script 
 /body 
 /html 

三、动态组件

动态组件:

 component :is="组件名称" /component 

title Document /title script src="vue/2.4.4/vue.min.js" /script style /style /head body div id="box" input type="button" @click="a='aaa'" value="aaa组件" input type="button" @click="a='bbb'" value="bbb组件" component :is="a" /component !-- component :is="组件名称" /component -- /div script var vm=new Vue({ el:'#box', data:{ a:'aaa' components:{ 'aaa':{ template:' h2 我是aaa组件 /h2 ' 'bbb':{ template:' h2 我是bbb组件 /h2 ' /script /body /html

运行效果:

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

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