当前位置：首页 > VUE

vue模版实现

2026-02-10 13:37:00VUE

Vue 模板实现

Vue 模板是 Vue.js 的核心特性之一，用于声明式地将 DOM 绑定至底层 Vue 实例的数据。以下是 Vue 模板的实现方式及常见用法。

基本语法

Vue 模板使用 HTML 语法，通过插值、指令等方式实现数据绑定和逻辑控制。以下是一个简单的 Vue 模板示例：

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

对应的 Vue 实例：

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

指令

Vue 提供了一系列指令，用于实现动态绑定、条件渲染、循环等功能。

v-bind 动态绑定 HTML 属性：

<div v-bind:class="{'active': isActive}"></div>

v-model 实现表单输入的双向绑定：

<input v-model="message" type="text">

v-if/v-else 条件渲染：

<div v-if="seen">Now you see me</div>
<div v-else>Now you don't</div>

v-for 列表渲染：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

计算属性

在模板中使用计算属性可以简化复杂逻辑：

new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

模板中使用：

<div>{{ fullName }}</div>

事件处理

通过 v-on 指令绑定事件：

<button v-on:click="greet">Greet</button>

对应的 Vue 实例方法：

new Vue({
  methods: {
    greet() {
      alert('Hello!')
    }
  }
})

插槽

Vue 模板支持插槽，用于组件内容的分发：

<my-component>
  <template v-slot:header>
    <h1>Header</h1>
  </template>
</my-component>

动态组件

使用 <component> 标签实现动态组件：

<component :is="currentComponent"></component>

模板编译

Vue 会将模板编译成渲染函数，最终生成虚拟 DOM。可以通过以下方式使用模板：

字符串模板：直接在 Vue 实例中定义 template 选项
单文件组件：使用 .vue 文件，包含 <template> 标签
内联模板：使用 DOM 内联模板

单文件组件示例

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>