new Vue({
  el: "#example-3",
  data: {
    checkedNames: []
  }
})
//Checked names: [ "Jack", "John", "Mike" ]

單選按鈕

  
  One
  

  
  Two
  

  Picked: {{ picked }}

new Vue({
  el: "#example-4",
  data: {
    picked: ""
  }
})
//Picked: Two

選擇框

  
    請選擇
    A
    B
    C
  
  Selected: {{ selected }}

new Vue({
  el: "...",
  data: {
    selected: ""
  }
})
//Selected: B

為多選時則返回一個數組Selected: [ "A", "B" ]

復選框

單選按鈕

選擇框的選項

    
  123

.lazy，默認input事件觸發，使用此修飾則改為change事件觸發

.number將輸入的值轉換為數值

.trim過濾掉輸入內容的首尾空白字符

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。組件是具有特殊功能的自定義元素。

所有的 Vue 組件同時也都是 Vue 的實例，所以可接受相同的選項對象 (除了一些根級特有的選項) 并提供相同的生命周期鉤子。

  

//注意確保在初始化根實例之前注冊組件
// 注冊
Vue.component("my-component", {
  template: "
A custom component!
"
})

var Child = {
  template: "
A custom component!
"
}

new Vue({
  // ...
  components: {
    //  將只在父組件模板中可用
    "my-component": Child
  }
})

webpack 的 vue cli3+

import Vue from "vue"
import upperFirst from "lodash/upperFirst"
import camelCase from "lodash/camelCase"

const requireComponent = require.context(
  // 其組件目錄的相對路徑
  "./components",
  // 是否查詢其子目錄
  false,
  // 匹配基礎組件文件名的正則表達式
  /Base[A-Z]w+.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName)

  // 獲取組件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剝去文件名開頭的 `"./` 和結尾的擴展名
      fileName.replace(/^./(.*).w+$/, "$1")
    )
  )

  // 全局注冊組件
  Vue.component(
    componentName,
    // 如果這個組件選項是通過 `export default` 導出的，
    // 那么就會優先使用 `.default`，
    // 否則回退到使用模塊的根。
    componentConfig.default || componentConfig
  )
})

注意

data必須是帶return的函數

如果將組件用于像

、
、、 這樣的元素里面，為了遵循規范，應該使用is：

以下類型模板無此限制：

Prop

父組件向子組件傳遞數據。

Vue.component("child", {
  // 聲明 props
  props: ["message"],
  // 就像 data 一樣，prop 也可以在模板中使用
  // 同樣也可以在 vm 實例中通過 this.message 來使用
  template: "{{ message }}"
})

動態 Prop:

如果你想把一個對象的所有屬性作為 prop 進行傳遞，可以使用不帶任何參數的 v-bind

todo: {
  text: "Learn Vue",
  isComplete: false
}

//等價于

字面量語法 vs 動態語法

驗證

為組件的 prop 指定驗證規則，會在組件實例創建之前進行校驗。如果傳入的數據不符合要求，Vue 會發出警告。

