澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-08-24 09:48 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

js一些问题和思考学习笔记,Vue学习笔记

前言

前言

正文不是Vue.js的学科,只是单方面看官方网站Vue的学科文书档案一边记录并总括学习进度中遭受的一对标题和沉思的笔记

前言

本文不是Vue.js的课程,只是单方面看官方网站Vue的教程文书档案一边记录并总计学习进度中遇见的片段标题和揣摩的笔记

本文不是Vue.js的科目,只是壹只看官方网址Vue的科目文书档案一边记录并总计学习进度中相遇的局地难点和思维的笔记。

1、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),但也至少算能缓和难题啊。

1、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),但也至少算能缓慢解决难题啊。

1、vue和avalon一样,都不协理VM开始时不设有的习性

2、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。

2、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。

而在Angular里是能够扶助的,因为angular采纳脏检查的章程贯彻双向绑定,vue和avalon都以运用setter和getter完毕双向绑定

3、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对象,那么事件绑定期不能加括号,参见上述1、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>

3、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. 若想要在事变响应函数中收获伊夫nt对象,那么事件绑按时不能加括号,参见上述1、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>

例,如下代码在一秒后不会来得出“xxcanghai”的字样

相关笔记

Vue学习笔记-1()

Vue学习笔记-2()

有关笔记

Vue学习笔记-1()

Vue学习笔记-2()

<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>

本文由澳门威利斯人发布于办公软件,转载请注明出处:js一些问题和思考学习笔记,Vue学习笔记

关键词: 澳门威利斯人 JavaScript VUE Vue.js