vue3语法汇总

以下是 Vue 3 的主要语法要点汇总：

 一、创建 Vue 应用

 使用  createApp  函数创建一个 Vue 应用实例。

import { createApp } from 'vue';

const app = createApp({

  // 组件选项

});

 二、模板语法

 1. 插值表达式：

 - 使用  {{ expression }}  来显示动态数据。

- 例如： <p>Hello, {{ name }}!</p> 。

2. 指令：

 -  v-bind ：用于绑定元素的属性。可以简写为  : 。

- 例如： <img v-bind:src="imageUrl" />  或  <img :src="imageUrl" /> 。

-  v-on ：用于绑定事件。可以简写为  @ 。

- 例如： <button v-on:click="handleClick">Click me</button>  或  <button @click="handleClick">Click me</button> 。

 三、组件定义

 1. 单文件组件（ .vue  文件）：

 - 包含  <template> 、 <script>  和  <style>  三个部分。

-  <template>  中定义组件的模板结构。

-  <script>  中定义组件的逻辑，包括数据、方法、生命周期钩子等。

-  <style>  中定义组件的样式。

2. 组件选项：

 -  data ：返回一个对象，包含组件的数据。

-  methods ：定义组件的方法。

-  computed ：定义计算属性，根据其他数据动态计算得出的值。

-  watch ：监听数据的变化并执行相应的操作。

-  lifecycle hooks ：如  created 、 mounted 、 updated 、 unmounted  等生命周期钩子函数，在组件不同阶段执行特定的逻辑。

 例如：

<template>

  <div>

    <p>{{ message }}</p>

    <button @click="changeMessage">Change Message</button>

  </div>

</template>

<script>

 

import { ref } from 'vue';

export default {

  setup() {

    const message = ref('Hello Vue 3!');

    const changeMessage = () => {

      message.value = 'Message changed!';

    };

    return {

      message,

      changeMessage,

    };

  },

};

</script>

 

<style>

/* 组件的样式 */

</style>

 

 四、响应式系统

 1. 使用  ref  和  reactive  创建响应式数据。

-  ref ：用于包装单个值，使其具有响应性。

-  reactive ：用于包装对象，使其属性具有响应性。

 例如：

import { ref, reactive } from 'vue';

const count = ref(0);

const person = reactive({ name: 'John', age: 30 });

 

 2.  watchEffect  和  watch  监听响应式数据的变化。

-  watchEffect ：立即执行一个副作用函数，并在响应式数据变化时重新执行。

-  watch ：监听特定的响应式数据，当数据变化时执行回调函数。

 例如：

import { ref, watchEffect, watch } from 'vue';

const count = ref(0);

watchEffect(() => {

  console.log(count.value);

});

watch(count, (newValue, oldValue) => {

  console.log(`Count changed from ${oldValue} to ${newValue}`);

});

 五、路由（Vue Router）

 1. 安装和配置 Vue Router。

- 安装： npm install vue-router@4 。

- 配置：创建路由实例，定义路由规则。

 例如：

 javascript 复制

import { createRouter, createWebHistory } from 'vue-router';

const routes = [

  { path: '/', component: HomeComponent },

  { path: '/about', component: AboutComponent },

];

const router = createRouter({

  history: createWebHistory(),

  routes,

});

export default router;

 2. 在应用中使用路由。

- 在 Vue 应用中通过  useRouter  和  useRoute  函数获取路由实例和当前路由信息。

- 使用  <router-link>  组件进行页面导航， <router-view>  组件显示匹配的路由组件。

 例如：

<template>

  <div>

    <nav>

      <router-link to="/">Home</router-link>

      <router-link to="/about">About</router-link>

    </nav>

    <router-view />

  </div>

</template>

 六、状态管理（Pinia）

 1. 安装和创建 Pinia 存储。

- 安装： npm install pinia 。

- 创建存储：使用  defineStore  函数定义一个存储。

 例如：

import { defineStore } from 'pinia';

const useCounterStore = defineStore('counter', {

  state: () => ({

    count: 0,

  }),

  actions: {

    increment() {

      this.count++;

    },

  },

});

export default useCounterStore;

 2. 在组件中使用存储。

- 通过  useStore  函数获取存储实例，并调用存储中的方法和访问状态。

 例如：

<template>

  <div>

    <p>Count: {{ store.count }}</p>

    <button @click="store.increment">Increment</button>

  </div>

</template>

<script>

import { useCounterStore } from '@/stores/counter';

export default {

  setup() {

    const store = useCounterStore();

    return {

      store,

    };

  },

};

</script>

 七、组合式 API（Composition API）

 1. 在  setup  函数中组织组件的逻辑。

-  setup  函数接收  props  和  context  作为参数，并返回一个对象，其中包含组件的响应式数据、方法等。

 例如：

<template>

  <div>

    <p>{{ message }}</p>

    <button @click="changeMessage">Change Message</button>

  </div>

</template>

<script>

import { ref } from 'vue';

export default {

  setup(props, context) {

    const message = ref('Hello Vue 3!');

    const changeMessage = () => {

      message.value = 'Message changed!';

    };

    return {

      message,

      changeMessage,

    };

  },

};

</script>

 2. 可以在不同的组件中复用逻辑。

- 将可复用的逻辑提取到独立的函数或模块中，然后在多个组件的  setup  函数中调用。

 例如：

// utils.js

export function reusableLogic() {

  const data = ref('Some reusable data');

  const method = () => {

    console.log(data.value);

  };

  return {

    data,

    method,

  };

}

<template>

  <div>

    <p>{{ reusableData }}</p>

    <button @click="reusableMethod">Call Reusable Method</button>

  </div>

</template>

<script>

import { reusableLogic } from './utils.js';

export default {

  setup() {

    const { data, method } = reusableLogic();

    return {

      reusableData: data,

      reusableMethod: method,

    };

  },

};

</script>