简单谈谈Vue 模板各类数据绑定


Posted in Javascript onSeptember 25, 2016

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会;更是对待现实工作不懈渴求,乃至苛求。因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成。言归正传,作为前端ER,一度觉得,这 Vue 的诞生,好比一柄倚天利器,其易上手,写以及运行也都很高效,十分让人爱不释手;但这易上手,倒不等于容易精通,蛮多东西都需悉心学习、练习、理解,才能运用自如。

在使用 Vue 开发过程中,那基于 Dom 实现的模版,总是无可避免的要遇到,也是一个令人欣喜的存在。Vue.js 模板不仅都是可解析的有效的 HTML,且通过一些特殊的特性做了增强,这使得很多先行,需要借助 jQuery 等类库在逻辑中操纵的部分,已然可以在模版中进行,不得不说这使得一定程度上,Dom结构变的更加清晰明了。因此,这部分如果用运得当,对于 Vue 组件化编写大有裨益;虽然说 Vue官方已经有很完善的文档~ 数据绑定语法 ,但依然还是可以对这块儿再进行探讨,毕竟Vue数据绑定,其实际功能比目测的文档中描述更为强大。

微注:本博客也基于 Hexo 驱动,其目测不支持多个大括号渲染,所以这里只好暂时先用 \ 做下转义了。另外,为了方便电脑端阅读,自此有对网页加入 Enter 键监听,用以切换 show / hide 侧边栏。

在文档中,我们可以轻易的知道,Vue 为数据,Class, Style,表单控件的绑定;属性的计算,条件、列表渲染;方法、事件处理等等等提供了诸多便捷的方法;所以我们可以很简洁的写出模版,例如这样的;

<span>Bindind Message Using Mustache(双大括号): {{ msg }}</span>
<span>This will never change(mustache with *): {\{* msg }\}</span>
<div>Bing htmlText using three Mustache label Like This : {\{\{ htmlText }\}\}</div>
<div id="item-{\{ id }\}">Html Attributes Using Mustache</div>
<div>{\{ message.split('').reverse().join('') }\}</div>
<div class="{\{ className }\}">Binding class using Mustache Label</div>

谈及这数据的绑定就涉及到好几种符号®,比如:Mustache 语法标签的 {\{ }\} ,三Mustache标签,引号(单双),括号 () ,对象 {} ,甚至数组 [] ;初始用起来,挺容易使人迷惑的,如果没认真读文档的话;用了蛮久之后,回过头再读文档,有以下感悟,如有不准确处,请慷慨予以指正:

三Mustache标签,是用来将传来数据解析成HTML的,用以更新元素的 innerHTML,这个很清晰明了;也很常用;在内部,它会被编译为锚节点上的一个 v-html 指令。

Mustache之 {\{}\} ,是要将数据解析为纯文本,用以更新元素的 textContent,这个用的最多且广;在内部,它被编译为 textNode 的一个 v-text 指令。

引号 (包括单双),这是 Vue 可来承载字符串,用来映射对应实例中定义的各类对象(Number,布尔值,字符串,数据,对象等等)和方法;也用来解析特定语法:譬如: v-for=”item in items”;还能支持部分简单的表达式:v-if=”Math.random() > 0.5”; 当涉及有多层引号之时,就得不同引号相互套用,一般采用双引号套单引号;比如 : <div :style="{ fontSize: fontSize + 'px' }"></div> ;

括号 () ,这个用到的地方,比如 v-for="(index, item) in items" ,再比如: <a href="#" @click="onXXClick(param)"></a> 之类的;

当涉及到解析 class , style 时候,本来这类属性是html自带本来就需具有引号,所以要用 Mustache 来绑定的话,就是这样: class="xx-{\{ className }\}

对于上一条,Vue 温馨的考量到字符串拼接麻烦又易错,所以对于 class 和 style 的绑定,除了支持字符串外,还额外增强使其能支持对象或数组,所以就可以有以下用法:

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

