关于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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
学习Angularjs分页指令
Jul 01 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
JavaScript门面模式详解
2017/10/19 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python实现自动化上线脚本的示例
2019/07/01 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python实现超级马里奥
2020/03/18 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
优秀教师先进事迹材料
2014/12/15 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2015年读书月活动总结
2015/03/26 职场文书
导游词之上海豫园
2019/10/24 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL