简单谈谈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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
javascript截取字符串小结
Apr 28 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
smarty模板数学运算示例
2016/12/11 PHP
解密效果
2006/06/23 Javascript
javascript call和apply方法
2008/11/24 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
详解Python中的测试工具
2019/06/09 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
移风易俗倡议书
2014/04/15 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
求职信怎么写
2014/05/23 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
影视后期实训报告
2014/11/05 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
python 命令行传参方法总结
2021/05/25 Python
设置IIS Express并发数
2022/07/07 Servers