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
- Enterprise Library 4.1学习笔记2----数据访问程序块
- 微信小程序中用户唯一ID的获取
- Mysql备份系列(2)--mysqldump备份(全量+增量)方案操作记录
- Enterprise Library 4.1学习笔记1----配置应用程序块(c/s和b/s均适用)
- 简单账本-用完即走的微信小程序
- 新技术革命和新产业变革正进行 “互联网+大数据+人工智能+”时代正到来
- 微信小程序开发及相关设置小结
- gitlab两种连接方式:ssh和http配置介绍
- C#实现微信AES-128-CBC加密数据的解密
- UrlReferrer为空的问题?
- DeepMind发文回顾2017:AlphaGo团队已迎战下一个重大挑战
- [你必须知道的.Net]读书笔记--浅clone与深clone
- Python基础语法学习整理
- 通过部分感知深度卷积网络进行人脸特征点定位
- 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 数组属性和方法
- 基于云原生系统的应用分发系统设计
- vue实现文字表情同时输入的方法
- 不同类型的ABAP内表读写性能比较
- JavaScript和ABAP的MD5计算源代码
- 读取SAP CRM One Order应用日志的优化方式
- 悟空活动中台 - 基于 WebP 的图片高性能加载方案
- DES ECB加解密的Java实现
- win10 uwp 不显示 SplashScreen 欢迎界面的方法
- WPF 在 XAML 写 C# 代码
- 解析 HashMap源码值概括
- 解析 HashMap 源码之基本操作
- Docker手册
- 小知识:TFA收集日志报错空间不足
- Java SPI 居然这么多知名框架在用
- Ceph 入门到实战之 RBD 块存储接口