时间:2021-05-25
前言
本文不是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),但也至少算能解决问题吧。
注意:Vue2.0已经废弃了vm.$set的用法,应该使用Vm.set()全局方法。
2、input元素中属性与v-model同时存在以属性为优先
如下代码:当文本框中的value属性与v-model冲突时会以input的value属性为优先,并覆盖v-model的属性
最终console.log输出的也是“inputText”
对于复选框类型的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。
3、VM中的函数放到data属性和methods属性中的区别,以及函数调用时带括号与不带括号的区别
Vue在实例化的时候有一个特殊的属性即methods,我看官方文档中把所有VM中的函数都放到methods属性里面,经测试把函数写在data和methods中都可以正常运行,那么两者有何区别?
通过官方demo可知,在绑定函数的时候可以带括号也可以不带括号,对于有参数的函数那必须带括号调用,但是对于无参函数带括号调用与不带括号调用的区别是什么? 以下测试:
通过上述代码对比可以得到以下结论:
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()
Vue学习笔记-2()
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
做为一名学习路上的小白,起初就对vue.js有着莫名的好感,知道vue.js也能实现angular.js的双向绑定等一些功能后,妥妥的先把angular.js和
开始更新前端框架Vue.JS的相关博客。功能概述学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下:(1
vue.js源代码学习笔记corescedule.js,供大家参考,具体内容如下importtypeWatcherfrom'./watcher
本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:在发布到iis目录下时候,如果放
现在来系统地学习一下Vue(参考vue.js官方文档):Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件。Vue.js