Vue.js 开发核心概念与实践技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47056512/article/details/115768317

本文介绍了Vue.js的基础语法，包括v-if/v-else/v-else-if/v-for指令，v-on/@绑定事件，v-model实现双向数据绑定，以及组件化开发中的v-bind、插槽(slot)和自定义事件。同时，提到了axios用于异步通信，计算属性和路由跳转的概念。此外，还讨论了vue-cli构建工具，vue-router路由管理和vuex状态管理。在UI方面，推荐使用ElementUI，并指导了安装步骤。文章最后简述了vue项目结构，特别是src目录中的components和router子目录，以及如何配置代理和端口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue：

1.基本语法
	条件判断 v-if v-else-if v-else v-for
2.绑定事件 v-on 简写@
3.双向绑定 v-model 简写：
4.vue组件  v-bind 给组件绑定参数，简写：   界面布局
5.axios异步通信（不用ajax）   网络通信
6.计算属性 缓存计算数据 sub() sub  把方法变成了属性
7.插槽slot
8.自定义事件内容分发 组件内部绑定事件需要使用this.$emit(“事件名”,参数);
***以上不涉及路由跳转
***路由跳转v-router

vue-cli脚手架开发

vue-router路由

vuex做状态管理

vue UI：

界面使用ElementUI(饿了么出品)
npm install element -ui -S 安装elementui
npm install 安装依赖
cnpm install sass-loader node-sass --save-dev

两种参数传递方式：

params，props

vue项目的结构

build/ webpack.base.conf.js 文件，是webpack打包的主要配置文件，也是vue项目渲染过程的入口文件。

config/ index.js文件配置了开发环境下npm run dev运行的端口8080，可以修改为其他端口；这个文件也可以修改proxyTable 配置后端接口的代理。

dist 目录是vue项目打包产出物的路径。

node_modules目录下是依赖包，不需要太关注。

src 目录是源码目录，我们的开发工作大部分都是对这个目录下的文件进行修改。其中components 子目录和router 子目录是vue项目的两个核心。