zoukankan      html  css  js  c++  java
  • vue 组件

    1、全局组件

    <div id="box">

    <aaa></aaa>

    </div>

    var Aaaa=Vue.extend({

    template:"<h3>我是h3</h3>"

    });

    Vue.component('aaa',Aaa);

    注:数据,组件里的数据必须是data:function(){}且必须是return一个对象

    2

    Vue.component({

    template:"<h3>我是h3</h3>",

    data:function{

      return {

      };

    }

    })

    3局部组件:放到某个组件内部

    <div id=‘box’>

       <aaa></aaa>

    </div>

    var Aaa=Vue.extend({

        template:'<h3>这是h3</h3>',

    });

    var vm=new Vue({

    el:"#box",

    components:{

    ’aaa’:Aaa//局部组件注意:'aaa'多个字符比如my-aa时必须添加单引号‘my-aa’

    }

    });

    动态组件

    <div id=‘box’>

       <button value="aaa" v-on:click="a='aaa'" ></button>

      <button value="bbb" v-on:click="a='bbb'" ></button>

    <component v-bind:is="a"></component>

    </div>

    var vm=new Vue({

    el:"#box",

    components:{

      'aaa':{

      template:'<h3>这是aaa组件</h3>',

      },

      'bbb':{

      template:'<h3>这是bbb组件</h3>',

      }

    }

    });

  • 相关阅读:
    利用pyautogui自动化领取dnf的在线养竹活动的竹子
    idea2019.3版本的安装
    二叉树文本分析
    表达式树的创建
    24点游戏
    二叉树
    队列操作
    HuffmanTree
    两数之和
    面向对象Python
  • 原文地址:https://www.cnblogs.com/Ting-log/p/9129876.html
Copyright © 2011-2022 走看看