资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Vue.js中模板语法的示例分析

这篇文章主要介绍Vue.js中模板语法的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的花山网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

Vue.js 模板语法

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

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

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

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

Message: {{ msg }}

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

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

HTML

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

html部分：


	
Using mustaches: {{ rawHtml }}

	
Using v-html directive: 

js部分：

var vm = new Vue({
	el:'#app',
	data:{
	 rawHtml:'this is red'
	}
});

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

Vue.js中模板语法的示例分析 

attribute（属性）

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

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

html部分：

123

js部分：

data:{
 textcolor:"red"
}

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

Vue.js中模板语法的示例分析

对于布尔属性，v-bind使用为：

Button

如果 isButtonDisabled的值是 null、undefined或 false，则 disabled attribute 甚至不会被包含在渲染出来的

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

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


{{ var a = 1 }}


{{ if (ok) { return message } }}

指令

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

现在你看到我了

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

参数

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

...

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

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

...

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

动态参数

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


 ... 

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

例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 ... 。

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

 ... 

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

修饰符

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

简写 v-bind 缩写


...


...

v-on 缩写


...


...

以上是“Vue.js中模板语法的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


网站栏目：Vue.js中模板语法的示例分析
文章起源：http://cdkjz.cn/article/peohgp.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
渠县网站建设成都企业网站定制成都网站运维重庆网站建设成都服务器租赁腾讯免备案空间seo优化成都全屋定制成都纯水机网站推广

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图