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中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
vue中template的三种写法示例
Oct 21 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程序中防止盗链
2008/04/09 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python实现闹钟定时播放音乐功能
2018/01/25 Python
python表格存取的方法
2018/03/07 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
一些Solaris面试题
2015/12/22 面试题
信息总监管理职责范本
2014/03/08 职场文书
租赁协议书范本
2014/04/22 职场文书
工作证明英文模板
2014/10/21 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
python urllib库的使用详解
2021/04/13 Python
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang