南京哪家做网站比较好四川省城乡建设网网站
Vue 简介
Vue 是一个渐进式 JavaScript 框架，用于构建用户界面。其核心特点是轻量级、易上手，同时支持组件化开发和响应式数据绑定。
安装与基础配置
确保已安装 Node.js（建议版本 16+），通过以下命令创建 Vue 项目：
npm init vue@latest
cd your-project
npm install
npm run dev
核心概念与示例
响应式数据绑定
Vue 使用 ref 或 reactive 声明响应式数据。以下是一个计数器示例：
<template><button @click="count++">Count: {{ count }}</button>
</template><script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
组件化开发
组件是 Vue 的核心功能。创建一个子组件 ChildComponent.vue：
<template><p>{{ message }}</p>
</template><script setup>
defineProps(['message']);
</script>
在父组件中使用：
<template><ChildComponent message="Hello Vue!" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>
条件与循环
Vue 通过 v-if 和 v-for 实现条件渲染和列表渲染：
<template><div v-if="show">显示内容</div><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template><script setup>
import { ref } from 'vue';
const show = ref(true);
const items = ref([{ id: 1, name: 'Vue' }, { id: 2, name: 'React' }]);
</script>
事件处理
通过 @click 或 v-on 绑定事件：
<template><button @click="greet">点击</button>
</template><script setup>
function greet() {alert('Hello Vue!');
}
</script>
进阶功能
状态管理（Pinia）
安装 Pinia：
npm install pinia
创建 store：
// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++;}}
});
在组件中使用：
<template><button @click="counter.increment">Count: {{ counter.count }}</button>
</template><script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>
路由（Vue Router）
安装 Vue Router：
npm install vue-router
配置路由：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [{ path: '/', component: Home }];
const router = createRouter({ history: createWebHistory(), routes });
export default router;
在 main.js 中引入：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
调试与优化
- 浏览器工具：安装 Vue Devtools 扩展，便于调试组件和状态。
- 性能优化：使用
v-once或v-memo减少不必要的渲染。
学习资源
- 官方文档：vuejs.org
- 实战项目：参考 GitHub 上的 Vue 模板仓库（如
vuejs/vue-cli）。
通过以上步骤和示例，可以快速掌握 Vue 的核心功能并投入开发。