当前位置：首页 > VUE

vue模版实现

2026-03-27 23:25:49VUE

Vue 模板实现

Vue 模板是 Vue.js 的核心特性之一，用于声明式地将数据渲染到 DOM。以下是 Vue 模板的实现方式和常见用法。

基本模板语法

Vue 模板使用类似 HTML 的语法，可以直接在 .vue 文件的 <template> 标签中编写：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="handleClick">点击</button>
  </div>
</template>

{{ message }}：双大括号语法用于绑定数据，显示 message 的值。
@click：v-on 的简写，用于绑定事件。

指令的使用

Vue 提供了一系列指令，用于动态操作 DOM：

<template>
  <div>
    <p v-if="showText">显示文本</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <input v-model="inputValue" />
  </div>
</template>

v-if：条件渲染，根据 showText 的值决定是否显示元素。
v-for：列表渲染，遍历 items 数组生成列表。
v-model：双向数据绑定，将输入框的值与 inputValue 同步。

计算属性和方法

在模板中可以调用计算属性或方法：

<template>
  <div>
    <p>{{ reversedMessage }}</p>
    <button @click="reverseMessage">反转消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.reversedMessage
    }
  }
}
</script>

reversedMessage：计算属性，基于 message 动态计算反转后的字符串。
reverseMessage：方法，用于手动触发消息反转。

组件化开发

Vue 模板支持组件化开发，可以通过组件复用代码：

<template>
  <div>
    <ChildComponent :msg="parentMessage" @custom-event="handleEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    }
  },
  methods: {
    handleEvent(payload) {
      console.log('子组件触发的事件:', payload)
    }
  }
}
</script>

ChildComponent：子组件，通过 :msg 接收父组件传递的数据。
@custom-event：监听子组件触发的自定义事件。

动态样式和类

Vue 模板支持动态绑定样式和类：

<template>
  <div>
    <p :class="{ active: isActive }">动态类</p>
    <p :style="{ color: textColor }">动态样式</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

:class：动态绑定类名，根据 isActive 的值决定是否添加 active 类。
:style：动态绑定样式，直接设置 color 属性。

插槽的使用

插槽允许父组件向子组件插入内容：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default>
      <p>插入到默认插槽的内容</p>
    </template>
    <template v-slot:footer>
      <p>插入到具名插槽的内容</p>
    </template>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<slot>：默认插槽，接收父组件传递的默认内容。
<slot name="footer">：具名插槽，接收父组件通过 v-slot:footer 传递的内容。

模板编译

Vue 模板最终会被编译为渲染函数。可以通过 render 函数直接编写渲染逻辑：

vue模版实现

export default {
  render(h) {
    return h('div', [
      h('h1', this.message),
      h('button', {
        on: {
          click: this.handleClick
        }
      }, '点击')
    ])
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
}