Vue.component("example", {
  props: {
    // 基礎類型檢測 (`null` 指允許任何類型)
    propA: Number,
    // 可能是多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數值且有默認值
    propD: {
      type: Number,
      default: 100
    },
    // 數組/對象的默認值應當由一個工廠函數返回
    propE: {
      type: Object,
      default: function () {
        return { message: "hello" }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生構造器：String、Number、Boolean、Function、Object、Array、Symbol

組件可以接收任意傳入的特性，這些特性都會被添加到組件的根元素上，且會做合并處理。

自定義事件

子組件向父組件傳遞數據。

使用 $on(eventName) 監聽事件

使用 $emit(eventName) 觸發事件

  
{{ total }}
  
  

Vue.component("button-counter", {
  template: "{{ counter }}",
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit("increment")
    }
  },
})

new Vue({
  el: "#counter-event-example",
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

父子雙向通信

.sync

@update的語法糖

this.$emit("update:foo", newValue)

等價于

this.$emit("update:foo", newValue)

v-model(僅適用于表單輸入組件)

v-on:input和v-bind:value的語法糖

// 通過 input 事件帶出數值
this.$emit("input", Number(formattedValue))

等價于

this.$emit("input", Number(formattedValue))

非父子組件通信

簡單場景bus.js

var bus = new Vue()
// 觸發組件 A 中的事件
bus.$emit("id-selected", 1)
// 在組件 B 創建的鉤子中監聽事件
bus.$on("id-selected", function (id) {
  // ...
})

注： 還可以使用$ref、$parent、$child進行通信，不過不推薦。

復雜的場景請使用vuex

插槽

為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱為內容分發。
編譯作用域： 父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。

單個插槽

除非子組件模板包含至少一個 插口，否則父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標簽本身。

最初在 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

  
我是子組件的標題
  
    只有在沒有要分發的內容時才會顯示。
  




  
我是父組件的標題
  
    
這是一些初始內容
    
這是更多的初始內容
  




  
我是父組件的標題
  

    
我是子組件的標題
    
這是一些初始內容
    
這是更多的初始內容
  

具名插槽

元素可以用一個特殊的特性 name 來進一步配置如何分發內容。多個插槽可以有不同的名字。具名插槽將匹配內容片段中有對應 slot 特性的元素。

仍然可以有一個匿名插槽，它是默認插槽，作為找不到匹配的內容片段的備用插槽。如果沒有默認插槽，這些找不到匹配的內容片段將被拋棄。

  

    
  
  

    
  
  




  
這里可能是一個頁面標題

  
主要內容的一個段落。
  
另一個主要段落。

  
這里有一些聯系信息




  

    
這里可能是一個頁面標題
  
  

    
主要內容的一個段落。
    
另一個主要段落。
  
  

作用域插槽

和普通的插槽對比，能夠傳遞數據。

  




  
  
    
  




  

    hello from parent
    hello from child
  

動態組件

通過使用保留的 元素，并對其 is 特性進行動態綁定，你可以在同一個掛載點動態切換多個組件：

var vm = new Vue({
  el: "#example",
  data: {
    currentView: "home"
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

keep-alive

把切換出去的組件保留在內存中,保留其狀態或避免重新渲染

注意事項

組件復用性，松耦合

謹慎使用ref

在大型應用中使用異步加載

PascalCase聲明， kebab-case使用

為遞歸組件添加name

對低開銷的靜態組件使用 v-once

11.過渡和動畫

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

單元素/組件的過渡

適用場景：條件渲染 (使用 v-if)、條件展示 (使用 v-show)、動態組件、組件根節點

  
    Toggle
  
  
    
hello
  

new Vue({
  el: "#demo",
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

過渡的類名

v-enter：定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

v-enter-active：定義過渡的狀態。在元素整個過渡過程中作用，在元素被插入時生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀后生效 (與此同時 v-enter 被刪除)，在 transition/animation 完成之后移除。

v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

v-leave-active：定義過渡的狀態。在元素整個過渡過程中作用，在離開過渡被觸發后立即生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀后生效 (與此同時 v-leave 被刪除)，在 transition/animation 完成之后移除。

動畫

動畫在css中使用animation即可，其他和過渡類似。

自定義過渡的類名

我們可以通過以下特性來自定義過渡類名：
enter-class、enter-active-class、enter-to-class (2.1.8+)、leave-class、leave-active-class、leave-to-class (2.1.8+)

  
    Toggle render
  
  
    
hello
  

設定持續時間

...
...

JavaScript 鉤子

// ...
methods: {
  // --------
  // 進入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置，done 是必須的 
  // 與 CSS 結合時使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 離開時
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置，done 是必須的 
  // 與 CSS 結合時使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

初始渲染的過渡

可以通過 appear 特性設置節點在初始渲染的過渡

多個元素的過渡

當有相同標簽名的元素切換時，建議給元素設置key。

過渡模式

in-out：新元素先進行過渡，完成之后當前元素過渡離開。

out-in：當前元素先進行過渡，完成之后新元素過渡進入。

多個組件的過渡

多個組件的過渡使用動態組件

  


new Vue({
  el: "#transition-components-demo",
  data: {
    view: "v-a"
  },
  components: {
    "v-a": {
      template: "
Component A
"
    },
    "v-b": {
      template: "
Component B
"
    }
  }
})

列表過渡

使用 組件。

它會以一個真實元素呈現：默認為一個 。你也可以通過 tag 特性更換為其他元素。

內部元素 總是需要 提供唯一的 key 屬性值

  Add
  Remove
  
    
      {{ item }}
    
  

組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。v-move 特性，它會在元素的改變定位的過程中應用。

    

      {{ item }}
    


.flip-list-move {
  transition: transform 1s;
}

也可以通過 move-class 屬性手動設置

技巧

創建可復用過度組件，將 或者 作為根組件

動態過渡，通過動態綁定name實現

12.可復用性和組合 混合

混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。當組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

// 定義一個混合對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log("hello from mixin!")
    }
  }
}

// 定義一個使用混合對象的組件
var Component = Vue.extend({
  mixins: [myMixin]
})

當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合。比如，同名鉤子函數將混合為一個數組，因此都將被調用。另外，混合對象的 鉤子將在組件自身鉤子 之前 調用 。

值為對象的選項，例如 methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

Vue.extend() 也使用同樣的策略進行合并。

自定義指令

除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。

// 注冊一個全局自定義指令 `v-focus`
Vue.directive("focus", {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 注冊一個局部自定義指令
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}
//使用

鉤子函數

一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：

bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。

unbind：只調用一次，指令與元素解綁時調用。

鉤子函數參數

指令鉤子函數會被傳入以下參數：

el：指令所綁定的元素，可以用來直接操作 DOM 。

binding：一個對象，包含以下屬性：

name：指令名，不包括 v- 前綴。

value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。

oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。

arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。

modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。

oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

渲染函數 & JSX

https://cn.vuejs.org/v2/guide...

渲染函數render createElement

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個 HTML 標簽字符串，組件選項對象，或者
  // 解析上述任何一種的一個 async 異步函數，必要參數。
  "div",

  // {Object}
  // 一個包含模板相關屬性的數據對象
  // 這樣，您可以在 template 中使用這些屬性。可選參數。
  {
    // (詳情見下面的數據對象)
  },

  // {String | Array}
  // 子節點 (VNodes)，由 `createElement()` 構建而成，
  // 或使用字符串來生成“文本節點”。可選參數。
  [
    "先寫一些文字",
    createElement("h1", "一則頭條"),
    createElement(MyComponent, {
      props: {
        someProp: "foobar"
      }
    })
  ]
)

數據對象:

{
  // 和`v-bind:class`一樣的 API
  "class": {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一樣的 API
  style: {
    color: "red",
    fontSize: "14px"
  },
  // 正常的 HTML 特性
  attrs: {
    id: "foo"
  },
  // 組件 props
  props: {
    myProp: "bar"
  },
  // DOM 屬性
  domProps: {
    innerHTML: "baz"
  },
  // 事件監聽器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修飾器
  // 需要手動匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅對于組件，用于監聽原生事件，而不是組件內部使用
  // `vm.$emit` 觸發的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
  // 賦值，因為 Vue 已經自動為你進行了同步。
  directives: [
    {
      name: "my-custom-directive",
      value: "2",
      expression: "1 + 1",
      arg: "foo",
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array }
  scopedSlots: {
    default: props => createElement("span", props.text)
  },
  // 如果組件是其他組件的子組件，需為插槽指定名稱
  slot: "name-of-slot",
  // 其他特殊頂層屬性
  key: "myKey",
  ref: "myRef"
}

過濾器

過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。

{{ message | capitalize }}

//定義局部過濾器
filters: {
  capitalize: function (value) {
    if (!value) return ""
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
//定義全局過濾器
Vue.filter("capitalize", function (value) {
  if (!value) return ""
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器可以串聯，依次執行，前面的輸出作為后面一個的輸入。

{{ message | filterA | filterB }}

過濾器可以接收參數（管道符前面的值作為第一個參數，括號內的第一個參數為第二個，依次類推）

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

13.Vue-Router 安裝

直接用

閱讀需要支付1元查看
支付并查看