1.Vue.js 是什麼？網址：https://vuejs.org/ Vue.js（讀音 /vjuː/，類似於 view 的讀音）是一套構建用戶界面(user interface)的漸進式框架。與其他重量級框架不同的是，Vue 從根本上採用最小成本、漸進增量(incrementally adopt ...

1.Vue.js 是什麼？

網址：https://vuejs.org/

Vue.js（讀音 /vjuː/，類似於 view 的讀音）是一套構建用戶界面(user interface)的漸進式框架。與其他重量級框架不同的是，Vue 從根本上採用最小成本、漸進增量(incrementally adoptable)的設計。Vue 的核心庫只專註於視圖層，並且很容易與其他第三方庫或現有項目集成。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供有力驅動。

聲明式渲染

Vue.js 的核心是，可以採用簡潔的模板語法來聲明式的將數據渲染為 DOM：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello Vue!

2.vue的7/8/7 >>1.7個屬性

el:template render
data:view ->property
mehtods: views-> events
template: string template
render: createElement
computed:
watch:function(new,old){} hook newold-oldnew

類型：string | HTMLElement
限制：只在由 new 創建的實例中遵守。
詳細：

提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。

在實例掛載之後，元素可以用 vm.$el 訪問。

如果這個選項在實例化時有作用，實例將立即進入編譯過程，否則，需要顯式調用 vm.$mount() 手動開啟編譯。

提供的元素只能作為掛載點。不同於 Vue 1.x，所有的掛載元素會被 Vue 生成的 DOM 替換。因此不推薦掛載root實例到 <html> 或者 <body> 上。

如果 render 函數和 template 屬性都不存在，掛載 DOM 元素的 HTML 會被提取出來用作模板，此時，必須使用 Runtime + Compiler 構建的 Vue 庫。

data

類型：Object | Function
限制：組件的定義只接受 function。
詳細：

Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象(含有零個或多個的key/value對)：瀏覽器 API 創建的原生對象，原型上的屬性會被忽略。大概來說，data 應該只能是數據 - 不推薦觀察擁有狀態行為的對象。

一旦觀察過，不需要再次在數據對象上添加響應式屬性。因此推薦在創建實例之前，就聲明所有的根級響應式屬性。

實例創建之後，可以通過 vm.$data 訪問原始數據對象。Vue 實例也代理了 data 對象上所有的屬性，因此訪問 vm.a 等價於訪問 vm.$data.a。

以 _ 或 $ 開頭的屬性不會被 Vue 實例代理，因為它們可能和 Vue 內置的屬性、 API 方法衝突。你可以使用例如 vm.$data._property 的方式訪問這些屬性。

在定義一個組件時，data 必須聲明為一個返回初始數據對象的函數，因為可能會使用此函數創建多個實例。如果 data 是一個普通對象，則所有創建出來的實例將共用引用同一個數據對象！通過提供 data 函數，每次創建一個新實例後，我們能夠調用 data函數，從而返回初始數據的一個全新的 data 對象副本。

如果需要，可以通過將 vm.$data 傳入 JSON.parse(JSON.stringify(...)) 得到深拷貝的原始數據對象。

示例：

var data = { a: 1 }

// 直接創建一個實例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必須是函數
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

註意，如果你對 data 屬性使用箭頭函數，this 將不會指向組件實例，但是你仍然可以通過函數返回的第一個參數，來訪問組件實例：

data: vm => ({ a: vm.myProp })

template

類型：string
詳細：

一個字元串模板作為 Vue 實例的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。

如果值以 # 開始，則它用作選項符，將使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type="x-template"> 包含模板。

出於安全考慮，你應該只使用你信任的 Vue 模板。避免使用其他人生成的內容作為你的模板。

如果 Vue 選項中包含 render 函數，template 選項將被忽略。
參考：
- 生命周期示意圖
- 使用 slots 進行內容分發

render

類型：(createElement: () => VNode) => VNode
詳細：

字元串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。render 函數接收一個 createElement 方法作為第一個參數用來創建 VNode。

如果組件是一個函數組件，render 函數還會接收一個額外的 context 參數，為沒有實例的函數組件提供上下文信息。

Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯 render 函數。

computed

類型：{ [key: string]: Function | { get: Function, set: Function } }
詳細：

計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。

註意，如果你對 data 屬性使用箭頭函數，this 將不會指向組件實例，但是你仍然可以通過函數返回的第一個參數，來訪問組件實例：
computed: {
aDouble: vm => vm.a * 2
}
計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。註意，如果實例範疇之外的依賴 (比如非響應式的 not reactive) 是不會觸發計算屬性更新的。

示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 只獲取
    aDouble: function () {
      return this.a * 2
    },
    // 獲取和設置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

參考：計算屬性

methods

類型：{ [key: string]: Function }
詳細：

methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。

註意，不應該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.a 將是 undefined。

示例：

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

參考：事件處理

watch

類型：{ [key: string]: string | Function | Object | Array}
詳細：

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。

示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 字元串方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 回調函數會將在觀察(data observer)開始後立即被調用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

註意，不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.updateAutocomplete 將是 undefined。

8個hook函數 beforeCreate created beforeMount mounted beforeUpdate updated boforeDestroy destroyed

2.2、鉤子函數的執行

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 創建前狀態===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 創建完畢狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 掛載前狀態===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 掛載結束狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 銷毀前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 銷毀完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>
3.指令
v-for

列表渲染

使用 `v-for` 遍曆數組生成元素

我們可以使用 v-for 指令，將一個數組渲染為列表項。v-for 指令需要限定格式為 item in items 的特殊語法，其中，items 是原始數據數組(source data array)，而 item是數組中每個迭代元素的指代別名(alias)：

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

