关于Vue.js一些问题和思考学习笔记(1)


Posted in Javascript onDecember 02, 2016

前言

本文不是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”

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

3、VM中的函数放到data属性和methods属性中的区别,以及函数调用时带括号与不带括号的区别

Vue在实例化的时候有一个特殊的属性即methods,我看官方文档中把所有VM中的函数都放到methods属性里面,经测试把函数写在data和methods中都可以正常运行,那么两者有何区别?
通过官方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>

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

  • 若想要在事件响应函数中获得Event对象,那么事件绑定时不能加括号,参见上述1、3示例。
  • 若想在函数中this指向Vue实例化对象,函数调用时应当加括号。同时,所有在methods属性中的函数,无论如何调用,this都指向当前Vue实例化对象。
  • 遂最终结论为:应当把所有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(https://3water.com/article/98869.htm)

Vue学习笔记-2(https://3water.com/article/98878.htm)

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈JavaScript之事件绑定
Jul 08 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
js与applet相互调用的方法
Jun 22 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 #Javascript
基于javascript实现的快速排序
Dec 02 #Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 #Javascript
基于jQuery实现滚动切换效果
Dec 02 #Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 #Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 #Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 #Javascript
You might like
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php截取视频指定帧为图片
2016/05/16 PHP
js 幻灯片的实现
2011/12/06 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python自动生产表情包
2017/03/17 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
文秘应届生求职信
2014/07/05 职场文书
四查四看整改措施
2014/09/19 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
送达通知书
2015/04/25 职场文书
垂直极限观后感
2015/06/08 职场文书
单位工作证明范本
2015/06/15 职场文书
演讲比赛主持词
2015/06/29 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python