Vue學習筆記-1

前言

本文不是Vue.js的教程，只是一邊看官網Vue的教程文檔一邊記錄並總結學習過程當中遇到的一些問題和思考的筆記。

一、vue和avalon同樣，都不支持VM初始時不存在的屬性

而在Angular裏是能夠支持的，由於angular採用髒檢查的方式實現雙向綁定，vue和avalon都是採用setter和getter實現雙向綁定

例，以下代碼在一秒後不會顯示出「xxcanghai」的字樣

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{}
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//無效
   },1000);
</script>

若給定初始值，則可生效，以下：

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{
               text:"default Text" //給定初始值
           }
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//有效
   },1000);
</script>

不過Vue其中比avalon好的一點是，Vue在只是對初始化時不存在的屬性賦值無效，但顯示是不會報錯的。而avalon則根本沒法顯示，對於上述第一段代碼運行都會報錯（不知道最新的avalon是否修改此問題）

好在vue中提供了$set方法來解決這種賦值失敗的問題，以下：

<div i<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj: {}
       }
   });
   setTimeout(function() {
       v.$set("obj.text", "xxcanghai");//有效
   }, 1000);
</script>

雖然這種採用字符串來表示變量名的方式會致使沒法使用強類型的預編譯檢查（TypeScript），但也至少算能解決問題吧。

二、input元素中屬性與v-model同時存在在以屬性爲優先

以下代碼：當文本框中的value屬性與v-model衝突時會以input的value屬性爲優先，並覆蓋v-model的屬性
最終console.log輸出的也是「inputText」

<div id="app">
   <input type="text" v-model="a" value="inputText">
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           a: "vueText"
       }
   });
   console.log(v.a);//inputText
</script>

對於複選框類型的input上述結論也一樣適用，以下：

<div id="app">
   <input type="checkbox" v-model="isCheck" checked>
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           isCheck: false
       }
   });
   console.log(v.isCheck);//true
</script>

複選框的v-model設定爲false不選中，同時設定checked屬性選中，最終效果爲以checked屬性優先，複選框被選中，同時v.isCheck屬性被改寫爲true。

三、VM中的函數放到data屬性和methods屬性中的區別，以及函數調用時帶括號與不帶括號的區別

1. Vue在實例化的時候有一個特殊的屬性即methods，我看官方文檔中把全部VM中的函數都放到methods屬性裏面，經測試把函數寫在data和methods中均可以正常運行，那麼二者有何區別？
2. 經過官方demo可知，在綁定函數的時候能夠帶括號也能夠不帶括號，對於有參數的函數那必須帶括號調用，可是對於無參函數帶括號調用與不帶括號調用的區別是什麼？
   如下測試：

<div id="app">
    <button @click="dataFn">1.dataFn</button> 
    <!--輸出：<button>,[MouseEvent]-->
    
    <button @click="dataFn()">2.dataFn()</button> 
    <!--輸出：Vue,[]-->
    
    <button @click="methodsFn">3.methodsFn</button> 
    <!--輸出：Vue,[MouseEvent]-->
    
    <button @click="methodsFn()">4.methodsFn()</button> 
    <!--輸出：Vue,[]-->
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            dataFn: function() {
                console.log(this,arguments);
            }
        },
        methods: {
            methodsFn: function() {
                console.log(this,arguments);
            }
        }
    });
    //xxcanghai@博客園
</script>

經過上述代碼對比能夠獲得如下結論：

1. 若想要在事件響應函數中得到Event對象，那麼事件綁定時不能加括號，參見上述一、3示例。
2. 若想在函數中this指向Vue實例化對象，函數調用時應當加括號。同時，全部在methods屬性中的函數，不管如何調用，this都指向當前Vue實例化對象。
3. 遂最終結論爲：應當把全部VM中的函數都放在methods中，同時對於事件的綁定應當使用無括號方式。即上述示例3中爲最優方案。

PS：固然你也能夠使用vue內置的$event來顯示的傳遞event對象，以保證函數寫在任何位置均可以正常使用this和event。

<div id="app">
    <button @click="dataFn($event)">5.dataFn($event)</button> 
    <!--輸出：Vue,[MouseEvent]-->
    
    <button @click="methodsFn($event)">6.methodsFn($event)</button> 
    <!--輸出：Vue,[MouseEvent]-->
</div>

相關筆記

Vue學習筆記-1(http://www.cnblogs.com/xxcanghai/p/5849038.html)

Vue學習筆記-2(http://www.cnblogs.com/xxcanghai/p/6098663.html)