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 相关文章推荐
json2.js的初步学习与了解
Oct 06 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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 购物车的例子
2009/05/04 PHP
PHP中读写文件实现代码
2011/10/20 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
《风筝》教学反思
2014/04/10 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
兵马俑导游词
2015/02/02 职场文书