Vue.js 實踐筆記

很久沒更新部落格了，最近看了很多零零碎碎的知識，記在本子上，今天感覺有一些量了，整理在這裡。這些基本上都是我在看完vue官網教程之後實際寫demo的時候遇到的一些問題，只看教程沒能很好的理解那些概念，果然還是實際寫起來更有用，現在看來其實都是些沒什麼技術含量的小問題，但是當時摸索的時候都是一個個折騰過來的，謹在這裡記下來提醒自己吧。

1.vue.js和vue.min.js的區別，開發版預設可調式，可以用vue devtools。開發板有vue相關的警告和錯誤提示。實際使用的時候還發現，開發板的要求更加嚴格一些，有些問題在開發板會報錯導致無法執行，壓縮版本卻能夠正常使用。當然還是以開發版的規範的方式為主。

2.雙大括號{{ }} 做文字插值，三大括號{{{ }}}做HTML插值。並且他倆可以使用全域性配置來變更：

// 修改文字插值的定界符。
Vue.config.delimiters = ['${', '}']
// 修改原生 HTML 插值的定界符。【2.0廢除】
Vue.config.unsafeDelimiters = ['{!!', '!!}']
//2.0使用v-html來進行html插值
<div v-html="rawHtml"></div>

另外，雙大括號{{ }}的插值可以用在HTML標籤的屬性內（如id=”{{ id }}”）,但在vue.js的指令和特殊特性內不能用，比如v-bind和v-on:click這種就不用大括號，直接寫即可。
注意：vue2.0廢除了三大括號的html插值寫法，而使用了v-html來代替。

3.每個 Vue 例項都會代理其 data 物件裡所有的屬性:

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 設定屬性也會影響到原始資料
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有這些被代理的屬性是響應的。如果在例項建立之後新增新的屬性到例項上，它不會觸發檢視更新。這種情況要使用$set

4.在Vue物件的methods中定義的方法要訪問Vue物件的data中的資料時，直接this.dataName即可。原理就是上一條。this就是Vue物件，也就是Vue.data

5.Vue物件的HTML模板中，不可以用jquery的$(“#id”).click()這種方式來繫結點選事件，要用它自己的方法。

6.v-bind:用於繫結屬性，如class，style還有Vue的props傳入資料的自定義屬性等等，縮寫是 : 。v-on:用於繫結事件，click等。

7.Vue物件的HTML模板中，不能有script標籤包裹js。這個問題在壓縮版中不提示，似乎能夠正常使用，但是在開發板的vue.js檔案中會報錯以至於無法執行。

8.用大括號{{ msg }}的時候，插入前可能會有一瞬間出現 msg變數本身，避免這種情況有兩個辦法: 1.在元素上加上v-cloak來隱藏未編譯的標籤，但注意要在css中加上[v-cloak]{display:none;}這句才有效。2.在標籤中使用v-text=“msg”來替代{{ msg }}。
上述兩個方法都能夠解決該問題，但是實際上他們有微小的差別：當包含該{{ msg }}的div元素存在背景色的時候會很明顯。方法1在msg渲染出來之前，div整個不顯示（不存在東西）。而方法2在渲染之前div是顯示的只是其中沒有內容（有一個div色塊）。

實際上，大多數資料跟v-for v-if v-show等判斷條件相關聯，所以當模板渲染的時候資料就已經存在了，不會出現這種閃爍的問題。只有“無論是否有資料都先顯示”的標籤才會遇到上述問題。

9.由於我們的專案是多頁面的web站點，所以不適合使用vue做單頁面應用的方式。在使用vue的元件特性進行程式碼複用的時候，就使用如下方式：
1）將所有的vue元件註冊放在一個單獨的vue.component.js檔案中，註冊的時候注意加上props來給元件傳遞資料。這裡要注意元件中的date和el一定要用函式返回的形式來寫。
2）這樣就有一個對應給所有元件的vue.component.css檔案。
3）在使用的時候直接用註冊好的自定義標籤，使用v-bind: props 來傳遞資料給元件：
註冊元件：

Vue.component('child', {
      // 宣告 props
      props: ['poNum','color','qty','val'],
      // prop 可以用在模板內
      // 可以用 `this.msg` 設定
      template: '<div style="background-color:gray"><p>{{ poNum }}</p><p>{{ color }}</p><p>{{ qty }}</p><input type="text" v-model="val"></div>',
})

Vue例項：

new Vue({
  el: '#example',
  data:{
      child_example_1:{
          poNum:'001',
          color:'red',
          qty:'100',
          val:'Creabine'
      },
      child_example_2:{
          poNum:'002',
          color:'green',
          qty:'200',
          val:''
      }
  }

})

HTML：

<div id="example">
    <span>child example 無資料</span>
    //不寫props
    <child></child>
    <span>child example 靜態資料</span>
    //寫props但是不用v-bind繫結，因為是靜態的，寫死的
    <child po-num="123456789" color="red" qty="100" val="hehe?"></child>
    <span>child example 動態資料1   </span>
    //變數要使用v-bind來繫結表示他是變數，不用v-bind的話，會被當做字串 
    <child :po-num="child_example_1.poNum" :color="child_example_1.color" :qty="child_example_1.qty" :val="child_example_1.val"></child>
    <span>child example 動態資料2</span>
    //變數要使用v-bind來繫結表示他是變數，不用v-bind的話，會被當做字串 
    <child :po-num="child_example_2.poNum" :color="child_example_2.color" :qty="child_example_2.qty" :val="child_example_2.val"></child>        
</div>

10在Chrome Store裡邊可以加一個vue devtools的外掛來方便vue的除錯。裝了之後在F12中會識別該頁面是否使用vue，如果使用了，在Element，Console，Source這一排的右邊會有一個Vue標籤，裡邊可以除錯Vue，看到自定義標籤和相對應的資料，很清晰。
注意：開發板的vue.js預設可調式，壓縮版預設不可以。另外還可以通過全域性設定：
Vue.config.devtools = true 來設定可除錯。

11.Vue.resource。一開始配合Vue使用的是jquery的ajax，但是如果該頁面能夠用vue搞定，就完全不需要引入相比之下體積很大的jquery（後來知道了jquery的ajax也可以單獨拿出來引入），這時候我們直接選擇用vue-resource來跟後臺進行ajax通訊。
這裡有很清晰的中文文件，基本上看一下就明白了。但是我在實際使用的過程中發現一個問題;
ajax成功之後返回的response物件有一個json（）方法，可以將response物件中的bodyText字串轉為json物件來使用。但是我這邊返回的bodyText是undefined。沒搞清楚為什麼會這樣，最後只能自己手動使用JSON.parse（）轉。但總覺得怪怪的，有待解決。