VUE基礎知識點整理

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

這裏就有兩個重點，Vue是一套用於構建用戶界面的漸進式框架；Vue 被設計爲能夠自底向上逐層應用；

那麼什麼是Vue是一套用於構建用戶界面的漸進式框架，什麼是Vue 被設計爲能夠自底向上逐層應用呢。這也能夠針對面試官常常會問到，你對vue有什麼瞭解之類的問題。

而對於「漸進式」的解釋，我在知乎上看到了一個不錯的回答，這個答案也被Vue的設計者點了贊。這個回答的角度很好，主要從與React、Angular的比較來闡述的，因爲本人沒怎麼用過另外這兩個框架，也就不妄加評述，因此僅把回答進行摘錄，以供參考[4]。 在我看來，漸進式表明的含義是：主張最少。 每一個框架都不可避免會有本身的一些特色，從而會對使用者有必定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。好比說，Angular，它兩個版本都是強主張的，若是你用它，必須接受如下東西：

-必須使用它的模塊機制、

-必須使用它的依賴注入

-必須使用它的特殊形式定義組件（這一點每一個視圖框架都有，難以免）

因此Angular是帶有比較強的排它性的，若是你的應用不是從頭開始，而是要不斷考慮是否跟其餘東西集成，這些主張會帶來一些困擾。好比React，它也有必定程度的主張，它的主張主要是函數式編程的理念，好比說，你須要知道什麼是反作用，什麼是純函數，如何隔離反作用。它的侵入性看似沒有Angular那麼強，主要由於它是軟性侵入。Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你能夠在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也能夠整個用它全家桶開發，當Angular用；還能夠用它的視圖，搭配你本身設計的整個下層用。你能夠在底層數據邏輯的地方用OO和設計模式的那套理念，也能夠函數式，均可以，它只是個輕量視圖而已，只作了本身該作的事，沒有作不應作的事，僅此而已。 漸進式的含義，個人理解是：沒有多作職責以外的事。

1，指令 v-bind:id=‘domId’ //屬性值綁定(縮寫:id=‘XX’)；v-on:click=‘add’//事件處理(縮寫@click=‘XX’)；v-if='seen’條件； v-for=‘todo in todos’；

