vue初步学习，零散记录

针对vue中控件的用法

首先   初步用法

 动态切换不同的组件

在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；

 改变挂载的组件，只需要修改is指令的值即可

//常规使用方式
<div id="app">  <button @click="toshow">点击让子组件显示</button>  <component v-bind:is="which_to_show"></component> </div> <script>  var vm = new Vue({   el: '#app',   data: {    which_to_show: "first"   },   methods: {    toshow: function () { //切换组件显示     var arr = ["first", "second", "third", ""];     var index = arr.indexOf(this.which_to_show);     if (index < 3) {      this.which_to_show = arr[index + 1];     } else {      this.which_to_show = arr[0];     }    }   },   components: {    first: { //第一个子组件     template: "<div>这里是子组件1</div>"    },    second: { //第二个子组件     template: "<div>这里是子组件2</div>"    },    third: { //第三个子组件     template: "<div>这里是子组件3</div>"    },   }  }); </script> 

 //曾使用过的方法 

<button-control ref="buttonControl" @childDel="showDelTopicPop(index)" v-if="teachingType === 1" :tag="0" :currentIndex="index" :prepareLessonId="prepareLessonId" :topicList="topicList"></button-control>

 <component :is="topic.templateCodeTemp" :detailFilePath="topic.detailFilePath" :tag="1"></component>

 components:{
 noData,
 'passagereading':PassageReading,//根据不同的templateCodeTemp进行匹配不同的组件

 'situationalvideopresentation':SituationalVideoPresentation,
 commonPop
 },

原标题：vue初步学习，零散记录

关键词：VUE