Vue学习笔记

2023-06-07 22:27| 来源: 网络整理| 查看: 265

本文不是Vue.js的教程，只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记。

1、vue和avalon一样，都不支持VM初始时不存在的属性

而在Angular里是可以支持的，因为angular采用脏检查的方式实现双向绑定，vue和avalon都是采用setter和getter实现双向绑定

例，如下代码在一秒后不会显示出“xxcanghai”的字样

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

若给定初始值，则可生效，如下：

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

不过Vue其中比avalon好的一点是，Vue在只是对初始化时不存在的属性赋值无效，但显示是不会报错的。而avalon则根本无法显示，对于上述第一段代码运行都会报错（不知道最新的avalon是否修改此问题）

好在vue中提供了$set方法来解决这种赋值失败的问题，如下：

2.dataFn() 3.methodsFn 4.methodsFn() var vm = new Vue({ el: "#app", data: { dataFn: function() { console.log(this,arguments); } }, methods: { methodsFn: function() { console.log(this,arguments); } } }); //xxcanghai@博客园

通过上述代码对比可以得到以下结论：

若想要在事件响应函数中获得Event对象，那么事件绑定时不能加括号，参见上述1、3示例。若想在函数中this指向Vue实例化对象，函数调用时应当加括号。同时，所有在methods属性中的函数，无论如何调用，this都指向当前Vue实例化对象。遂最终结论为：应当把所有VM中的函数都放在methods中，同时对于事件的绑定应当使用无括号方式。即上述示例3中为最优方案。

PS：当然你也可以使用vue内置的$event来显示的传递event对象，以保证函数写在任何位置都可以正常使用this和event。

5.dataFn($event) 6.methodsFn($event)

【本文地址】

公司简介

联系我们