VUE入門實踐（2）

一、MVVM模式

1.一、MVC模式的意思是，軟件能夠分紅三個部分。各部分之間的通訊方式以下。

• View 傳送指令到Controller
• Controller完成業務邏輯以後，改變Model狀態
• Model將新的數據發送到View，展現給用戶
• 全部通訊都是單向的

1.二、MVVM

• MVVM採用雙向綁定，視圖層（View）的變更，自動反映在ViewModel，反之亦然。Angular和Vue，React採用這種方式。
• MVVM模式中，一個ViewModel和一個View匹配，徹底和View綁定，全部View中的修改變化，都會更新到ViewModel中，同時VewModel的任何變化都會同步到View上顯示。之因此自動同步是ViewModel中的屬性都實現了observable這樣的接口，也就是說當使用屬性的set方法，會同時觸發屬性修改的事件，使綁定的UI自動刷新。

二、Hello Word

打開HelloWorld.vue,刪除多餘的內容，寫一個最簡單的文本插值和數據綁定，改變input的內容，下面也跟着一塊兒改變

<template>
  <div class="hello">
    <input v-model="msg"/>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
input {
  font-size: 20px;
}
</style>


複製代碼

運行項目，打開首頁

3.生命週期

每一個Vue實例在被建立以前都要通過一系列的初始化過程。例如，實例須要配置數據觀測(data observer)、編譯模版、掛載實例到DOM，而後在數據變化時更新DOM 。在這個過程當中，實例也會調用一些生命週期鉤子 ，這就給咱們提供了執行自定義邏輯的機會。

它能夠總共分爲8個階段：

• 1.beforeCreate:在實例初始化以後，數據觀測(data observer) 和event/watcher 事件配置以前被調用。

• 2.created:實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

• 3.beforeMount:在掛載開始以前被調用：相關的render 函數首次被調用。該鉤子在服務器端渲染期間不被調用。

• 4.mounted:el 被新建立的vm.$el替換，並掛載到實例上去以後調用該鉤子。若是root 實例掛載了一個文檔內元素，當mounted被調用時vm.$el 也在文檔內。該鉤子在服務器端渲染期間不被調用。

• 5.beforeUpdate:數據更新時調用，發生在虛擬DOM 從新渲染和打補丁以前。你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。該鉤子在服務器端渲染期間不被調用。

• 6.updated:因爲數據更改致使的虛擬DOM 從新渲染和打補丁，在這以後會調用該鉤子。當這個鉤子被調用時，組件DOM 已經更新，因此你如今能夠執行依賴於DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或watcher取而代之。該鉤子在服務器端渲染期間不被調用。

• 7.beforeDestroy:實例銷燬以前調用。在這一步，實例仍然徹底可用。該鉤子在服務器端渲染期間不被調用。

• 8.destroyed:Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

四、VUE組件

組件（Component）是 Vue.js 最強大的功能之一。

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

組件系統讓咱們能夠用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面均可以抽象爲一個組件樹：

vuejs組件的重要選項：

data: function () {
  return {
    count: 0
  }
}
複製代碼

• data：vue的全部數據都是放在data裏面的，data 必須是一個函數，這樣的好處就是每一個實例能夠維護一份被返回對象的獨立的拷貝，若是 data 是一個對象則會影響到其餘實例

• methods：就是本身定義的一下方法

• watch：監聽屬性，若是對應一個對象，鍵是觀察表達式，值是對應回調，值也能夠是方法名，或者是對象，包含選項

• props：父組件經過 props 向下傳遞數據給子組件；子組件經過 events 給父組件發送消息

• created：html加載完成以前執行，執行順序：父組件-子組件

• mounted：html加載完成後執行，執行順序：子組件-父組件

• computed：計算屬性容許咱們對指定的視圖，複雜的值計算。這些值將綁定到依賴項值，只在須要時更新。

