Vue.js 是一种流行的 JavaScript 框架，它利用 template 模板语法轻松地构建用户界面。在本文中，我将详细介绍 Vue.js 中的 template 模板语法，包括指令、表达式和事件绑定，并提供示例代码帮助读者快速上手。
1. 指令
指令是 Vue.js 中的一种特殊属性。它们是以 v- 开头的，用于在模板中对数据进行特殊的处理。Vue.js 提供了许多内置指令，如 v-if、v-show、v-for 等。
1.1 v-if
v-if 指令用于在元素及其子元素之间切换条件渲染。当表达式的值为 true 时，元素将被渲染；当表达式的值为 false 时，元素将被删除。
示例代码：
<div v-if="show"> <p>显示的内容</p> </div>
1.2 v-show
v-show 指令用于根据条件显示或隐藏元素，但不会删除元素。
示例代码：
<div v-show="show"> <p>显示的内容</p> </div>
1.3 v-for
v-for 指令用于根据数据源循环渲染元素。可以使用特殊变量 $index 获取当前迭代的索引。
示例代码：
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>1.4 v-bind
v-bind 指令用于动态绑定元素的一个或多个属性。可以绑定 html 属性、class 和 style。
示例代码：
<img v-bind:src="imageUrl" />
1.5 v-model
v-model 指令用于实现表单元素的双向绑定。它会根据元素的值自动同步更新模型的数据，也可以通过改变模型的数据来更新元素的值。
示例代码：
<input type="text" v-model="message" />
2. 表达式
Vue.js 中的模板语法支持简单的表达式。表达式是由一系列 JavaScript 表达式组成的，可以使用数据对象中的属性和方法。
示例代码：
<p>{{ message }}</p>在表达式中可以使用一些内置过滤器来格式化显示的数据，如 date、uppercase、currency 等。
示例代码：
<p>{{ message | uppercase }}</p>2.1 过滤器
过滤器用于格式化表达式中的数据。可以在表达式后面以管道符（|）分隔，多个过滤器之间也可以用管道符分隔。
示例代码：
<p>{{ message | uppercase | reverse }}</p>过滤器还可以带参数，多个参数之间用逗号分隔。
示例代码：
<p>{{ message | limit(10, '...') }}</p>2.2 计算属性
计算属性是在数据对象中计算其他属性的值的方法。当计算属性所依赖的属性发生变化时，它会自动重新计算值。
示例代码：
// www.javascriptcn.com code example
<div>
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
<script>
new Vue({
data: {
message: "Hello, Vue.js!"
},
computed: {
reversedMessage: function () {
return this.message.split("").reverse().join("");
}
}
});
</script>3. 事件绑定
Vue.js 中的模板语法支持事件绑定。可以绑定 DOM 事件、自定义事件和 v-model 触发的事件。
示例代码：
<button v-on:click="doSomething">点击</button>
3.1 DOM 事件
可以使用 v-on 指令监听 DOM 事件。事件名应该是纯 JavaScript，而不是 DOM 元素的事件名称。
示例代码：
<button v-on:click="doSomething">点击</button>
3.2 自定义事件
可以使用 $emit 方法触发自定义事件。在父组件中使用 v-on 监听自定义事件。
示例代码：
// www.javascriptcn.com code example
<child-component v-on:customEvent="handleCustom"></child-component>
<script>
new Vue({
methods: {
handleCustom: function (message) {
console.log(message);
}
}
});
</script>结语
以上就是 Vue.js 中的 template 模板语法使用详解，包括指令、表达式和事件绑定。在实际开发中，我们可以根据不同的需求来选择合适的指令和技巧。希望读者能够从中受益，快速掌握 Vue.js 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67be6ba60c976d473a242bf8