首页
所有分类
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 相关文章推荐
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 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
人工智能(2) Pyecharts(7) format(1) 对齐打印(1) PyTorch(1) 计算器(5) 图像处理(1) 模型保存加载(1) 五子棋(12) 井字棋(1)
You might like
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
使用JS批量选中功能实现更改数据库中的status状态值（批量展示）
2016/11/22 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python实现换位加密算法的示例
2018/10/14 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
美体小铺加拿大官方网站：The Body Shop加拿大
2016/10/30 全球购物
C语言面试题
2013/05/19 面试题
大学生入党自我鉴定
2013/10/31 职场文书
教师岗位职责范本
2013/12/29 职场文书
《童年》教学反思
2014/02/18 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers