vue实现新手教程
Vue 实现新手教程
环境准备
安装 Node.js（建议版本 16+）
运行 npm install -g @vue/cli 安装 Vue CLI
创建项目：vue create my-project 选择默认配置或手动配置
项目结构
src/main.js 是入口文件src/App.vue 是根组件src/components/ 存放自定义组件
基础示例
创建 HelloWorld 组件（src/components/HelloWorld.vue）：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
}
}
}
</script>在 App.vue 中使用：
<template>
<HelloWorld/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
</script>核心概念
数据绑定：{{ }} 或 v-bind（缩写 :）
事件处理：v-on（缩写 @）
条件渲染：v-if/v-else
列表渲染：v-for
运行项目
开发模式：npm run serve
打包生产：npm run build
扩展学习
官方文档：https://vuejs.org/
Vue Router：实现页面导航
Vuex：状态管理
组合式 API：Vue 3 新特性
注意：实际开发时应根据项目需求选择 Options API 或 Composition API 风格。
