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)