Vue.js的模板语法详解


Posted in Javascript onFebruary 16, 2020

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

使用“Mustache”语法 (即用双大括号包裹) 的文本插值:

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 “msg” 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

如果使用 v-once 指令,你也能执行 一次性插值 ,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。

HTML

直接用双大括号包裹只是普通文本,如果想实现HTML代码效果,需要加入 v-html 指令

html部分:

<div id="app">
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

js部分:

var vm = new Vue({
	el:'#app',
	data:{
	 rawHtml:'<span style="color:red">this is red</span>'
	}
});

v-html使用时 在span标签的前标签内写入“v-html="xxx” ,相当于将data中的值以HTML形式放入span标签内。

Vue.js的模板语法详解 

attribute(属性)

Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令:

格式:v-bind:属性="变量名"

html部分:

<div v-bind:color="textcolor">123</div>

js部分:

data:{
 textcolor:"red"
}

将变量textcolor的值“red"绑定在盒子的 "color" 属性上

Vue.js的模板语法详解

对于布尔属性,v-bind使用为:

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefinedfalse ,则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

JS表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ data变量 + 1 }}    //
{{ data变量/表达式 ? 'true代码' : 'false代码' }}   //三元运算
{{ data变量.split('').reverse().join('') }}   //可以进行函数调用

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript被解析。

限制是:每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是, 当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 回顾我们在介绍中看到的例子:

<p v-if="seen">现在你看到我了</p>

这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如, v-bind 指令可以用于响应式地更新 HTML属性值:

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>

在这里 href 是参数 ,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。

动态参数

可以动态的绑定不同的属性,可以用 方括号 括起来的 JavaScript 表达式作为一个指令的参数:

<!--
注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName(命名中不能有逗号或冒号等符号) 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。

例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 "href",那么这个绑定将等价于 <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>

同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus。

修饰符

修饰符 (modifier) 是以半角句号 " . " 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

简写 v-bind 缩写

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

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

总结

以上所述是小编给大家介绍的Vue.js的模板语法详解,希望对大家有所帮助!

Javascript 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 #Javascript
vue数据响应式原理知识点总结
Feb 16 #Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 #Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
js表达式与运算符简单操作示例
Feb 15 #Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 #Javascript
You might like
php.ini中date.timezone设置分析
2011/07/29 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
php取得字符串首字母的方法
2015/03/25 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python单链表的简单实现方法
2014/09/23 Python
python编程嵌套函数实例代码
2018/02/11 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
文职个人求职信范文
2013/09/23 职场文书
幼儿教师培训感言
2014/03/08 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书