欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-27 21:07:22
具体代码如下所示:

具体代码如下所示:

<!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、组件模版、动态组件 的实例代码,希望对大家有所帮助