Vue.js每天必学之数据双向绑定


Posted in Javascript onSeptember 05, 2016

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。

插值

文本

数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双大括号):

<span>Message: {{ msg }}</span>

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值,今后的数据变化就不会再引起插值更新了:

<span>This will never change: {{* msg }}</span>

原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串,需要用三 Mustache 标签:

<div>{{{ raw_html }}}</div>

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断,应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住,只对可信内容使用 HTML 插值,**永不**用于用户提交的内容。

HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内:

<div id="item-{{ id }}"></div>

注意在 Vue.js 指令和特殊特性内不能用插值。不必担心,如果 Mustache 标签用错了地方 Vue.js 会给出警告。

绑定表达式

放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中,一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

JavaScript 表达式

到目前为止,我们的模板只绑定到简单的属性键。不过实际上 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式将在所属的 Vue 实例的作用域内计算。一个限制是每个绑定只能包含单个表达式,因此下面的语句是无效的:

<!-- 这是一个语句,不是一个表达式: -->
{{ var a = 1 }}

<!-- 流程控制也不可以,可改用三元表达式 -->
{{ if (ok) { return message } }}

过滤器

Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符”指示:

{{ message | capitalize }}

这里我们将表达式 message 的值“管输(pipe)”到内置的 capitalize 过滤器,这个过滤器其实只是一个 JavaScript 函数,返回大写化的值。Vue.js 提供数个内置过滤器,在后面我们会谈到如何开发自己的过滤器。

注意管道语法不是 JavaScript 语法,因此不能在表达式内使用过滤器,只能添加到表达式的后面。

过滤器可以串联:

{{ message | filterA | filterB }}

过滤器也可以接受参数:

{{ message | filterA 'arg1' arg2 }}

过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。这里,字符串 'arg1' 将传给过滤器作为第二个参数,表达式 arg2 的值在计算出来之后作为第三个参数。

指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。我们来回头看下“概述”里的例子:

<p v-if="greeting">Hello!</p>

这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素。

参数

有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性:

<a v-bind:href="url"></a>

这里 href 是参数,它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 {% raw %}href="{{url}}"{% endraw %} 获得同样的结果:这样没错,并且实际上在内部特性插值会转为 v-bind 绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">

这里参数是被监听的事件的名字。我们也会详细说明事件绑定。

修饰符

修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀,用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式:

<a v-bind:href.literal="/a/b/c"></a>

当然,这似乎没有意义,因为我们只需要使用 href="/a/b/c" 而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。

缩写

v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你会感觉一直这么写实在是??隆6?以诠菇ǖヒ秤τ茫?PA )时,Vue.js 会管理所有的模板,此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写:

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

它们看起来跟“合法”的 HTML 有点不同,但是它们在所有 Vue.js 支持的浏览器中都能被正确地解析,并且不会出现在最终渲染的标记中。缩写语法完全是可选的,不过随着一步步学习的深入,你会庆幸拥有它们。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
JS快速实现移动端拼图游戏
Sep 05 #Javascript
jQuery实现的tab标签切换效果示例
Sep 05 #Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 #Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 #Javascript
JS查找字符串中出现次数最多的字符
Sep 05 #Javascript
node网页分段渲染详解
Sep 05 #Javascript
js对象浅拷贝和深拷贝详解
Sep 05 #Javascript
You might like
adodb与adodb_lite之比较
2006/12/31 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP对象相关知识总结
2017/04/09 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
全球度假村:Club Med
2017/11/27 全球购物
新东网科技Java笔试题
2012/07/13 面试题
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
人事专员的职责
2014/02/26 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
运动会开幕词
2015/01/28 职场文书
初二物理教学反思
2016/02/19 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
什么是SOLID
2022/03/24 Javascript