Vue.js模板插值

Vue.js模板插值教程

我们在 HTML 代码中使用 {{}} 形式获取 Vue 实例对象中 data 属性值的方式，就叫做 Vue.js 模板插值或叫做 Vue.js 插值表达式。

Vue.js 插值表达式 {{}} 语法，即 Mustache 语法的完整形式为 v-text 指令，但又略微区别于 v-text 指令。

Vue.js模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

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

Vue.js插值文本详解

定义

数据绑定最常见的形式就是使用 “Mustache” 语法 (双大括号) 的文本插值：

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

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示。

案例

使用 “Mustache” 语法，实现数据绑定。

<!DOCTYPE html>
<html>
<head>
	<title>vue 插值</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<p>文本插值：{{ msg }}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'<h2>Hello HaiCoder</h2>'
		}
	})
</script>
</html>

浏览器运行效果，如下图所示：

01 vue 插值.png

div 中的 p 标签的文本被 vue 实例对象中 data 属性值原样替换。

Vue.js插值表达式详解

定义

所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句。(表达式是运算，有结果；语句就是代码，可以没有结果)

<span>Message: {{ JavaScript 表达式 }}</span>

案例

使用 JavaScript 表达式

<!DOCTYPE html>
<html>
<head>
	<title>vue 插值</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<p>插值表达式：{{ code == 0 ? '结果正确' : '结果错误' }}</p>
		<p>插值表达式：{{ func() }}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			code:1,
			func:()=>{
				return 1+2;
			}
		}
	})
</script>
</html>

浏览器运行效果，如下图所示：

02 vue 插值.png

div 中的 p 标签的文本是表达式计算返回的值。

Vue.js模板插值总结

我们在 HTML 代码中使用 {{}} 形式获取 Vue 实例对象中 data 属性值的方式，就叫做 Vue.js 模板插值或叫做 Vue.js 插值表达式。

Vue.js 插值文本实现数据绑定使用的语法是 “Mustache” 语法 (双大括号)。所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句。

Vue.js 插值表达式 “Mustache” 语法的完整形式为 v-text 指令，但又略微区别于 v-text 指令。