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,文档写的再清楚没有了,所以也没有额外啰嗦的必要。但,使用之时毕竟还牵扯到很多插件、库、组件等,涉及诸多不同的机制,对于不是很熟悉的部分,偶尔会陷入一些麻烦;为此也会偶尔将遇到的这些问题,做下整理记录在 Vue 常见问题解决方案记录。
很久很久以前,荀子《劝学》中有言道:君子生非异也 善假于物也,纵隔千年万载,大有其理。在前端行走的这大半年,十二分感谢有 Vue
这般的器具存在,使得总产生一种感觉,有这利器存在,任何需求插来都不虚。据学以致用**的道理,那么就先言及于此,其余的比如源码什么的,需要时候再学再纪录。谈到这善假于物也,在使用Vue
伊始,基本都是自己个儿亲手搭建vue
项目,编写常用组件,以及做Webpack
、Gulp
等配置;近期琐事儿繁忙,也就多去假于物了;这其中用了不少组件或者库,用来甚是趁手,安利如下:
- vue-cli: A simple CLI for scaffolding Vue.js projects. Webpack, Eslint 等都配置完善,大感贴心(不熟悉 Eslint的话初始使用起来还是颇为麻烦,长远来看,必备管家)。
- vue-router: is the official router for Vue.js,强大易用,项目必备。
- vue-resource: 使用 XMLHttpRequest or JSONP 处理web请求及响应;在最新项目中已用它来取代原先使用的 Jquery-Ajax, 颇为好用,用起来却也得仔细;
- vuex: Centralized State Management for Vue.js.
- vue-tables: 十分强大简洁的 vue 表格组件(兼容Client Or 在线数据),配备 Bootstrap UI样式,支持自定义多种功能,用来趁手,喜之不尽;
- vue-slider: Vue 的图片轮播组件 (a vue slider component),可以直接使用,支持配置;虽不完善,却也蛮受用。
- vue-syntax-highlight: Sublime Text syntax highlighting for single-file Vue components.
Last Modify : 2016-09
- 如何在Weka中加载CSV机器学习数据
- 老司机教你部署Cowrie蜜罐
- 时间序列预测如何变成有监督学习问题?
- 追踪溯源 | 希拉里邮箱泄露事件
- DNS Tunneling及相关实现
- 创建代码生成器可以很简单:如何通过T4模板生成代码?[下篇]
- 创建代码生成器可以很简单:如何通过T4模板生成代码?[上篇]
- 从Trace和Debug来看条件编译(Conditional Compilation)
- 解码针对工业工程领域的网络攻击 Operation Ghoul「食尸鬼行动」
- EndpointAddress——不只是一个Uri[上篇]
- EndpointAddress——不只是一个Uri[下篇]
- ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起
- ASP.NET Core中如影随形的”依赖注入”[下]: 历数依赖注入的N种玩法
- ASP.NET Core中的缓存[1]:如何在一个ASP.NET Core应用中使用缓存
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MYSQL 优化
- MYSQL 表转 JavaBean 工具类
- MYSQL 数据库结构优化
- 解密日志文件工具类
- InnoDB表优化
- SAP Spartacus如何创建自定义route页面
- SAP Spartacus的url parameter
- 来讲讲你对ThreadLocal的理解
- 用了这个jupyter插件,我已经半个月没打开过excel了
- vue接入腾讯地图(二)【标注&定位实战】
- 图像处理笔记(4)----OpenCV对象追踪
- MySQL 数据恢复
- 【从0到1学习边缘容器系列2】之 边缘应用管理
- 【从0到1学习边缘容器系列-3】应用容灾之边缘自治
- Hacking with iOS: SwiftUI Edition - 里程碑:项目 13 - 15