首页
所有分类
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的一些看法
May 27 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
详解Vue slot插槽
Nov 20 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
表约束(2) 百度地图(1) transaction(1) PyAutoGUI(1) Slave(1) 封装(1) variables(1) Master(1) 主从复制(1) gRPC(3)
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php删除指定目录的方法
2015/04/03 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
python zip文件 压缩
2008/12/24 Python
用Python的urllib库提交WEB表单
2009/02/24 Python
python socket 超时设置 errno 10054
2014/07/01 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python读取stdin方法实例
2019/05/24 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
英国时尚高尔夫服装购物网站：Trendy Golf
2020/01/10 全球购物
人力资源部经理的岗位职责
2014/03/04 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
大班上学期个人总结
2015/02/13 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android