Vue _总结
文章目录
-
- 一 Vue介绍
-
- 1 什么是Vue.js
- 2 MVVM
- 二 第一个例子
-
- 1 引入vue
- 2 html中用法
- 3 创建vue实例对象
- 三 Vue基本语法
-
- 1 v-text
- 2 v-bind
- 3 v-on
- 4 v-model
- 5 v-if
- 6 v-for
- 7 计算属性
- 8 组件化
-
- 全局注册
- 本地注册
- 9 生命周期
- 10 员工程序使用vue.js重构
-
- list.html
- add.html
- update.html
- 四 使用vue-cli搭建Vue项目
-
- 1 node.js的安装
-
- 设置npm的源
- 安装cnpm(可选)
- 查看配置
- 2 安装vue-cli
-
- 安装vue-cli后的检测
- 使用create命令创建项目
- 运行项目
- 访问测试
- 可视化方式创建
- 运行页面
- 3 项目结构
- 4 .vue文件
- 5 路由
-
- 安装路由模块
- 修改HelloWorld.vue
- 新增EmployeeList.vue
- 新建静态路由表
- 引入路由模块
- App.vue
- this.$router
- 6 父子组件间传参
-
- 父传子
-
- 父组件
- 子组件
- 子传父
-
- 父组件
- 子组件
- 7 Axios
-
- 安装
- 引入方式
- 语法
-
- get提交
- post提交
- 8 Vuex
-
- Vuex五大核心要素
- Vuex工作流程
- 安装Vuex
- state
-
- 新建store目录，在其中新建index.js
- 在main.js中导入
- 在组件中使用state
-
- 1）this.$store.state
- 2）计算属性
- 3）mapState
- mutations
-
- store/index.js中定义mutations
- 组件中使用mutations
-
- 1）this.$store.commit
- 2）mapMutations
- actions
-
- store/index.js中定义actions
- 组件中使用actions
-
- 1）this.$store.dispatch
- 2）mapActions
- getters
-
- store/index.js中定义getters
- 组件中使用getters
-
- 1）this.$store.getters
- 2）mapGetters
- 9 综合练习
-
- 重构员工程序
- main.js
- App.vue
- EmployeeList.vue
- EmployeeAdd.vue
- EmployeeUpdate.vue
- 路由表
- 附录
-
- Visual Studio Code
-
- 安装插件
- 配置
- 快捷键
- ES6 基本语法
-
- let声明变量
- const声明常量（只读变量）
- 解构赋值
- 模板字符串
- 声明对象简写
- 对象拓展运算符
- 箭头函数
- 模块化
- idea中安装vue插件
- 浏览器安装vue devtools插件
- Webpack
- 安装vue-cli旧版本（了解）
-
- 安装vue-cli后的检测
- 设置npm的源
- 使用init命令创建项目
- 运行项目
- 项目结构
- 修改端口号
- 显示侧边栏
- 执行脚本
- 通过vue-admin-template编写前端项目
-
- 执行项目
- 配置前端代理
- 修改调用后台的接口
- request.js修改
-
- 请求拦截器
- 响应拦截器
- 员工管理
-
- 页面
- 定义调用的后台接口
- 修改菜单项名称
- VUE3
-
- 安装vite
- 创建项目
- 定义变量和方法
-
- vue3兼容vue2的写法
- vue3的写法1
- vue3的写法2
- 生命周期函数
一 Vue介绍
1 什么是Vue.js
Vue 是目前很火的一个前端框架，用于构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
https://cn.vuejs.org/
2 MVVM
Vue使用MVVM架构，将前端的视图层，分为三部分 Model, View , ViewModel
MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。
