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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
Vue常用的全选/反选的示例代码
Feb 19 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设计模式 State (状态模式)
2011/06/26 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Python基础教程之异常详解
2019/01/10 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
关于毕业的中学校园广播稿
2014/01/26 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
三行辞职书范文
2015/02/26 职场文书
个人年度总结报告
2015/03/09 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
小学教育见习总结
2015/06/23 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