脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue.extend component、组件模版、动态组件

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

 更新时间：2019年04月04日 11:19:33   作者：672530440  
这篇文章主要介绍了vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

具体代码如下所示：

<!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、组件模版、动态组件 的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • vue加载自定义的js文件方法

    vue加载自定义的js文件方法

    下面小编就为大家分享一篇vue加载自定义的js文件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Element el-upload上传组件使用详解

    Element el-upload上传组件使用详解

    本文主要介绍了Element el-upload上传组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vant-Dialog 弹出框的使用小结

    vant-Dialog 弹出框的使用小结

    这篇文章主要介绍了vant-Dialog 弹出框的使用小结,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • vue实现手机号码的校验实例代码（防抖函数的应用场景）

    vue实现手机号码的校验实例代码（防抖函数的应用场景）

    这篇文章主要给大家介绍了关于vue实现手机号码的校验的相关资料，主要是防抖函数的应用场景，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09
  • Vue3 中的 readonly 特性及函数使用详解

    Vue3 中的 readonly 特性及函数使用详解

    readonly是Vue3中提供的一个新特性，用于将一个响应式对象变成只读对象，这篇文章主要介绍了Vue3 中的 readonly 特性详解,需要的朋友可以参考下
    2023-04-04
  • vue属性props默认类型的写法介绍

    vue属性props默认类型的写法介绍

    这篇文章主要介绍了vue属性props默认类型的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue动态删除从数据库倒入列表的某一条方法

    vue动态删除从数据库倒入列表的某一条方法

    今天小编就为大家分享一篇vue动态删除从数据库倒入列表的某一条方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue组件name的作用小结

    vue组件name的作用小结

    大家在写vue项目的时候会遇到给组件的各种命名，接下来通过本文给大家分享vue组件name的作用小结，感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • vue中自定义右键菜单插件

    vue中自定义右键菜单插件

    这篇文章主要为大家详细介绍了vue中自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论