vue3 基本使用

Vue 3 提供了多种方式来构建用户界面，包括选项式 API 和 Composition API。下面我将详细介绍 Vue 3 的基本使用和语法，主要集中在选项式 API 上，因为这对于初学者来说更容易上手。

1. 创建 Vue 项目

如果你还没有一个 Vue 项目，可以参考之前提到的方法使用 Vue CLI 创建一个新的项目：

vue create my-vue-app

选择默认配置或根据需要手动选择特性。然后进入项目目录并启动开发服务器：

cd my-vue-app
npm run serve

2. 基本结构

典型的 Vue 项目结构如下：

• public/：存放静态资源。

• src/
  

  ：源代码目录。

  • assets/：放置图片等静态资源。
  • components/：存放可复用的组件。
  • App.vue：根组件。
  • main.js：入口文件，负责初始化应用。

3. 单文件组件 (SFC)

在 Vue 中，单文件组件（Single File Component, SFC）是一种特殊的文件格式 .vue，它允许在一个文件中定义模板、脚本和样式。

示例：HelloWorld.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
.hello {color: #42b983;
}
</style>

这里，<template> 标签定义了 HTML 模板，<script> 标签包含了 JavaScript 逻辑，而 <style> 标签则用于定义样式。scoped 属性确保样式只应用于当前组件。

4. 数据绑定

文本插值

使用双大括号 {{ }} 进行文本插值。

<span>Message: {{ message }}</span>

v-bind 绑定属性

使用 v-bind 或其简写 : 来动态设置元素的属性。

<img :src="imageSrc" alt="Image">

v-model 双向数据绑定

对于表单输入元素，v-model 实现双向数据绑定。

<input v-model="inputValue" type="text">
<p>你输入的是: {{ inputValue }}</p>

5. 事件处理

使用 v-on 或其简写 @ 来监听 DOM 事件，并调用方法。

<button @click="handleClick">点击我</button>

在 <script> 部分定义方法：

methods: {handleClick() {alert('按钮被点击了！');}
}

6. 条件渲染与列表渲染

• v-if 和 v-show 用于条件性地显示元素。
• v-for 用于循环渲染列表。

示例：

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

在 <script> 中定义数据：

data() {return {items: [{ text: 'Item 1' },{ text: 'Item 2' },{ text: 'Item 3' }]};
}

7. 计算属性与侦听器

• 计算属性：通过 computed 定义，基于依赖进行缓存。
• 侦听器：通过 watch 监听数据变化并执行函数。

示例：

export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}},watch: {fullName(newVal, oldVal) {console.log(`fullName changed from ${oldVal} to ${newVal}`);}}
};

8. 组件通信

• Props：父组件向子组件传递数据。
• Events：子组件向父组件发送消息。
• Provide/Inject：祖先组件向后代组件提供数据。

示例：

父组件 ParentComponent.vue

<template><ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from parent'};},methods: {handleChildEvent(message) {console.log('Received from child:', message);}}
};
</script>

子组件 ChildComponent.vue

<template><div><p>{{ message }}</p><button @click="sendToParent">Send to Parent</button></div>
</template><script>
export default {props: ['message'],methods: {sendToParent() {this.$emit('childEvent', 'Hello from child');}}
};
</script>

9. 路由

对于单页应用(SPA)，你需要使用 vue-router 来管理不同页面之间的导航。

安装 vue-router：

npm install vue-router@next

配置路由：

创建 router/index.js 文件：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

在 main.js 中引入并使用路由器：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');