首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 19, 2019

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

一、定义一个组件

定义一个组件:

1. 全局组件

var Aaa=Vue.extend({
 template:'<h3>我是标题3</h3>'
});
Vue.component('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="https://cdn.bootcss.com/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>'
  });
  Vue.component('aaa',Aaa);
  var vm=new Vue({
   el:'#box',
   data:{
    bSign:true
   }
  });
 </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <style>
 </style>
</head>
<body>
 <div id="box">
  <my-aaa></my-aaa>
 </div>
 <script>

//另外一种写法，全局
  Vue.component('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="https://cdn.bootcss.com/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>'
  });
  Vue.component('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="https://cdn.bootcss.com/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="https://cdn.bootcss.com/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>
 <ul>
  <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="https://cdn.bootcss.com/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>
  <ul>
   <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="https://cdn.bootcss.com/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>
  <ul>
   <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>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/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>

运行效果：

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

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

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

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

- Author -

白杨-M

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
express.js中间件说明详解
Mar 19 #Javascript
js array数组对象操作方法汇总
Mar 18 #Javascript
浅析JavaScript异步代码优化
Mar 18 #Javascript
js实现图片局部放大效果详解
Mar 18 #Javascript
详解在React项目中安装并使用Less（用法总结）
Mar 18 #Javascript
vue动画效果实现方法示例
Mar 18 #Javascript
node.js实现微信开发之获取用户授权
Mar 18 #Javascript
计算机视觉(2) okenizer(1) 贪吃蛇(2) cvzone(1) 分词器(1) while(1) for(1) SnakeGame(1) mediapipe(1) 无限迭代(1)
You might like
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
PHP设计模式（八）装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
Javascript MD4
2006/12/20 Javascript
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
javascript Keycode对照表
2009/10/24 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
初识Node.js
2014/09/03 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
用Python shell简化开发
2018/08/08 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
介绍下static、final、abstract区别
2015/01/30 面试题
毕业自我鉴定
2013/11/05 职场文书
公司离职证明范本
2014/01/13 职场文书
基督教婚礼主持词
2014/03/14 职场文书
经销商订货会主持词
2014/03/27 职场文书
董事长秘书工作总结
2015/08/14 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Python 数据可视化之Bokeh详解
2021/11/02 Python