vue实现模板

Vue 模板实现方法

Vue.js 提供了多种方式实现模板功能，以下是常见的几种方法：

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

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

<script>
export default {
  data() {
    return {
      title: 'Vue Template'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

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

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

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

DOM 内联模板 在 HTML 中直接编写模板：

<div id="app">
  <template id="my-template">
    <span>{{ counter }}</span>
    <button @click="increment">+1</button>
  </template>
</div>

<script>
new Vue({
  el: '#app',
  template: '#my-template',
  data: {
    counter: 0
  },
  methods: {
    increment() {
      this.counter++
    }
  }
})
</script>

渲染函数 使用 JavaScript 的渲染函数创建虚拟 DOM：

new Vue({
  el: '#app',
  render(h) {
    return h('div', [
      h('h1', 'Rendered Title'),
      h('button', {
        on: {
          click: this.handleClick
        }
      }, 'Render Button')
    ])
  },
  methods: {
    handleClick() {
      alert('Button clicked')
    }
  }
})

模板语法特性

插值

<template>
  <span>Message: {{ msg }}</span>
</template>

指令

<template>
  <p v-if="show">Conditional rendering</p>
  <a v-bind:href="url">Bound attribute</a>
  <button v-on:click="doSomething">Event binding</button>
</template>

计算属性

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

条件渲染

<template>
  <div v-if="type === 'A'">Type A</div>
  <div v-else-if="type === 'B'">Type B</div>
  <div v-else>Other Type</div>
</template>

列表渲染

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }} - {{ item.text }}
    </li>
  </ul>
</template>

模板最佳实践

为列表项设置唯一的 key 属性提高渲染性能

避免在模板中使用复杂逻辑，将复杂计算移至计算属性

合理使用 v-if 和 v-show：

• v-if 是真正的条件渲染，会销毁和重建元素
• v-show 只是切换 CSS 的 display 属性

对于频繁切换的元素使用 v-show，运行时条件变化少的用 v-if

使用 v-bind 和 v-on 的缩写形式：

<template>
  <a :href="url">Link</a>
  <button @click="submit">Submit</button>
</template>