• methods VS computed：雖然這兩種方式輸出的結果是相同的，可是性能將遭受毀滅性的打擊。使用這種方法totalMarks()方法在每次頁面渲染時都被執行一次（例如，使用每個change）。若是咱們有一個計算屬性，那麼Vue會記住計算的屬性所依賴的值（在咱們這個示例中，那就是results）。經過這樣作，Vue只有在依賴變化時才能夠計算值。不然，將返回之前緩存的值。這也意味着只要results尚未發生改變，屢次訪問totalMark計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。上面兩個示例也說明，在Vue中計算屬性是基於它們的依賴進行緩存的，而方法是不會基於它們的依賴進行緩存的。從而使用計算屬性要比方法性能更好。

簡單展現一下props的用法：

父組件：

<template>
  <div class="hello">
    <ul>
      <child v-for="(item,index) in list" :key="index" v-bind:item="item"></child>
    </ul>
  </div>
</template>

<script>
import child from './Child'
export default {
  name: 'HelloWorld',
  components: { child },
  data: () => {
    return {
      list: [123, 456, 789]
    }
  }
}
</script>
複製代碼

子組件：

<template>
    <li>{{ item }}</li>
</template>

<script>
export default {
  props: ['item']
}
</script>
複製代碼

dom結構

五、VUE經常使用指令

5.一、v-text

v-text主要用來更新textContent，能夠等同於JS的text屬性。

<span v-text="msg"></span>
複製代碼

5.二、v-html

雙大括號的方式會將數據解釋爲純文本，而非HTML。爲了輸出真正的HTML，能夠用v-html指令。它等同於JS的innerHtml屬性。

export default {
  name: 'HelloWorld',
  data: () => {
    return {
      html: '<p style="color: red;">測試內容</p>'
    }
  }
}


複製代碼

<span v-html="html"></span>
複製代碼

5.三、v-if

v-if能夠實現條件渲染，Vue會根據表達式的值的真假條件來渲染元素。

<span v-if="flag">標識爲true</span>
複製代碼

5.四、v-else

v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if後面，不然不起做用。

<span v-if="flag">標識爲true</span>
<span v-else>標識爲false</span>
複製代碼

5.五、v-else-if

v-else-if充當v-if的else-if塊，能夠鏈式的使用屢次。能夠更加方便的實現switch語句。

<span v-if="flag === 1">標識爲1</span>
<span v-else-if="flag === 2">標識爲2</span>
<span v-else-if="flag === 3">標識爲3</span>
<span v-else>標識爲false</span>
複製代碼

5.六、v-show

用於根據條件展現元素。和v-if不一樣的是，若是v-if的值是false，則這個元素被銷燬，不在dom中。可是v-show的元素會始終被渲染並保存在dom中，它只是簡單的切換css的dispaly屬性。

<span v-show="flag">標識爲true</span>
複製代碼

<span v-show="!flag">標識爲true</span>
複製代碼

5.七、v-for

v-for指令根據遍歷數組來進行渲染

export default {
  name: 'HelloWorld',
  data: () => {
    return {
      list: [123, 456, 789]
    }
  }
}
複製代碼

<p v-for="(item, index) in list" :key="index">{{item}}</p>
複製代碼

index是一個可選參數，表示當前項的索引

5.八、v-model

用於在表單上建立雙向數據綁定。

v-model會忽略全部表單元素的value、checked、selected特性的初始值。由於它選擇Vue實例數據作爲具體的值。

<input v-model="msg"/>
<h1>{{ msg }}</h1>
複製代碼

改變input輸入框的內容h1標籤的內容也會跟着改變

修飾符：

.lazy：默認狀況下，v-model同步輸入框的值和數據。能夠經過這個修飾符，轉變爲在change事件再同步。

<input v-model.lazy="msg">
複製代碼

.number自動將用戶的輸入值轉化爲數值類型

<input v-model.number="msg">
複製代碼

.trim自動過濾用戶輸入的首尾空格

<input v-model.trim="msg">
複製代碼

5.九、v-on

v-on主要用來監聽dom事件，以便執行一些代碼塊。表達式能夠是一個方法名。 簡寫爲：【 @ 】

v-on:click="test"
複製代碼

等效於

@click="test"
複製代碼

事件修飾符

.stop: 阻止事件繼續傳播

.prevent: 事件再也不重載頁面

.capture 使用事件捕獲模式,即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理

.self 只當在 event.target 是當前元素自身時觸發處理函數

.once 事件將只會觸發一次

.passive 告訴瀏覽器你不想阻止事件的默認行爲