vue2 記錄（高階）

advance

1 component

字母全小寫且必須包含一個連字元 

kebab-case (短橫線分隔命名) 

Vue.component('my-component-name', { })

使用 PascalCase

Vue.component('MyComponentName', { })

2  全局注冊

Vue.component 來建立元件 即全局注冊

Vue.component('my-component-name', {

  // ... 選項 ...

})

3  局部注冊

可以通過一個普通的 JavaScript 對象來定義元件

var ComponentA = { }

var ComponentB = { }

var ComponentC = { }

然後在 components 選項中定義你想要使用的元件

new Vue({

  el: '#app',

  components: {

    'component-a': ComponentA,

    'component-b': ComponentB

  }

})

4 子產品系統中局部注冊

推薦建立一個 components 目錄，并将每個元件放置在其各自的檔案中

然後你需要在局部注冊之前導入每個你想使用的元件。例如，在一個假設的 ComponentB.js 或 ComponentB.vue 檔案中：

import ComponentA from './ComponentA'

import ComponentC from './ComponentC'

export default {

  components: {

    ComponentA,

    ComponentC

  },

  // ...

}

現在 ComponentA 和 ComponentC 都可以在 ComponentB 的模闆中使用了

5  基礎元件的自動化全局注冊

6

非 Prop 的特性  [未走通]

7

自定義事件 

    事件名稱 區分大小寫，要完全比對

    我們知道父元件是使用props傳遞資料給子元件，如果子元件要把資料傳遞回去，怎麼辦？ 

    那就是要自定義事件！使用v-on綁定自定義事件 每個Vue執行個體都實作了事件接口（Events interface）, 

    即 使用$on(eventName) 監聽事件 $emit(eventName) 觸發事件

8 slot

        1.1 單個插槽（單個插槽，别名預設插槽、匿名插槽，不用設定name屬性）

        1.2 具名slot（插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個元件中出現N次，出現在不同的位置）

        1.3 作用域slot

        https://www.cnblogs.com/cisum/p/9618346.html    

9

  件執行個體能夠被在它們第一次被建立的時候緩存下來。為了解決這個問題，我們可以用一個 <keep-alive> 元素将其動态元件包裹起來。

          <!-- 失活的元件将會被緩存！-->

        <keep-alive>

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

        </keep-alive>

10

通路根執行個體

在每個 new Vue 執行個體的子元件中，其根執行個體可以通過 $root 屬性進行通路    

this.$root.baz()

11  

通路父級元件執行個體

$parent    

12 

通路子元件執行個體或子元素

        ref 特性為這個子元件賦予一個 ID 引用

        <base-input ref="usernameInput"></base-input>

        this.$refs.usernameInput

13  依賴注入  

        provide 選項允許我們指定我們想要提供給後代元件的資料/方法

        provide: function () {

          return {

            getMap: this.getMap

          }

        }

        然後在任何後代元件裡，我們都可以使用 inject 選項來接收指定的我們想要添加在這個執行個體上的屬性

        inject: ['getMap']

        實際上，你可以把依賴注入看作一部分“大範圍有效的 prop”，除了：

        祖先元件不需要知道哪些後代元件使用它提供的屬性

        後代元件不需要知道被注入的屬性來自哪裡        

14 序列化偵聽

        現在，你已經知道了 $emit 的用法，它可以被 v-on 偵聽，但是 Vue 執行個體同時在其事件接口中提供了其它的方法。我們可以：

        通過 $on(eventName, eventHandler) 偵聽一個事件

        通過 $once(eventName, eventHandler) 一次性偵聽一個事件

        通過 $off(eventName, eventHandler) 停止偵聽一個事件

        例 ：

            mounted: function () {

              this.attachDatepicker('startDateInput')

              this.attachDatepicker('endDateInput')

            },

            methods: {

              attachDatepicker: function (refName) {

                var picker = new Pikaday({

                  field: this.$refs[refName],

                  format: 'YYYY-MM-DD'

                })

                this.$once('hook:beforeDestroy', function () {

                  picker.destroy()

                })

              }

            }

15 元件之間的循環引用 

        <tree-folder> 元件，模闆是這樣的：

        <p>

          <span>{{ folder.name }}</span>

          <tree-folder-contents :children="folder.children"/>

        </p>        

        還有一個 <tree-folder-contents> 元件，模闆是這樣的：

        <ul>

          <li v-for="child in children">

            <tree-folder v-if="child.children" :folder="child"/>

            <span v-else>{{ child.name }}</span>

          </li>

        </ul>

        元件引入：

        beforeCreate: function () {

          this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default

        }

        或者

        components: {

          TreeFolderContents: () => import('./tree-folder-contents.vue')

        }

16

内聯模闆  類似于<template>标簽

當 inline-template 這個特殊的特性出現在一個子元件上時，這個元件将會使用其裡面的内容作為模闆，而不是将其作為被分發的内容

