02 - Vue入门：模板语法-优快云博客

本文链接：https://blog.youkuaiyun.com/suibianba554/article/details/82941145

本文深入探讨Vue.js模板语法的细节，包括插值、v-html、v-once、JavaScript表达式的应用，以及v-bind和v-on指令的使用。通过实例讲解如何在Vue中处理HTML文本、事件监听和数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板语法

插值，遵循Mustache语法
```
    <h1>{{ message }}</h1>
    ```
```
输出原始的HTML文本，需要使用到 v-html 指令
```
	<div id="app">
		原始的HTML文本：{{ rawHtml }}
		<span v-html="rawHtml"></span>
	</div>
```
其中{{ rawHtml }} 被渲染为一段文本，而包含v-html属性的标签被渲染为HTML。
v-once 指令作用在标签属性上，表示该标签内的插值只会被渲染一次
插值中可以使用JavaScript表达式，例如：三目运算、++、–、字符串处理函数
由于插值不能作用与HTML标签的属性上，所以需要使用v-bind指令，将数据绑定到标签的属性上
```
<div v-bind:id="eleId"></div>
<script>
	var app = new Vue({
        ...
        data: {
            eleId: "content"
        }
	})
</script>
```
这样<div>标签的id属性就与eleId变量之间建立了双向绑定关系。

v-on 指令用来监听DOM事件

<button v-on:click="handleClick"></div>
<script>
	new Vue({
        ...
        methods: {
            handleClick: function () {
                // do something
            }
        }
	})
</script>

对于<button>上的单击事件就会触发handleClick()函数的执行。

修饰符

用来指示指令应该以一种特殊的方式绑定

<form v-on:submit.prevent="handleSubmit"></form>

.prevent 修饰符指示在触发submit事件的时候，执行 event.preventDefault()

v-bind 和 v-on 指令的语法糖

v-bind:id='eleId' === :id='eleId'
v-on:click='handle' === @click='handle'