vue语法

<template>
  <div id="app">
    <!-- 绑定属性 -->
    <img v-bind:src="imageSrc" alt="Vue Logo">

    <!-- 条件渲染 -->
    <p v-if="showMessage">{{ message }}</p>

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

    <!-- 事件处理 -->
    <button @click="incrementCounter">点击我</button>
    <p>你点击了按钮 {{ counter }} 次。</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      imageSrc: 'https://vuejs.org/images/logo.png',
      showMessage: true,
      message: '欢迎来到 Vue!',
      items: ['苹果', '香蕉', '橙子'],
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter += 1;
    }
  }
};
</script>

<style scoped>
/* 样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. 绑定属性 (v-bind):

   • 使用 v-bind 指令可以动态地将属性绑定到 HTML 元素上。例如，v-bind:src="imageSrc" 将 imageSrc 的值绑定到 <img> 标签的 src 属性。

2. 条件渲染 (v-if):

   • v-if 指令用于根据表达式的真假值来决定是否渲染元素。如果 showMessage 为 true，则会显示 <p> 标签中的内容。

3. 循环渲染 (v-for):

   • v-for 指令用于遍历数组或对象，并生成多个元素。这里它遍历 items 数组并为每个元素创建一个 <li> 标签。

4. 事件处理 (@click):

   • @click 是 v-on:click 的简写形式，用于监听点击事件。当按钮被点击时，调用 incrementCounter 方法，增加 counter 的值。

5. 数据和方法:

   • data 函数返回一个对象，包含组件的状态（如 imageSrc, showMessage, message, items, counter）。
   • methods 对象包含可以在模板中调用的方法（如 incrementCounter）。