初學vue整理

一、new Vue實例

var app = new Vue({
  el: '#app', // 掛載元素
  // 數據
  data: {
    message: 'Hello!'
  },
  // 方法
  methods: {
    XXXXXXX: function () {......}
  },
 // 生命週期鉤子
//鉤子的 this 指向調用它的 Vue 實例

//在實例被建立以後被調用
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  },
  mounted: function ( ) {},
  updated: function ( ) {},
  destroyed: function ( ) {},

  // 過濾器
  filters: {
      XXXX: function (value) { return xxxx }
    },

  // 計算屬性
  computed:{
     XXXX: function ( ) { 
      // `this` 指向 vm 實例 
      return xxxx 
      }
  },

  // 監測數據變更
  // 當你有一些數據須要隨着其它數據變更而變更時，你很容易濫用 watch。
  //一般更好的想法是使用 computed 屬性而不是命令式的 watch 回調。
  //當想要在數據變化響應時，執行異步操做或開銷較大的操做，watch頗有用
  watch:{
      [data數據]: function (val) 
  }
})

過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符指示,過濾器能夠串聯,過濾器能夠接收參數

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

method 和計算屬性的區別：計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。若是你不但願有緩存，請用 method 替代。

二、綁定 DOM 元素屬性

v-bind:title="message"

將這個元素節點的 title 屬性和 Vue 實例的 message 屬性保持一致

三、指令

v-bind: 縮寫:
v-once: 執行一次性地插值，當數據改變時，插值處的內容不會更新
v-html="rawHtml": 輸出真正的 HTML。雙大括號會將數據解釋爲純文本，而非 HTML
v-if: 例v-if="seen"
v-else: v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的後面——不然它將不會被識別。
v-else-if: 相似於 v-else，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素以後。
v-show: 不一樣的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。v-show 不支持 <template> 語法。

若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用 v-if 較好。

v-for
當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。
當在組件中使用 v-for 時，key 如今是必須的。
v-model: 實現表單輸入和應用狀態之間的雙向綁定 <p>{{ message }}</p><input v-model="message">
v-on : 縮寫@ 例 v-on:click

v-on 事件修飾符

.stop  阻止單擊事件冒泡
.prevent  例 v-on:submit.prevent="onSubmit" //.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()
.capture
.native  在某個組件的根元素上監聽一個原生事件
.self  只當事件在該元素自己（好比不是子元素）觸發時觸發回調
.once   點擊事件將只會觸發一次
修飾符能夠串聯 v-on:click.stop.prevent
使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 @click.prevent.self 會阻止全部的點擊，而 @click.self.prevent 只會阻止元素上的點擊。

v-on 鍵值修飾符

v-on:keyup.13 或  v-on:keyup.enter
所有的按鍵別名：
.enter
.tab
.delete (捕獲 「刪除」 和 「退格」 鍵)
.esc
.space
.up
.down
.left
.right

// 可使用 v-on:keyup.f1
   Vue.config.keyCodes.f1 = 112

v-on 修飾鍵

.ctrl
.alt
.shift
.meta
//例如：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

滑鼠按鍵修飾符

.left
.right
.middle

四、數組更新檢測

變異方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非變異方法
filter()
concat()
slice()

Vue 不能檢測如下變更的數組：
一、當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
解決方法：

// 方法1、Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// 方法2、Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

二、當你修改數組的長度時，例如： vm.items.length = newLength
解決方法：

example1.items.splice(newLength)

五、註冊組件

Vue.component('todo-item', {
  template: '<li>{{ todo.text }}</li>',

  // 使用 Prop 傳遞數據
  // 駝峯式命名
  props: ['myMessage'],

  // Prop 驗證,爲組件的 props 指定驗證規格
  //要指定驗證規格，須要用對象的形式，而不能用字符串數組,需寫成一下格式：
  props:{
      propA: Number,
      propB: [String, Number], // 多種類型,可爲：String、Number、Boolean、Function、Object、Array、Symbol
      propC: {
        type: String,
        required: true, // 必傳
        default: 100 // 默認值
      },
      // 數組/對象的默認值應當由一個工廠函數返回
      propE: {
        type: Object,
        default: function () {
          return { message: 'hello' }
        }
      },
       // 自定義驗證函數
      propF: {
        validator: function (value) {
          return value > 10
        }
      }
  }
 
  // data 必須是函數
  data: function () {
    return {
      counter: 0
    }
  }
})

如今你能夠用它構建另外一個組件模板：

<ol>
  <!-- 建立一個 todo-item 組件的實例,傳遞值時用 短橫線隔開式命名 -->
  <todo-item v-bind:my-message="item"></todo-item>
</ol>

字面量語法 vs 動態語法

<!-- 傳遞了一個字符串 "1" -->
<comp some-prop="1"></comp>
<!-- 傳遞實際的 number -->
<comp v-bind:some-prop="1"></comp>

prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是不會反過來。
爲何咱們會有修改 prop 中數據的衝動呢？一般是這兩種緣由：
一、prop 做爲初始值傳入後，子組件想把它看成局部數據來用。
正確方式：定義一個局部變量，並用 prop 的值初始化它
二、prop 做爲初始值傳入，由子組件處理成其它數據輸出。
正確方式：定義一個計算屬性，處理 prop 的值並返回

子組件跟父組件通訊在子組件的事件函數中，用 $emit 觸發事件，如： this.$emit('increment')，如此，父組件能夠在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件，如： <button-counter v-on:increment="incrementTotal"></button-counter>