一直显示?点击任意区域即可关闭
个性化配置

模板语法

Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定到底层 Vue 实例的数据。

文本插值

最基本的数据绑定形式是文本插值,即 "Mustache" 语法(双大括号):

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

指令

指令是带有 v- 前缀的特殊属性。

v-bind

用于响应式地更新 HTML 属性:

vue
<template>
  <a v-bind:href="url">链接</a>
</template>

v-on

用于监听 DOM 事件:

vue
<template>
  <button v-on:click="doSomething">按钮</button>
</template>

v-model

在表单输入元素或组件上创建双向绑定:

vue
<template>
  <input v-model="text" />
</template>

缩写

Vue 为 v-bindv-on 提供了缩写:

vue
<template>
  <a :href="url">链接</a>
  <button @click="doSomething">按钮</button>
</template>