vue模版实现

Vue 模板实现

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

基本语法

Vue 模板使用基于 HTML 的语法，可以通过双大括号插值或指令绑定数据：

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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    handleClick() {
      this.message = 'Button clicked!'
    }
  }
}
</script>

指令使用

Vue 提供多种指令用于动态绑定和逻辑控制：

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <input v-model="inputText" />
  </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>

组件通信

模板支持父子组件间的多种通信方式：

<!-- 父组件 -->
<template>
  <child-component 
    :prop-data="parentData" 
    @custom-event="handleEvent"
  />
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ propData }}</p>
    <button @click="$emit('custom-event', payload)">Emit</button>
  </div>
</template>

插槽使用

模板支持插槽实现内容分发：

<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <p>Default slot content</p>
  </child-component>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

动态组件

模板支持动态组件渲染：

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

样式绑定

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

<template>
  <div 
    :class="{ active: isActive }" 
    :style="{ color: textColor }"
  >
    Styled content
  </div>
</template>

Vue 模板的这些特性组合使用可以构建复杂的交互式界面，同时保持代码的可读性和可维护性。