var app = new Vue({
  el: '#app',     //元素
  data: {         //數據
    message: 'Hello Vue!'，
    todos: [
      { text: 111, value: "Hhh" },
      { text: 222, value: "Hhh22" },
      { text: 333, value: "Hhh333" },
      { text: 444, value: "Hhh44" }
    ],
    demo: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  },
  methods: {      //方法
    add: function() {
      this.value = this.value + 1;
    }
  },
  computed:{//計算屬性 只在相關依賴發生改變時它們纔會從新求值
  	reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  watch:{//偵聽屬性，在數據變化時執行異步或開銷較大的操做時使用
  }
})
Vue.component('todo-item', {
  // todo-item組件接受一個"prop"，自定義特性，這個 prop 名爲 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

-----html：-------------------------------
<div id="app">
  <span v-bind:title="message">
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
  <div v-for="(value, key, index) in demo" :key="key">
	 {{ index }}. {{ key }}: {{ value }}
  </div>
  <todo-item
    v-for="item in todos"
    v-bind:todo="item"
    v-bind:key="item.value">
  </todo-item>
  <span>{{reversedMessage}}</span>
</div>

2，生命週期鉤子的函數：

• beforeCreate created
• beforeMount mounted
• beforeUpdate updated
• beforeDestory destoryed
• 3， 事件修飾符。由點開頭的指令後綴表示。
• .stop
  .prevent
  .capture
  .self
  .once
  .passive
  .once
  .passive
  按鍵.enter .tab .delete .esc.space.up.down.left.right
  .sync修飾符
  當你須要雙向數據綁定時，會致使數據流混亂，因此推薦使用update:myPropName 的模式觸發事件取而代之。即
  子組件：this.$emit(‘update:title’, newTitle)
  父組件：<text-document v-bind:title.sync="doc.title"></text-document>
  等同於：

  <text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event"
  ></text-document>

  帶有 .sync 修飾符的 v-bind 不能和表達式一塊兒使用
  能夠串用 順序很關鍵
  4， v-model 指令在表單 、 及 元素上建立雙向數據綁定。綁定的值一般是靜態字符串 (對於複選框也能夠是布爾值)

  v-model 在每次 input 時將輸入框的值與數據進行同步。你能夠添加 lazy 修飾符，從而轉變爲使用 change 事件進行同步
  若是想自動將用戶的輸入值轉爲數值類型，能夠給 v-model 添加 number 修飾符
  若是要自動過濾用戶輸入的首尾空白字符，能夠給 v-model 添加 trim 修飾符<input v-model.trim="msg">
  5，組件基礎：
  一個組件的 data 選項必須是一個函數，每一個實例能夠維護一份被返回對象的獨立的拷貝：

  data: function () {
    return {
      count: 0
    }
  }

  6，父組件子組件通訊：子組件調用內建的 $emit 方法並傳入事件的名字，來向父級組件觸發一個事件，父組件用v-on 在博文組件上監聽這個事件，就像監聽一個原生 DOM 事件同樣，父級組件監聽這個事件時，能夠經過 $event 訪問到被拋出的值；（事件名推薦用kebab-case而非駝峯格式 ）
  父子 prop 之間是單向下行綁定：父級 prop 的更新會向下流動到子組件。每次父級組件發生更新時，子組件中全部的 prop 都將會刷新爲最新值。你不該該在子組件內部改變該 prop，不然數據流向難以理解。

  組件：<blog-post v-on:enlarge-text="postFontSize += $event"></blog-post>
  內容：<button v-on:click="$emit('enlarge-text'，0.5)">Enlarge text</button>

  7，插槽，使用自定義組件時內容輸出位置
  8，動態組件：
  組件名隨currentTabComponent變化而變化
  9，局部註冊：局部註冊的組件在其子組件中不可用

  new Vue({
    el: '#app',
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    }
  })
  var ComponentA = { /* ... */ }
  var ComponentB = { /* ... */ }

  10，其餘：

  v-bind 用於 class 和 style 時，Vue.js 作了專門的加強。表達式結果的類型除了字符串以外，還能夠是對象或數組
  v-show 的元素始終會被渲染並保留在 DOM 中，不支持 元素，也不支持 v-else，v-if 是「真正」的條件渲染
  使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新，只渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。<div class="box" v-once></div>
  Object.freeze()，這會阻止修改現有的屬性
  Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $
  不要在選項屬性或回調上使用箭頭函數，好比 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。由於箭頭函數是和父級上下文綁定在一塊兒的，this 不會是如你所預期的 Vue 實例，常常致使 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。
  對於已經建立的實例，Vue 不能動態添加根級別的響應式屬性。可是，可使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。賦予多個屬性時要用兩個對象合成新的對象而非直接在一個上面添加：

  vm.userProfile = Object.assign({}, vm.userProfile, {
   age: 27,
   favoriteColor: 'Vue Green'
  })

  有時也須要在內聯語句處理器中訪問原始的 DOM 事件。能夠用特殊變量 $event 把它傳入方法：

• <button v-on:click="warn('Form cannot be submitted yet.', $event)">
   Submit
  </button>

  有些 HTML 元素，諸如

  1. 、 和 ，對於哪些元素能夠出如今其內部是有嚴格限制的，自定義組件 會被做爲無效的內容提高到外部，並致使最終渲染結果出錯。幸虧 is 有特性

     <table>
      <tr is="blog-post-row"></tr>
     </table>

  2. 異步組件推薦和 webpack 的 code-splitting 功能一塊兒配合使用

     Vue.component('async-webpack-example', function (resolve) {
       // 這個特殊的 `require` 語法將會告訴 webpack
       // 自動將你的構建代碼切割成多個包，這些包會經過 Ajax 請求加載
       require(['./my-async-component'], resolve)
     })