关于Vue.js的语法

---

关于Vue.js的语法，有很多不同的写法和用法，以下是其中的一些常见和常用的写法：

1. 模板语法（Template Syntax）：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

1. 计算属性（Computed Properties）：

<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue.js",
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

1. 条件渲染（Conditional Rendering）：

<template>
  <div>
    <p v-if="isVisible">This is visible</p>
    <p v-else>This is not visible</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

1. 列表渲染（List Rendering）：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
      ],
    };
  },
};
</script>

1. 事件处理（Event Handling）：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert("Button clicked!");
    },
  },
};
</script>

1. 组件（Components）：

<template>
  <div>
    <my-component :prop="message"></my-component>
  </div>
</template>

<script>
import MyComponent from "@/components/MyComponent.vue";

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      message: "Hello from parent",
    };
  },
};
</script>

这只是Vue.js中一些常见的写法，Vue.js还有更多的高级用法和API可以探索。根据具体的应用场景和需求，可以选择适合的写法。

---

原文链接：codingdict.net

---