vue模版实现

Vue 模板实现方法

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

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

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Template Example'
    }
  },
  methods: {
    handleClick() {
      alert('Button clicked!')
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

字符串模板 直接在组件选项中定义模板字符串：

new Vue({
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `,
  data() {
    return {
      message: 'Hello from string template!'
    }
  }
})

X-Template 在 HTML 中通过 script 标签定义模板：

<script type="text/x-template" id="x-template-example">
  <div>
    <span>{{ content }}</span>
  </div>
</script>

<script>
new Vue({
  el: '#app',
  template: '#x-template-example',
  data: {
    content: 'X-Template content'
  }
})
</script>

模板语法要点

插值

• 文本插值：{{ value }}
• 原始 HTML：<div v-html="rawHtml"></div>
• 属性绑定：<div :id="dynamicId"></div>

指令

• 条件渲染：v-if, v-else-if, v-else
• 列表渲染：v-for="(item, index) in items"
• 事件处理：@click="handler"
• 双向绑定：v-model="inputValue"

模板最佳实践

1. 保持模板简洁，复杂逻辑应移至计算属性或方法中

2. 避免在模板中直接使用复杂表达式

3. 为列表渲染设置唯一的 key 属性

4. 使用修饰符简化事件处理：

   <input @keyup.enter="submit">

5. 组件通信通过 props/events 实现：

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