Component

依照官方文件所說，Component是vue.js中最強大的功能，它可以擴展html元素，還可以封裝reusable的程式碼

今天先簡單的介紹一下它的用法，這邊是使用Local Registration的方式來實作

html(pug)

#root
  h1 {{title}}
  h2 {{subtitle}}
  viwer

js

var viwer=Vue.component('viwer',{
  template: `
    <div>
      <button @click="view" > show datas</button>
      <button @click="hide" > hide datas</button>
      <ul>
        <li v-for="fruit in this.fruits"
             v-if="fruit.show" 
             v-bind:style="{color:fruit.color}"
        >{{fruit.fruit}}
        </li>
      </ul>
      
    </div>
        
  `,
  data() {
    return{
      fruits:[]
    }
  },
  methods:{
    view() {
      this.fruits = datas;
    },
    hide() {
      this.fruits = [];
    }
  },
});

var vm = new Vue({
  el: "#root",
  data: {
    title: "讓資料美美的#5",
    subtitle: "這次將介紹component",
  },
  
  components: {
    viwer,
  },

});

附上程式碼https://codepen.io/FanWay/pen/VymMvG