Vue.js中模板语法的示例分析-创新互联

	
Using mustaches: {{ rawHtml }}
	
Using v-html directive: 

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

123

data:{
 textcolor:"red"
}

Button

这些表达式会在所属 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中模板语法的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！