Vue模板：展现内容

2023-10-17 15:15:28

Vue模板简介

Vue模板是一种用于在Vue组件中展示内容的特殊语法。它允许您使用HTML代码来定义组件的结构和内容。Vue模板有三种不同的写法：

写在html里
写在选项里
写在xxx.vue文件里

写在html里

这是最简单的一种写法。您可以在任何HTML元素中使用v-template指令来定义Vue模板。例如，以下代码定义了一个简单的Vue模板，用于展示一个计数器：

<div id="app">
  <h1>计数器</h1>
  <p>计数：{{ count }}</p>
  <button v-on:click="increment">+</button>
</div>

写在选项里

您还可以在Vue组件的template选项中定义模板。例如，以下代码定义了一个简单的Vue组件，用于展示一个计数器：

export default {
  template: '<div><h1>计数器</h1><p>计数：{{ count }}</p><button v-on:click="increment">+</button></div>',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

写在xxx.vue文件里

最后，您还可以将Vue模板写在一个单独的.vue文件中。例如，以下代码定义了一个简单的Vue组件，用于展示一个计数器：

<template>
  <div>
    <h1>计数器</h1>
    <p>计数：{{ count }}</p>
    <button v-on:click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

展示内容

无论您使用哪种写法，Vue模板都可以用来展示组件的数据和状态。例如，以下代码展示了一个Vue组件，该组件使用count数据来显示一个计数器：

<template>
  <div>
    <h1>计数器</h1>
    <p>计数：{{ count }}</p>
    <button v-on:click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>