vue 语法

<template>
  <div id="app">
    <!-- 绑定数据到HTML元素 -->
    <p>{{ message }}</p>

    <!-- v-bind 指令用于动态地绑定一个或多个属性，或一个组件 prop 到表达式 -->
    <a v-bind:href="url">链接</a>

    <!-- v-on 指令用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码 -->
    <button v-on:click="incrementCounter">点击我</button>

    <!-- v-for 指令基于源数据多次渲染元素 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- v-if 指令根据表达式的值的真假条件性地渲染元素 -->
    <p v-if="seen">现在你看到我了</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      url: 'https://vuejs.org',
      counter: 0,
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ],
      seen: true
    };
  },
  methods: {
    incrementCounter() {
      this.counter += 1;
      console.log('点击次数:', this.counter);
    }
  }
};
</script>

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

解释说明

• {{ message }}：使用双大括号语法将 data 中的 message 数据绑定到 HTML 元素中。
• v-bind：用于动态绑定属性（如 href），可以根据 data 中的数据变化自动更新。
• v-on：用于监听事件（如按钮点击），并在事件触发时执行指定的方法。
• v-for：用于遍历数组并渲染列表。key 属性是必需的，用于提高性能和确保组件内部状态的稳定性。
• v-if：根据布尔值条件性地渲染元素。

以上示例展示了 Vue.js 的基本语法和常用指令。