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

vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

Posted in Javascript onApril 04, 2019

具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
  </div>
  <script>
    var Aaa=Vue.extend({//继承出来一个Vue类Aaa
      template:'<h3>我是标题3</h3>'
    });
    var a=new Aaa();//a跟vm一样
    console.log(a);
    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="bower_components/vue/dist/vue.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);//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="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>

  <script>
    var Aaa=Vue.extend({
      data(){
        return {
          msg:'我是标题^^'
        };
      },
      template:'<h3>{{msg}}</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="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>

  <script>
    var Aaa=Vue.extend({
      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>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>

  <script>
    var Aaa=Vue.extend({
      template:'<h3>{{msg}}</h3>',
      data(){// es6语法，函数不写：，组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json)
        return {
          msg:'ddddd'
        }
      }
    });


    var vm=new Vue({
      el:'#box',
      data:{
        bSign:true
      },
      components:{ //局部组件，放到某个组件内部，Vue.component('aaa',Aaa);
        aaa:Aaa
      }
    });

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <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:{ //局部组件
        'my-aaa':Aaa
      }
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.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="bower_components/vue/dist/vue.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>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <my-aaa></my-aaa>
  </div>

  <template id="aaa">
    <h1>标题1</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';
            }
          },
          template:'#aaa'
        }
      }
    });

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.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>动态组件</title>
  <script src="bower_components/vue/dist/vue.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> <!-- 动态组件-->
  </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 component动态组件

 动态组件

通过component标签 的is属性来进行组件的切换

is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化

<template>
  <div class="app">
      <component :is="组件名称">
 
      </component>
  </div>
</template>

总结

以上所述是小编给大家介绍的vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

- Author -

672530440

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

Javascript 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 #Javascript
Vue传参一箩筐(页面、组件)
Apr 04 #Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 #Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 #Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 #Javascript
详解JavaScript的变量
Apr 04 #Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 #Javascript
hmac(1) 相对路径 (1) 解密(1) 面向对象(3) requests(1) hashlib(1) logging(1) 相对路径(1) 加密(1) openpyxl(1)
You might like
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
js树形控件脚本代码
2008/07/24 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
微信小程序教程系列之设置标题栏和导航栏（7）
2020/06/29 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
python 读写、创建 文件的方法(必看)
2016/09/12 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python 定时修改数据库的示例代码
2018/04/08 Python
python 拼接文件路径的方法
2018/10/23 Python
浅析Django中关于session的使用
2019/12/30 Python
keras中的backend.clip用法
2020/05/22 Python
基于python实现操作redis及消息队列
2020/08/27 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
Eyeko美国：屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
台湾母婴用品限时团购：妈咪爱
2018/08/03 全球购物
Skyscanner新西兰：全球领先的旅游搜索网站
2019/08/26 全球购物
英文简历自荐信范文
2013/12/11 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
圣诞晚会主持词
2015/07/01 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
如何优化vue打包文件过大
2022/04/13 Vue.js