Vue.js中数据绑定的语法教程


Posted in Javascript onJune 02, 2017

数据绑定语法

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 攻击。记住,只对可信内容使用 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>

这里 href 是参数,它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 href="{{url}}" rel="external nofollow" 获得同样的结果:这样没错,并且实际上在内部特性插值会转为 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" rel="external nofollow" 而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。

缩写

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

v-bind 缩写

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

<!-- 缩写 -->
<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></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 支持的浏览器中都能被正确地解析,并且不会出现在最终渲染的标记中。缩写语法完全是可选的,不过随着一步步学习的深入,你会庆幸拥有它们。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
vue如何截取字符串
May 06 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 #Javascript
BootStrap daterangepicker 双日历控件
Jun 02 #Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 #Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 #Javascript
javascript实现延时显示提示框效果
Jun 01 #Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
vue.js 获取当前自定义属性值
Jun 01 #Javascript
You might like
php生成随机颜色方法汇总
2014/12/03 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
PHP7 标准库修改
2021/03/09 PHP
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python基于property实现类的特性操作示例
2018/06/15 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
公积金单位接收函
2014/01/11 职场文书
征兵宣传标语
2014/06/20 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2014年度工作总结报告
2014/12/15 职场文书
八年级语文教学反思
2016/03/03 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android