当前位置：首页 > VUE

vue模板实现

2026-01-17 02:15:17VUE

Vue 模板实现

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

基本语法

Vue 模板使用 HTML 的模板语法，可以直接在 .vue 文件的 <template> 标签中编写，也可以通过字符串或 DOM 元素定义。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

插值

Vue 模板支持多种插值方式，包括文本插值、原始 HTML 插值和属性绑定。

<template>
  <div>
    <!-- 文本插值 -->
    <p>{{ message }}</p>

    <!-- 原始 HTML 插值 -->
    <p v-html="rawHtml"></p>

    <!-- 属性绑定 -->
    <a :href="url">Link</a>
  </div>
</template>

指令

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

vue模板实现

<template>
  <div>
    <!-- 条件渲染 -->
    <p v-if="show">Visible</p>
    <p v-else>Hidden</p>

    <!-- 列表渲染 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 事件绑定 -->
    <button @click="handleClick">Click</button>
  </div>
</template>

计算属性和侦听器

在模板中可以结合计算属性和侦听器实现复杂逻辑。

<template>
  <div>
    <p>Original: {{ message }}</p>
    <p>Reversed: {{ reversedMessage }}</p>
  </div>
</template>

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

组件化

Vue 模板支持组件化开发，可以通过组件嵌套实现复杂界面。

vue模板实现

<template>
  <div>
    <child-component :prop="value" @event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: 'Data'
    }
  },
  methods: {
    handleEvent(payload) {
      console.log(payload)
    }
  }
}
</script>

动态组件

通过 <component> 标签可以实现动态组件切换。

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA'
    }
  }
}
</script>

插槽

Vue 模板支持插槽机制，用于内容分发。

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <template v-slot:default>Default Slot Content</template>
      <template v-slot:header>Header Slot Content</template>
    </child-component>
  </div>
</template>

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

模板编译

Vue 会将模板编译为渲染函数，也可以直接编写渲染函数。

export default {
  render(h) {
    return h('div', [
      h('p', this.message),
      h('button', {
        on: {
          click: this.handleClick
        }
      }, 'Click me')
    ])
  }
}