Vue1.0爛筆頭筆記

• Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。
  {{ message.split('').reverse().join('') }}
  {{ ok ? 'YES' : 'NO' }}
  {{5+5}} 雙括號裡可以計算，可以繫結資料，可以寫表示式，可以用js方法
  {{ message | capitalize }} 過濾器 第一個是一個字串 引數，第二個是函式 函式可以傳值
  {{ message.split('').reverse().join('') }} 字串反轉

---

• v-html：插入一個字串，字串裡可以是dom元素或文字
  v-bind：繫結屬性的 v-bind:class="{'class222': class1}"，前者是他類名，後者是一個變數真假 （縮寫-：href）
  v-model：與bind配合使用，點選出來隱藏，也可以雙向資料繫結
  v-if：真為顯示，假為隱藏，也可以來判斷
  v-else：條件不符合時顯示 v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。
  v-on：用於監聽dom事件 （簡寫@）
  v-show：根據條件來判斷真假 （不支援 <template> 語法）
  v-for：有三個引數 "(value, key, index) in object" 值 屬性 和下標，可單獨用。也可以在上直接寫陣列 of 替代 in 作為分隔符
  v-bind:style：用物件的語法寫，也可以直接寫在物件了 直接變數名呼叫，如果多個物件，用陣列 逗號隔開

---

• 官網：
  v-once 指令，執行一次性地插值，當資料改變時，插值處的內容不會更新
  注意，v-show 不支援 <template> 元素，也不支援 v-else。
  陣列變異方法：push() pop() shift() unshift() splice() sort() reverse()
  Vue.set(vm.userProfile, 'age', 27) 對於已經建立的例項，Vue 不能動態新增根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value) 方法向巢狀物件新增響應式屬性
  你還可以使用 vm.$set 例項方法，它只是全域性 Vue.set 的別名： this.$set(this.userProfile, 'age', 27)
  修飾符 .lazy 在change 事件中同步 .number .trim

watch 元件 計算屬性那一章 列表渲染
除了 data 屬性， Vue 例項暴露了一些有用的例項屬性與方法。這些屬性與方法都有字首 $，以便與代理的 data 屬性區分
自定義元件，自定義指令：這兩個區別區域性一個例項和全部例項

---

• 事件修飾符：
  阻止單擊事件冒泡
  <a v-on:click.stop="doThis"></a>
  提交事件不再過載頁面
  <form v-on:submit.prevent="onSubmit"></form>
  修飾符可以串聯
  <a v-on:click.stop.prevent="doThat"></a>
  只有修飾符
  <form v-on:submit.prevent></form>
  新增事件偵聽器時使用事件捕獲模式
  <div v-on:click.capture="doThis">...</div>
  只當事件在該元素本身（而不是子元素）觸發時觸發回撥
  <div v-on:click.self="doThat">...</div>
  click 事件只能點選一次，2.1.4版本新增
  <a v-on:click.once="doThis"></a>
  只有在 keyCode 是 13 時呼叫 vm.submit()
  <input v-on:keyup.13="submit">
  同上
  <input v-on:keyup.enter="submit">
  使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用 @click.prevent.self 會阻止所有的點選，而 @click.self.prevent 只會阻止元素上的點選。

---

• 生命週期鉤子的函式：【data裡放資料，methods裡放方法】
  比如 created 鉤子可以用來在一個例項被建立之後執行程式碼：
  也有一些其它的鉤子，在例項生命週期的不同場景下呼叫，如 mounted、updated、destroyed。鉤子的 this 指向呼叫它的 Vue 例項。
  不要在選項屬性或回撥上使用箭頭函式，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。

---

鉤子函式：

created 進入頁面自己執行，
methods 呼叫執行
computed  計算屬性

表示式：

{{ var a = 1 }} <!-- 這是語句，不是表示式 -->
{{ if (ok) { return message } }}    <!-- 流控制也不會生效，請使用三元表示式 -->
methods: { reverseMessage: function}  這個名字不可以自定義

元件： 【暫停】

建立在例項外的全域性元件，在裡面的是區域性元件
props 自定義屬性暫時理解為style屬性
    元件： （元件裡寫html  換行時，每一行後面加反斜槓\）

vue屬性：

Vue 例項暴露了一些有用的例項屬性與方法。它們都有字首 $，以便與使用者定義的屬性區分開來
生命週期鉤子：比如 created  mounted、updated、destroyed。鉤子的 this 指向呼叫它的 Vue 例項。
created 進入頁面自己執行，methods 呼叫執行
Vue所有的例項屬性和方法都是以字首$開頭的。

模板語法：

v-once 這個命令可以讓元素不再雙向資料繫結  就是改變modle 資料不變化了  慎用

計算屬性和觀察者：【暫停】 watch

computed 裡面的函式可以放到雙括號裡  計算屬性的getter
getAnswer: _.debounce   這是一個函式 相當於setTimeout函式  限制輸入頻率

條件渲染：

v-if   v-show

列表渲染：

v-for      （2.2.0+ 的版本里，當在元件中使用 v-for 時，key 現在是必須的。）
陣列更新方法：push()    pop()   shift()   unshift()   splice()   sort()   reverse()；例如：filter(), concat() 和 slice() 。這些不會改變原始陣列
物件更改檢測注意事項：Vue.set(vm.userProfile, 'age', 27)
已有物件賦予多個新屬性：Object.assign() 或 _.extend()
 Vue.set(vm.dd, 'age', '27');   vm.$set(vm.dd, 'user', 'zhang');   前一個區域性，後一個全域性$
DOM 模板解析注意事項：<ul>、<ol>、<table>、<select> 自定義元件 <my-row> 會被當作無效的內容，因此會導致錯誤的渲染結果。變通的方案是使用特殊的 is 特性

Object.freeze() 這會阻止修改現有的屬性，也意味著響應系統無法再追蹤變化
除了資料屬性，Vue 例項還暴露了一些有用的例項屬性與方法。它們都有字首 $，以便與使用者定義的屬性區分開來
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

vm.$watch('a', function (newValue, oldValue) {
// 這個回撥將在 vm.a 改變後呼叫
})

<span v-once>這個將不會改變: {{ msg }}</span>通過使用 v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。

例項生命週期鉤子：

比如 created 鉤子可以用來在一個例項被建立之後執行程式碼：
app.$destroy(); 但是原先生成的dom元素還存在，可以這麼理解，執行了destroy操作，後續就不再受vue控制了。

修飾符 ：

<form v-on:submit.prevent="onSubmit">...</form>

計算屬性和偵聽器：

計算屬性computed    （頁面開始就執行的寫這裡）       methods（頁面載入完點選的方法在這裡）  mounted   created    watch  

註冊一個全域性自定義指令 v-focus

Vue.directive

註冊一個全域性自定義元件 v-focus

Vue.component

---

API：
Vue.config 是一個物件，包含 Vue 的全域性配置。可以在啟動應用之前修改下列屬性：Vue.config.silent = true 取消 Vue 所有的日誌與警告。