<my-component inline-template>

  <div>

    <p>These are compiled as the component's own template.</p>

    <p>Not parent's transclusion content.</p>

  </div>

</my-component>

17 X-Templates

另一個定義模闆的方式是在一個 <script> 元素中，并為其帶上 text/x-template 的類型，然後通過一個 id 将模闆引用過去    

            <script type="text/x-template" id="hello-world-template">

              <p>Hello hello hello</p>

            </script>

            Vue.component('hello-world', {

              template: '#hello-world-template'

            })

18 通過 v-once 建立低開銷的靜态元件

        Vue.component('terms-of-service', {

      template: `

        <div v-once>

          <h1>Terms of Service</h1>

          ... a lot of static content ...

        </div>

      `

    })

19 進入離開清單過渡

在 CSS 過渡和動畫中自動應用 class

可以配合使用第三方 CSS 動畫庫，如 Animate.css

在過渡鈎子函數中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js     

可以在屬性中聲明 JavaScript 鈎子

        <transition

          v-on:before-enter="beforeEnter"

          v-on:enter="enter"

          v-on:after-enter="afterEnter"

          v-on:enter-cancelled="enterCancelled"

          v-on:before-leave="beforeLeave"

          v-on:leave="leave"

          v-on:after-leave="afterLeave"

          v-on:leave-cancelled="leaveCancelled"

        >

          <!-- ... -->

        </transition>

20 混入        

混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入對象可以包含任意元件選項。

當元件使用混入對象時，所有混入對象的選項将被混入該元件本身的選項。

21  this.$options 可以拿到元件對象 

22 自定義指令    [*****]

https://cn.vuejs.org/v2/guide/custom-directive.html

    // 注冊一個全局自定義指令 `v-focus`

    Vue.directive('focus', {

      // 當被綁定的元素插入到 DOM 中時……

      inserted: function (el) {

        // 聚焦元素

        el.focus()

      }

    })

    注冊局部指令，元件中也接受一個 directives 的選項：

    directives: {

      focus: {

        // 指令的定義

        inserted: function (el) {

          el.focus()

        }

      }

    }

    <input v-focus />

    指令鈎子函數  用directive指令生成  

    如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法的 JavaScript 表達式。

23 render 函數可以做JavaScript級别的頁面渲染

24  渲染函數和    JSX 

25  使用插件    

通過全局方法 Vue.use() 使用插件。它需要在你調用 new Vue() 啟動應用之前完成 

    而在例如 CommonJS 的子產品環境中，你應該始終顯式地調用 Vue.use()

    // 用 Browserify 或 webpack 提供的 CommonJS 子產品環境時

    var Vue = require('vue')

    var VueRouter = require('vue-router')

    // 不要忘了調用此方法

    Vue.use(VueRouter)

26  開發插件     

27 過濾器

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化

雙花括号插值和 v-bind 表達式 (後者從 2.1.0+ 開始支援)。

過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符号訓示,例：

        <!-- 在雙花括号中 -->

        {{ message | capitalize }}

        {{ message | filterA | filterB }}

        {{ message | filterA('arg1', arg2) }}

        <!-- 在 `v-bind` 中 -->

        <div v-bind:id="rawId | formatId"></div>

  或者

  你可以在一個元件的選項中定義本地的過濾器：

    filters: {

      capitalize: function (value) {

        if (!value) return ''

        value = value.toString()

        return value.charAt(0).toUpperCase() + value.slice(1)

      }

    }

  或者在建立 Vue 執行個體之前全局定義過濾器：

    Vue.filter('capitalize', function (value) {

      if (!value) return ''

      value = value.toString()

      return value.charAt(0).toUpperCase() + value.slice(1)

    })

    new Vue({

      // ...

    })  

28        單檔案元件

檔案擴充名為 .vue 的 single-file components(單檔案元件) 

為以上所有問題提供了解決方法，并且還可以使用 webpack 或 Browserify 等建構工具。

29 TypeScript  支援 

30 狀态管理  vuex   達成子元件之間的通訊

如何引入Vuex?

下載下傳vuex: npm install vuex --save

在main.js添加:  

             import Vuex from 'vuex'

            Vue.use( Vuex );

            const store = new Vuex.Store({

                //待添加

            })

            new Vue({

                el: '#app',

                store,

                render: h => h(App)

            })

state：用來存放元件之間共享的資料。他跟元件的data選項類似，隻不過data選項是用來存放元件的私有資料。

可以把getters看成是store的計算屬性

mutations： 那如何把資料存儲到state中呢？

在 Vuex store 中，實際改變 狀态(state) 的唯一方式是通過 送出(commit) 一個 mutation,  

例如：this.$store.commit('change',10)  ，觸發mutations中方法change 做改變。

　actions和mutations的差別

1.Actions 送出的是 mutations，而不是直接變更狀态。也就是說，actions會通過mutations，讓mutations幫他送出資料的變更。

2.Action 可以包含任意異步操作。ajax、setTimeout、setInterval不在話下