Vue.js学习 Item4 -- 数据双向绑定
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 代码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你会感觉一直这么写实在是啰嗦。而且在构建单页应用(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.js学习 Item4 -- 数据双向绑定的更多相关文章
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- [vue]通过watch实现数据双向绑定
modal:单向绑定 <head> <meta charset="UTF-8"> <title>test</title> <s ...
- vue中v-model的数据双向绑定(重要)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue Object.defineProperty Proxy 数据双向绑定
Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...
- [vue]实现父子组件数据双向绑定
参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
随机推荐
- [POJ 1635] Subway tree systems (树哈希)
题目链接:http://poj.org/problem?id=1635 题目大意:给你两棵树的dfs描述串,从根节点出发,0代表向深搜,1代表回溯. 我刚开始自己设计了哈希函数,不知道为什么有问题.. ...
- [HDU 1011] Starship Troopers (树形dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1011 dp[u][i]为以u为根节点的,花了不超过i元钱能够得到的最大价值 因为题目里说要访问子节点必 ...
- (转)WebApi自动生成在线文档WebApiTestClient
原文链接:http://www.cnblogs.com/landeanfen/p/5210356.html 前言:这两天在整WebApi的服务,由于调用方是Android客户端,Android开发人员 ...
- 清理SQL Server服务器名称列表
SQL2008: C:\Users\TQ\AppData\Roaming\Microsoft\Microsoft SQL Server\100\Tools\Shell\SqlStudio.bin SQ ...
- Flask框架学习笔记(API接口管理平台 V2.0)
博主今天把API接口管理平台发布到github了,这次是更新一些功能 如支持本地数据库sqlite3.优化了数据结构 技术方面跟之前V1.0相同,只增加生产本地数据:但是为了支持层级的参数,修改了数据 ...
- nginx+lua+redis初体验
1.下载nginx.lua.redis nginx下载地址 wget http://nginx.org/download/nginx-1.8.0.tar.gz lua下载地址 wget http:/ ...
- 慕课网-安卓工程师初养成-2-1 Java中的关键字
来源:http://www.imooc.com/code/1176 Java 中常用关键字: 问:这么多,记不住啊......-_-|| 答:现在不需要你记住所有,混个眼熟即可,在学习的过程中,你会逐 ...
- 洛谷P1473 零的数列 Zero Sum
P1473 零的数列 Zero Sum 134通过 170提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交 讨论 题解 最新讨论 路过的一定帮我看错了我死了- 题目描述 请考虑 ...
- aspxgridView,Repeater增加自动序号列
第一种方式,直接在Aspx页面GridView模板列中.这种的缺点是到第二页分页时又重新开始了. <asp:TemplateField HeaderText="序号" Ins ...
- EXE中释放文件
今天有个朋友问到VC能否释放多个EXE.DLL或WAV等文件,我便做了个实例给他. (注意:以下释放资源代码是不受文件扩展名所限制的,你可以释放更多类型文件) 下面是我写了个很方面的函数给大家用! 1 ...