当前位置：首页 > VUE

vue模板实现

2026-03-09 07:15:38VUE

Vue 模板实现

Vue.js 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。以下是 Vue 模板的核心实现方式：

插值

使用双大括号语法进行文本插值，数据绑定到 Vue 实例的 data 属性：

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

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

指令

Vue 指令是带有 v- 前缀的特殊属性，用于响应式地作用于 DOM：

<div v-if="seen">Now you see me</div>

new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

事件绑定

使用 v-on 指令监听 DOM 事件：

<button v-on:click="reverseMessage">Reverse Message</button>

new Vue({
  el: '#app',
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

双向绑定

v-model 指令实现表单输入和应用状态之间的双向绑定：

<input v-model="message">

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

条件渲染

v-if、v-else-if 和 v-else 用于条件性地渲染一块内容：

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

列表渲染

v-for 指令基于一个数组来渲染一个列表：

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

new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' }
    ]
  }
})

计算属性

计算属性基于响应式依赖进行缓存，只在相关响应式依赖发生改变时重新求值：

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

组件

组件是 Vue 最强大的功能之一，允许开发者使用小型、独立和可复用的组件构建大型应用：

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

模板编译过程

Vue 的模板会被编译成渲染函数，这个过程大致分为以下阶段：

解析：将模板字符串解析成抽象语法树（AST）
优化：遍历 AST 标记静态节点，用于后续的 patch 过程优化
生成：将 AST 转换为渲染函数字符串

单文件组件

Vue 单文件组件（.vue 文件）将模板、脚本和样式封装在一个文件中：

vue模板实现

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

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

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