vue-組件

組件

組件的建立方式

第一種

<div id="app">
    <!-- 若是要使用組件，直接，把組件的名稱，以 HTML 標籤的形式，引入到頁面中，便可 -->
    <mycom1></mycom1>
  </div>

// 1.1 使用 Vue.extend 來建立全局的Vue組件
    // var com1 = Vue.extend({
    //   template: '<h3>這是使用 Vue.extend 建立的組件</h3>' // 經過 template 屬性，指定了組件要展現的HTML結構
    // })
    // 1.2 使用 Vue.component('組件的名稱', 建立出來的組件模板對象)
    // Vue.component('myCom1', com1)
    // 若是使用 Vue.component 定義全局組件的時候，組件名稱使用了 駝峯命名，則在引用組件的時候，須要把 大寫的駝峯改成小寫的字母，同時，兩個單詞以前，使用 - 連接；
    // 若是不使用駝峯,則直接拿名稱來使用便可;
    // Vue.component('mycom1', com1)

    // Vue.component 第一個參數:組件的名稱,未來在引用組件的時候,就是一個 標籤形式 來引入 它的
    // 第二個參數: Vue.extend 建立的組件  ,其中 template 就是組件未來要展現的HTML內容
    Vue.component('mycom1', Vue.extend({
      template: '<h3>這是使用 Vue.extend 建立的組件</h3>'
    }))


    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

第二種

<div id="app">
    <!-- 仍是使用 標籤形式,引入本身的組件 -->
    <mycom2></mycom2>
  </div>

// 注意:不管是哪一種方式建立出來的組件,組件的 template 屬性指向的模板內容,必須有且只能有惟一的一個根元素
    Vue.component('mycom2', {
      template: '<div><h3>這是直接使用 Vue.component 建立出來的組件</h3><span>123</span></div>'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

第三種

<div id="app">
    <mycom3></mycom3>
    <!-- <login></login> -->
  </div>


  <div id="app2">
    <mycom3></mycom3>
    <login></login>
  </div>

  <!-- 在 被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結構  -->
  <template id="tmpl">
    <div>
      <h1>這是經過 template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1>
      <h4>好用,不錯!</h4>
    </div>
  </template>

  <template id="tmpl2">
    <h1>這是私有的 login 組件</h1>
  </template>

Vue.component('mycom3', {
      template: '#tmpl'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });


    var vm2 = new Vue({
      el: '#app2',
      data: {},
      methods: {},
      filters: {},
      directives: {},
      components: { // 定義實例內部私有組件的
        login: {
          template: '#tmpl2'
        }
      },

      beforeCreate() { },
      created() { },
      beforeMount() { },
      mounted() { },
      beforeUpdate() { },
      updated() { },
      beforeDestroy() { },
      destroyed() { }
    })

組件中的data和method

<div id="app">
    <mycom1></mycom1>
  </div>

// 1. 組件能夠有本身的 data 數據
    // 2. 組件的 data 和 實例的 data 有點不同,實例中的 data 能夠爲一個對象,可是 組件中的 data 必須是一個方法
    // 3. 組件中的 data 除了必須爲一個方法以外,這個方法內部,還必須返回一個對象才行;
    // 4. 組件中 的data 數據,使用方式,和實例中的 data 使用方式徹底同樣!!!
    Vue.component('mycom1', {
      template: '<h1>這是全局組件 --- {{msg}}</h1>',
      data: function () {
        return {
          msg: '這是組件的中data定義的數據'
        }
      }
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

一個計數器

<div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>


  <template id="tmpl">
    <div>
      <input type="button" value="+1" @click="increment">
      <h3>{{count}}</h3>
    </div>
  </template>

var dataObj = { count: 0 }

    // 這是一個計數器的組件, 身上有個按鈕,每當點擊按鈕,讓 data 中的 count 值 +1
    Vue.component('counter', {
      template: '#tmpl',
      data: function () {
        // return dataObj
        return { count: 0 }
      },
      methods: {
        increment() {
          this.count++
        }
      }
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

組件切換

方式一

<div id="app">
    <a href="" @click.prevent="flag=true">登陸</a>
    <a href="" @click.prevent="flag=false">註冊</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

  </div>

Vue.component('login', {
      template: '<h3>登陸組件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊組件</h3>'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });

方式二

<div id="app">
    <a href="" @click.prevent="comName='login'">登陸</a>
    <a href="" @click.prevent="comName='register'">註冊</a>

    <!-- Vue提供了 component ,來展現對應名稱的組件 -->
    <!-- component 是一個佔位符, :is 屬性,能夠用來指定要展現的組件的名稱 -->
    <component :is="comName"></component>

    <!-- 總結:當前學習了幾個 Vue 提供的標籤了??? -->
    <!-- component,  template,  transition,  transitionGroup  -->

  </div>

// 組件名稱是 字符串
    Vue.component('login', {
      template: '<h3>登陸組件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊組件</h3>'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
      },
      methods: {}
    });

動畫切換

.v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }

<div id="app">
    <a href="" @click.prevent="comName='login'">登陸</a>
    <a href="" @click.prevent="comName='register'">註冊</a>

    <!-- 經過 mode 屬性,設置組件切換時候的 模式 -->
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  </div>

// 組件名稱是 字符串
    Vue.component('login', {
      template: '<h3>登陸組件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊組件</h3>'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
      },
      methods: {}
    });