Vue.js中数据绑定的语法教程
数据绑定语法
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 支持的浏览器中都能被正确地解析,并且不会出现在最终渲染的标记中。缩写语法完全是可选的,不过随着一步步学习的深入,你会庆幸拥有它们。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- 微信年度重磅“小游戏”上线,罗胖一度退出的小程序正在逆袭
- 谈谈WCF中的Data Contract(2):WCF Data Contract对Generic的支持
- Android注解学习(1)
- [WCF权限控制]ASP.NET Roles授权[上篇]
- [WCF权限控制]ASP.NET Roles授权[下篇]
- 如何解决分布式系统中的跨时区问题[实例篇]
- Visual Studio对程序集签名时一个很不好用的地方
- 一个关于解决序列化问题的编程技巧
- [WCF权限控制]从两个重要的概念谈起:Identity与Principal[上篇]
- 从数据到代码——通过代码生成机制实现强类型编程[下篇]
- 谈谈你最熟悉的System.DateTime[下篇]
- 如何解决EnterLib异常处理框架最大的局限——基于异常"类型"的异常处理策略
- [WCF权限控制]从两个重要的概念谈起:Identity与Principal[下篇]
- 收藏!6道常见hadoop面试题及答案解析
- 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 数组属性和方法
- 详解linux下umask的使用
- Linux下设置每天自动备份数据库的方法
- Linux常用命令之chmod修改文件权限777和754
- 解决CentOS 7升级Python到3.6.6后yum出错问题总结
- Linux下如何挂载磁盘的方法示例
- centos7 PHP环境搭建 GD库 等插件安装方法
- CentOS服务器环境下MySQL主从同步配置方法
- awk命令
- linux下C语言实现写日志功能
- centOS7下Spark安装配置教程详解
- linux tail 查看日志文件方法
- Linux下Python脚本自启动和定时启动的详细步骤
- linux后台执行命令&和nohup的具体使用方法
- Linux修改hostname与免密码登录的方法
- Linux启动与停止spring boot工程的脚本示例