vue2.0指不了南

零．混沌

vue是什麼

vue是一套構建用戶界面的漸進式框架。

他的特色：

1. 簡潔：頁面由HTML模板+Json數據+Vue實例組成

2. 數據驅動：自動計算屬性和追蹤依賴的模板表達式

3. 組件化：用可複用、解耦的組件來構造頁面

4. 輕量：代碼量小，不依賴其餘庫

5. 快速：精確有效批量DOM更新

6. 模板友好：多種方式安裝，很容易融入

---

所須要儲備的技術

1. 扎勢的html，css,JavaScript基礎知識 火狐中文社區 https://developer.mozilla.org...

2. es6相關知識 ECMAScript 6 入門 http://es6.ruanyifeng.com/#RE...

3. nodejs相關知識 npm 基本用法和實用技巧 https://github.com/theicebear...

4. webpack相關知識 webpack中文社區 https://doc.webpack-china.org/

5. 能夠簡單的使用命令終端

---

使用vue-cli 建立項目

---

1. node 環境安裝(更新到最新)

---

2. vue-cli 腳手架安裝

2.1 npm install vue-cli -g

---

3. 建立項目

3.1 vue init webpack 項目名稱

---

4. 進入該目錄

4.1 cd 項目名稱

---

5. 安裝依賴包

5.1 npm install（或者簡寫 i ）

---

6. 啓動項目

npm run dev

---

模板語法

數據綁定最多見的形式

1. 使用 「Mustache」 語法（雙大括號）的文本插值： {{msg}}

2. 使用 v-bind 在 HTML 屬性中使用: <div v-bind.id="msg"><div>

一．指令

1. 內置指令

1.1 v-text:更新元素的 textContent。

<span v-text="msg"></span> 等同於 <span>{{msg}}</span>

1.2 v-html:更新元素的 innerHTML。注意：內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯 。

<div v-html="msg"></div>

1.3 v-show:切換元素的 display CSS 屬性。

1.4 v-if:在切換時元素及它的數據綁定 / 組件被銷燬並重建。

1.5 v-else:配合v-if使用。

1.6 v-else-if:配合v-if使用

<div v-if></div>
    <div v-else-if></div>
    <div v-else-if></div>
    <div v-else></div>`

1.7 v-for：基於源數據屢次渲染元素或模板塊。

<div v-for="(val, key, index) in data"></div>

數組更新檢測的方法有

1. push()

2. pop()

3. shift()

4. unshift()

5. splice()

6. sort()

7. reverse()

   重塑數組方法

8. filter()

9. concat()

10. slice()

    注意事項

    因爲 JavaScript 的限制， Vue 不能檢測如下變更的數組：

11. 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue 解決辦法 Vue.set(example1.items, indexOfItem, newValue)

12. 當你修改數組的長度時，例如： vm.items.length = newLength 解決辦法example1.items.splice(newLength)

1.8 v-on：綁定事件監聽器。能夠簡寫爲：@

監聽當前實例上的自定義事件。事件能夠由vm.$emit觸發。回調函數會接收全部傳入事件觸發函數的額外參數。

vm.$on('test', function(msg) {
    console.log(msg)
})
vm.$emit('test', 'hi')

修飾符：

1. .stop - 調用 event.stopPropagation()

2. .prevent- 調用 event.preventDefault()。

3. .capture - 添加事件偵聽器時使用 capture 模式。

4. .self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。

5. .{keyCode | keyAlias} - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。

6. .native - 監聽組件根元素的原生事件。

1.9 v-bind：動態地綁定一個或多個特性，或一個組件 prop 到表達式。能夠簡寫爲：:

<!-- 綁定一個屬性 -->
<img v-bind:src="src">
<!-- 縮寫 -->
<img :src="src">

1.10 v-model：在表單控件或者組件上建立雙向綁定。

限制使用在

1. <input>

2. <select>

3. <textarea>

4. components

---

可以使用的修飾符

1. .lazy

2. .number

3. .trim

1.11 v-pre：跳過這個元素和它的子元素的編譯過程。

1.12 v-cloak：保持在元素上直到關聯實例結束編譯。

配合 CSS 規則使用 如 [v-cloak] { display: none }

1.13 v-once：只渲染元素和組件一次。

2. 自定義指令

2.1 全局自定義指令

Vue.directive('focus', {
    // 當綁定元素插入到 DOM 中。
    inserted: function(el) {
        // 聚焦元素
        el.focus()
    }
})

2.2 局部自定義指令

二．組件

組件是 可擴展 HTML 元素，封裝可重用的代碼。

1. 內置組件

1.1 component ：渲染一個「元組件」爲動態組件

1.2 transition ：單個元素/組件的過渡效果

1.3 transition-group ：多個元素/組件的過渡效果。

1.4 keep-alive ：包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。

1.5 slot：元素做爲組件模板之中的內容分發插槽。 <slot> 元素自身將被替換。

2.自定組件

注意： 要確保在初始化根實例 以前 註冊了組件

2.1 全局組件

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

2.2 局部組件

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 將只在父模板可用
    'my-component': Child
  }
})

2.3 DOM 模版解析說明

這些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出如今其它元素內部。

2.4 data 必須是函數

2.5 組件之間的通訊- 父傳子

組件實例的做用域是孤立的。

子組件要顯式地用 props 選項聲明它期待得到的數據：

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 同樣，prop 能夠用在模板內
  // 一樣也能夠在 vm 實例中像 「this.message」 這樣使用
  template: '<span>{{ message }}</span>'
})

向父組件傳入一個普通字符串：

<child message="hello!"></child>

當使用的不是字符串模版，camelCased (駝峯式) 命名的 prop 須要轉換爲相對應的 kebab-case (短橫線隔開式) 命名：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

若是你使用字符串模版，則沒有這些限制。

2.6 組件之間的通訊- 子傳父

使用 $on(eventName)監聽事件

使用 $emit(eventName) 觸發事件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

2.7 組件之間的通訊- 非父子

1. 簡單的場景下，可使用一個空的 Vue 實例做爲中央事件總線：

2. 複雜的狀況下，咱們應該考慮使用專門的 狀態管理模式(vuex).

2.8 Slot 分發內容

無名 Slot

子組件 my-component 模板：

<div>
  <h2>我是子組件的標題</h2>
  <slot></slot>
</div>

父組件模版：

<div>
  <h1>我是父組件的標題</h1>
  <my-component></my-component>
</div>

渲染結果：

<div>
  <h1>我是父組件的標題</h1>
  <div>
    <h2>我是子組件的標題</h2>
  </div>
</div>

有名

三．路由

安裝使用

npm install vue-router

### main.js ###

import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

### router.js ###

import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'foo',
      component: foo
    }
})

1. 動態路由匹配

2. 嵌套路由

3. 重定向 和 別名

4. 獲取數據

5. 懶加載

四．狀態管理

1. 狀態管理模式是什麼

2. 核心概念解釋

2.1 State

2.2 Getters

2.3 Mutations

2.2 Actions

2.2 Moudules

3. 推薦的項目結構

五．動畫