VUE模板语法-优快云博客

本文深入解析Vue.js中的模板语法，包括文本插值、原始HTML处理、属性绑定及JavaScript表达式的使用。同时，介绍了指令的运用，如v-for、v-if等，并详细解释了如何通过修饰符和参数定制指令行为。

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

VUE中的模版语法是基于HTML的，它将VUE实例中的data以声明式的方式绑定到DOM中去。

一、和插值相关的模版语法

如例子：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  }
})

使用v-html指令

这只能是单个表达式

指令是一些特殊的以v作为前缀的属性。如v-for、v-if。
一些指令还可以接受参数，用“：”后接参数。如：

<a v-bind:href="url"> ... </a>

除了给指令指定参数以外，还可以指定指令的修饰符号，用以表明以某种方式绑定指令。如：

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

v-bind的简写：

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

v-on的简写：

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>