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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
javascript 写类方式之九
Jul 05 Javascript
js使用递归解析xml
Dec 12 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
vue解决跨域问题(推荐)
Nov 10 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
详细谈谈JavaScript中循环之间的差异
Aug 23 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实现以只读方式打开文件的方法
2015/03/16 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
Three.js基础部分学习
2017/01/08 Javascript
js读取本地文件的实例
2017/12/22 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
python转换摩斯密码示例
2014/02/16 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
在python中pandas的series合并方法
2018/11/12 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python设置表格边框的具体方法
2020/07/17 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
新年晚会主持词
2014/03/24 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python