vue template详解

<template>
  <div id="app">
    <!-- 文本插值 -->
    <p>{{ message }}</p>

    <!-- 绑定属性 (v-bind) -->
    <img v-bind:src="imageSrc" alt="Vue Logo">

    <!-- 条件渲染 (v-if, v-else-if, v-else) -->
    <p v-if="seen">现在你看到我了</p>
    <p v-else>现在你看不到我</p>

    <!-- 列表渲染 (v-for) -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>

    <!-- 事件处理 (v-on) -->
    <button v-on:click="incrementCounter">增加</button>
    <p>按钮点击次数: {{ counter }}</p>

    <!-- 表单输入绑定 (v-model) -->
    <input v-model="message" placeholder="编辑我">
    <p>消息是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      imageSrc: 'https://vuejs.org/images/logo.png',
      seen: true,
      items: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ],
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter += 1;
    }
  }
};
</script>

<style scoped>
/* 示例样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

解释说明

1. 文本插值：{{ message }} 用于在模板中显示数据对象中的 message 属性。
2. 绑定属性：v-bind:src="imageSrc" 动态绑定 img 标签的 src 属性到 imageSrc 数据属性。
3. 条件渲染：v-if, v-else-if, v-else 用于根据条件显示或隐藏元素。
4. 列表渲染：v-for 指令用于遍历数组并生成列表项，:key 是为了提高性能和确保唯一性。
5. 事件处理：v-on:click="incrementCounter" 用于监听按钮点击事件，并调用 incrementCounter 方法。
6. 表单输入绑定：v-model 实现双向数据绑定，将用户输入与组件的数据属性同步。

以上代码展示了 Vue.js 中常用的指令和功能。