首页
所有分类
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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
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
OVERLORD(1) mysql(6) 字符集(1) Vscode(3) data(4) SSH(3) 2022年7月新番(1) 神经网络(7) character(1) 数据表(1)
You might like
第八节--访问方式
2006/11/16 PHP
php 引用(&amp;)详解
2009/11/20 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
微信小程序视图容器（swiper）组件创建轮播图
2020/06/19 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
JS实现滑动导航效果
2020/01/14 Javascript
基于python if 判断选择结构的实例详解
2019/05/06 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
PyQt5 多窗口连接实例
2019/06/19 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python绘制动态曲线教程
2020/02/24 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
新加坡网上花店：FlowerAdvisor新加坡
2018/10/05 全球购物
马歇尔耳机官网：Marshall Headphones
2020/02/04 全球购物
思想汇报范文
2013/11/04 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
红色故事演讲稿
2014/05/22 职场文书
2014年底个人工作总结
2015/03/10 职场文书
死亡诗社观后感
2015/06/05 职场文书
2016春季小学开学寄语
2015/12/03 职场文书