关于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的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
jquery实现图片预加载
Dec 25 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 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下删除字符串中HTML标签的函数
2008/08/27 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
python实现360的字符显示界面
2014/02/21 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python中bisect的使用方法
2019/12/31 Python
Python数据可视化图实现过程详解
2020/06/12 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
高中生的学习总结自我鉴定
2013/10/26 职场文书
料理师求职信
2014/01/30 职场文书
招商专员岗位职责
2014/02/08 职场文书
《观舞记》教学反思
2014/04/16 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
关于工作经历的证明书
2014/10/11 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
个人催款函范文
2015/06/24 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
创业计划书之家政服务
2019/09/18 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript