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程序设计有所帮助。

Javascript 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
微信小程序入门教程
Nov 18 Javascript
javascript编写简易计算器
May 06 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
You might like
PHP新手上路(九)
2006/10/09 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
thinkphp分页集成实例
2017/07/24 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python实现猜数游戏
2020/03/27 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
为什么需要版本控制
2016/10/28 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
租房协议书
2014/04/10 职场文书
创先争优一句话承诺
2014/05/29 职场文书
销售竞赛活动方案
2014/08/23 职场文书
自我工作评价范文
2015/03/06 职场文书
数学教师求职信范文
2015/03/20 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python