Vue 数据绑定语法
数据绑定语法
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"></a>
这里 href
是参数,它告诉 v-bind
指令将元素的 href
特性跟表达式 url
的值绑定。可能你已注意到可以用特性插值 href="{{url}}"
获得同样的结果:这样没错,并且实际上在内部特性插值会转为 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 代码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你会感觉一直这么写实在是啰嗦。而且在构建单页应用(SPA )时,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 数据绑定语法的更多相关文章
- Vue入门笔记#数据绑定语法
#数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- Vue学习(三):数据绑定语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue基础系列(三)——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue 模板语法 && 数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 初始Vue、Vue模板语法、数据绑定(2022/7/3)
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
随机推荐
- .net webservices 代理类生成命令
wsdl.exe /l:cs /out:d:/WxPayment.cs http://localhost/WxPayment.asmx
- Sqlserver 数据库、表常用查询操作
查询所有表以及记录数: select a.name as 表名,max(b.rows) as 记录条数 from sysobjects a ,sysindexes b where a.id=b.id ...
- 【python3】基于 qq邮箱的邮件发送
脚本内容: #!/usr/bin/python3 # -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMEText ...
- c++11 delete禁用函数
c++11添加了delete关键字. 不想用那个函数,在那个函数后面加 = delete就可以了: 比如: 在函数重载中,可用 delete 来滤掉一些函数的形参类型,如下: bool IsLucky ...
- 二、K3 WISE 开发插件《 工业单据老单客户端插件事件、属性、方法》
===================== 目录: 1.插件事件说明如下 2.插件属性说明如下 3.插件方法说明如下 ===================== 1.插件事件说明如下: 序号 事 ...
- jpa中时间戳格式应该用哪种类型
遇到个bug,数据库时间存储用了datetime,但是下面的java jpa代码,查询回来,却只有日期. String innerSql = getInnerQuery(departmentId, k ...
- 如何搭建Packetbeat性能监控
安装与配置JDK 1. 将jdk-8u111-linux-x64.tar.gz上传至Linux的/opt目录下,并执行解压命令: tar -zxvf jdk-8u111-linux-x64.tar. ...
- 【BZOJ5090】组题 分数规划
[BZOJ5090]组题 Description 著名出题人小Q的备忘录上共有n道可以出的题目,按照顺序依次编号为1到n,其中第i道题目的难度系数被小Q估计为a_i,难度系数越高,题目越难,负数表示这 ...
- html如何让label在div中的垂直方向居中显示?
设置label的行高 line-height 和div的高度一致即可.
- Spark2 DataSet 创建新行之flatMap
val dfList = List(("Hadoop", "Java,SQL,Hive,HBase,MySQL"), ("Spark", & ...