<div v-bind:class="[classA, classB]">

以上这写几点,有使用 jsfiddle 做一小 Demo 予以说明,这也是对部分特殊写法的一个小记录;其中有提到这样的写法:

<div :style="{'width': `${100 / this.count}%`}">Text Desc</div>

这样的动态写法虽然看起来不是很优雅,用起来也不是很方便,但不失为一种用法,这其中也运用了 Es6 语法;然而这种写法使用用起来,还是挺使得人很是沮丧的,即便用了 babel 转化,某些时候却不能得到正确的解析,Vue 给出了如下警告:

Invalid expression. Generated function body: {‘width': scope.${100/this.count}% }

如此写时OKay时挂掉,这部分至今还是没能搞明白,列于此处,也是提醒自己要多多深入探究下vue;另外,Vue 在解析表达式方面,也有很需要注意的地方(不支持正则),作者予以提供了 computed property;所以也是建议,涉及 Style 的动态部分,还是用函数解决,写在 templete 中,即便可以,却也导致其样式结构看起来错综复杂。

当然,大多情形之下,并不是很肯定将各种 class, style 的操纵,放置于 Template 中,即便使用 jade 等一些模版语言辅助,也会使得整个 Dom 结构看起来,没那么清晰明朗,能方便切类予以实现的,最好用这种方式,毕竟简洁才美。但,总有些略为复杂的需求,相比于在逻辑中去循环遍历,以操弄 Dom 来动态改变,那么在模版中去操纵 style 反而显得会更优雅;我们已经知道,Mustache语法,可以解析表达式;表达式中可以以 String 来映射对象,数组,想必也可以对应调用其实例中的方法,试一试?

如上例所示,果然,Vue 真是贴心;记得上次做某个看似颇有些复杂的需求,试用此法,将判断逻辑固定 methods 中,免去了再次遍历的无奈,很是优雅的解决问题。这岂能不令人欢喜?更何况,Vue 还提供了其它若干十分人性化的处理方案,譬如:

<a href="javascript:;" @click="onXxxClick(param)"></a>
<!-- 阻止单击事件冒泡 -->
<a @click.stop="doThisFunc"></a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<div slider(@mouseover="pause && pausePlay()", @mouseout="pause && goPlay()"></div>)
<input v-on:keyup.13="submitFuncName">
<input v-on:keyup.enter="submitFuncName"> //为最常用的按键提供别名

<!-- 用 v-model 指令在表单控件元素上创建双向数据绑定 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{\{ checked }\}</label>

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>

关于 Vue,文档写的再清楚没有了,所以也没有额外??碌谋匾?5??褂弥?北暇够骨3兜胶芏嗖寮?⒖狻⒆榧?龋?婕爸疃嗖煌?幕?疲?杂诓皇呛苁煜さ牟糠郑?级?嵯萑胍恍┞榉常晃?艘不崤级??龅降恼庑┪侍猓?鱿抡?砑锹荚 Vue 常见问题解决方案记录 。

很久很久以前,荀子《劝学》中有言道: 君子生非异也 善假于物也 ,纵隔千年万载,大有其理。在前端行走的这大半年,十二分感谢有 Vue 这般的器具存在,使得总产生一种感觉,有这利器存在,任何需求插来都不虚。据 学以致用 的道理,那么就先言及于此,边用边学边感慨。

Javascript 相关文章推荐
JS date对象的减法处理实现代码
Dec 28 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
JS中判断null的方法分析
Nov 21 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
D3.js实现直方图的方法详解
Sep 25 #Javascript
关于JS中二维数组的声明方法
Sep 24 #Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 #Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 #Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 #Javascript
浅谈js常用内置方法和对象
Sep 24 #Javascript
js原生跨域_用script标签的简单实现
Sep 24 #Javascript
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2015年复活节活动总结
2015/02/27 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书