結果：

在 v-for 代碼塊中，我們可以完全地訪問父級作用域下的屬性。v-for 還支持可選的第二個參數，作為當前項的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

結果：

Parent - 0 - Foo
Parent - 1 - Bar

你還可以不使用 in，而是使用 of 作為分隔符，因為它更加接近 JavaScript 迭代器語法：

<div v-for="item of items"></div>

使用 `v-for` 遍歷對象

也可以使用 v-for 來遍歷對象的屬性。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

結果：

John
Doe
30

還可以提供第二個參數，作為對象的鍵名(key)：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

firstName: John lastName: Doe age: 30

然後第三個參數作為索引(index)：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

0. firstName: John 1. lastName: Doe 2. age: 30

v-text

期望類型：string
詳細：

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

示例：

<span v-text="msg"></span>
<!-- 和下麵的一樣 -->
<span>{{msg}}</span>

v-model

期望類型：隨表單控制項類型不同而不同。
限制：
- <input>
- <select>
- <textarea>
- components
修飾符：
- .lazy - 取代 input 監聽 change 事件
- .number - 輸入字元串轉為數字
- .trim - 輸入首尾空格過濾
用法：

在表單控制項或者組件上創建雙向綁定。細節請看下麵鏈接的教程。

v-html

期望類型：string
詳細：

更新元素的 innerHTML 。註意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用組件來替代。

在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

在單文件組件中，scoped 樣式不會應用在 v-html 內部，因為這些 HTML 沒有被 Vue 模板編譯器處理過。如果你希望針對 v-html 中的內容設置帶作用域的 CSS，作為替代你可以使用 CSS 模塊，或者使用一個額外的全局 <style>元素，手動設置類似 BEM 的作用域策略。
示例：
<div v-html="html"></div>

v-on

縮寫：@
期望類型：Function | Inline Statement | Object
參數：event
修飾符：
- .stop - 調用 event.stopPropagation()。
- .prevent - 調用 event.preventDefault()。
- .capture - 添加事件偵聽器時使用 capture 模式。
- .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
- .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
- .native - 監聽組件根元素的原生事件。
- .once - 只觸發一次回調。
- .left - (2.2.0) 只當點擊滑鼠左鍵時觸發。
- .right - (2.2.0) 只當點擊滑鼠右鍵時觸發。
- .middle - (2.2.0) 只當點擊滑鼠中鍵時觸發。
- .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
用法：

綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個 $event 屬性： v-on:click="handle('ok', $event)"。

從 2.4.0+ 開始，v-on 同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。註意，當使用對象語法時，不支持任何修飾符。

示例：

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止預設行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止預設行為，沒有表達式 -->
<form @submit.prevent></form>

<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>

<!-- 對象語法（2.4.0+） -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

在子組件上監聽自定義事件（當子組件觸發 “my-event” 時將調用事件處理器）：

<my-component @my-event="handleThis"></my-component>

<!-- 內聯語句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 組件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

v-bind

縮寫：:
期望類型：any (with argument) | Object (without argument)
參數：attrOrProp (optional)
修飾符：
- .prop - 被用於綁定 DOM 屬性（有什麼不同？）。如果標簽是一個組件，那麼 .prop 將在組件的 $el 上設置屬性。
- .camel - (2.1.0+) transform the kebab-case attribute name into camelCase.
- .sync - (2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的 v-on 偵聽器。
用法：

動態地綁定一個或多個特性，或一個組件 prop 到表達式。

在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。可以通過下麵的教程鏈接查看詳情。

在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。

沒有參數時，可以綁定到一個包含鍵值對的對象。註意此時 class 和 style 綁定不支持數組和對象。

示例：

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

<!-- 縮寫 -->
<img :src="imageSrc">

<!-- 內聯字元串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 綁定. “prop” 必須在 my-component 中聲明。 -->
<my-component :prop="someThing"></my-component>

<!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

.camel 修飾符允許在使用 DOM 模板時將 v-bind 屬性名稱駝峰化，例如 SVG 的 viewBox 屬性：

<svg :view-box.camel="viewBox"></svg>

在使用字元串模板或通過 vue-loader/vueify 編譯時，無需使用 .camel。

v-cloak

不需要表達式
用法：

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。

示例：

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

不會顯示，直到編譯結束。

組件化

項目目錄

最開始是MVC模式，這裡

vue學習之路之MVC，MVP，MVVM之間的區別和聯繫

M代表的是model負責提供數據，V是視圖view,C 代表控制器，他們之間是單向通信，V和M之間的通信是通過C來作為橋梁的，也就是說V和M並不是直接通信；

再後來的是MVP模式，這裡的P代表presenter，其和MVC之間唯一的不同點在於V和P只之間的並不是直接通信的，是通過介面來通信的，而且還是雙向的; MVVM最大的特點在於數據的數據的雙向綁定，當視圖V變化的時候，ViewModel也會跟著變化，相反ViewModel變化的時候View變化，這樣做最大的好處就是，開發者不用再把精力放在無休止的操作DOM上，大大提高了生產的效率。其中可是為什麼會從MVC再到MVP最後演變到MVVM，以上就是原因（數據的雙向綁定），這也是和jQuery的一大不同之處吧。它的基本思想與 Angular 類似，但是用法更簡單， VUE和Angular相比，
而且比angular清涼的多。

vue總結

https://www.cnblogs.com/caojiayan/p/6282974.html

https://www.cnblogs.com/whocare/p/6528618.html

vue腳手架的使用

https://www.cnblogs.com/libin-1/p/6833373.html

https://blog.csdn.net/hhzzcc_/article/details/79251027

全棧工程師的參考文檔

http://www.100phone.cn/category/vue2/