前端02.vue学习笔记

02.vue 详细学习（bilibili视频codewhy老师+尚硅谷教学视频汇总）

● 排版和图片若有问题请直接查看此网址 点我

问题汇总

● 1.vue何时是字符串 何时是变量

加单引号是字符串 不加单引号是变量

● 2.字面量增强写法

● 3.组件名千万不可大写

v-bind不支持大写

驼峰标识需要更换为-+ 小写

● 常见框架

● vue

● react

● Anjular

● 00-ES6补充

● 01-块级作用域

● var无块级作用域 如if for 仅function内部可以有块级作用域（不受外部控制） 容易出现命名冲突的情况

● ES6中的let是有块级作用域的

● 写法1：ES5 var错误写法1

● 写法2：ES5中使用闭包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NEnS0Wrn-1621664285094)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image461.gif)]

● 写法3：块级作用域 使用let代替varjik=5

● 02-const赋值（定义对象的话内部属性可以修改）

●

● 01-03 vue初体验 插件（json_handle**）+vue基础指令**

● 01.理解vue的框架核心

● 01.MVVM

●

● 02.vue MVVM 数据驱动视图

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdHetk4c-1621664285100)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image461.gif)]

● 02.简单导入vue 编写一个Helloworld （数据以对象定义 组件化中数据必须以函数方式定义 函数以key:function的方式定义）

● 遇到的问题

● 1.挂载时vue路径不对 需要手动导入js文件？

● 2.el挂载id时需要添加#号

● 01.导入Vue(区分大小写) + 新建类 new vue const+let定义变量 el定义作用域

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zZbJnD0i-1621664285103)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image461.gif)]

● 02.vue优势 原始html;网页 命令式 vue:声明式（可以做到div 和 javascript的分离） vue响应式 （改代码 界面自动换）

● 03.总结

●

● 03.vue列表实例

● 04.vue计数器实例（涉及函数的定义与调用+vue中this指向）

● 01.文字总结

●

● 02.实现代码（附加代理的概念）

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HoKEopWy-1621664285109)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image002.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-geOHMNLq-1621664285111)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image002.gif)]

● 05.vue中的option可填充选项

● 对象里的函数都是方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l5UMHIAi-1621664285112)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image002.gif)]

● 06.vue的生命周期

● 定义：一个生命从诞生到结束 很多过程函数以回调函数的方式触发 也叫钩子函数

● 调用的位置

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sEbJrmi5-1621664285114)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image475.gif)]

● 03.常用的

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMiAcccb-1621664285115)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image475.gif)]

● 07.vue基础指令

● 01.胡子指令 Mustache

● {{}}

● 02.v-once指令 {{}}只执行一次

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ka9LcAsM-1621664285117)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image475.gif)]

● 03.v-html 解析指令

●

● 04.v-text 对比{{}}不太灵活

●

● 05.v-pre 原封不动的解析指令

●

● 06.v-cloak 当成一种属性来用 cli里面基本用不到

●

● 07.v-bind 动态绑定属性 （字符串=变量）

● 1.特殊属性

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZxtsVNL-1621664285141)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image012.gif)]

● 2.绑定class 通过对象的方式进行类的管理 {}里面-------对象语法 （嫌弃写的长的话 可以放入methods里 return）

● v-bind:class="{‘pictureGray’: isTop}"

● 3.绑定class 数组语法 用的比较少–因为属性只能写死（很多情况下用于组件化得样式定制）

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7KCfik9V-1621664285150)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image012.gif)]

● 4.绑定样式 --------对象语法

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8HzyYZMa-1621664285152)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image012.gif)]

● 5.绑定样式 --------数组语法

●

● 08.总结

●

● 04-计算属性compute

● 01-基础使用

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QQpqrbXy-1621664285162)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image062.gif)]

● 02-复杂使用（for循环遍历）

●

● 03-计算属性的set和get

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lnSCEd2V-1621664285172)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image062.gif)]

● 04-计算属性的缓存（与method的区别 多次使用时 只会调用一次）

● 计算属性只有在数据变化的时候才会变化

● 05.使用实例

●

● 04-.监听属性watch

● 05-事件监听 v-on 遗漏 监听函数时传入的参数问题（event $）

● 02事件冒泡 修饰符

● 01阻止事件冒泡 .stop

● divcliclik在按钮按下不会触发

● 02阻止默认事件 .prevent

●

● 03监听按键按下 .keyup.enter

●

● 04 once修饰符

●

● 06-条件判断 v-if

● 01-v-if基础使用

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Imqz9gOt-1621664285184)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image064.gif)]

● 02-v-if和v-else结合使用

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EPs0yqG6-1621664285187)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image064.gif)]

● 03-v-if和v-else-if和v-else的结合使用

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ne3pKNyj-1621664285190)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image064.gif)]

● 04-做一个动态切换的界面

●

● 05-处理一些小问题

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A4O5DS3I-1621664285194)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image018.gif)]

● 06-v-show的使用 切换频率高的话 用 v-show

●

● 07-循环遍历 +splice****数组操作

● 01-v-for遍历数组

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTzqz9cg-1621664285202)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image094.gif)]

● 02 v-for遍历对象

●

● 03-v-for使用过程添加key splice

● 1.语法 splice

● 数组增加元素 .push(最后部分添加)

●

● 中间插入元素 splice

● 1.删除元素

●

● 2.增加元素

● 第二个序号需要为0

●

● splice函数的特性

● 总而言之 第一个参数决定位置 第二个参数决定删除几个元素 第三个参数决定替换的参数

● 插入元素 虚拟dom的格式 以及增加key后插入元素的方式有所区别

●

● 3.一些响应式和非响应式的方法

●

● 课程作业 按键切换样式 用v-for和：style实现

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t48ucsAy-1621664285218)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image088.gif)]

● 08-购物车案例

● 写基本样式

● table

●

● toFixed(2)取小数后两位

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tDuf8Z4m-1621664285223)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image088.gif)]

● 过滤器取小数点后两位

● filters

● 对数组对象里面的某个数据进行修改-----传参法

●

● 按钮按下不能触发

●

● 删除对象指定的一列

● 这里的index是0 开始的 index+1为id

● 计算属性 + for循环 计算总价

●

● 增强for循环

●

● 高阶函数

● 三个基础的案例

●

● filter/map/reduce

● filter**----------**对数组内元素进行批量过滤

●

● map—对数组内元素进行批量操作

●

● reduce

●

● 优势 一行代码完成所有

●

● 09-表单绑定 双向绑定的体现

● 01-v-model的基础使用 v-text

●

● 02-v-model的原理

● v-model为用户所做的两个步骤

● 1.数据绑定界面 2.界面绑定数据

●

● 2.简写方式

●

● 03-v-model结合radio类型使用

● 01-写一个男女互斥的选择radio

●

● 02-使用v-model绑定按钮 当选择的按钮按下后 v-model绑定的数值进行更新 （1.input 如果绑定了同一个v-model name无需一致即可完成选择radio的互斥）（2.默认为男（给sex的值添加一个初始数值"男"））

●

● 04-v-model结合checkbox类型

●

● 05-v-model绑定select类型

●

● 06- 04的拓展 值绑定-----简写

●

● 07-v-model 修饰符 (对输入的数据进行相应改动)

● lazy

●

● number

●

● trim

● 去除空格

●

● 10-组件化+组件间的通信

● 组件化的概念 组件注册的步骤

● 组件化的一般概念 降低页面间的耦合度

●

● vue组件化的思想—组件的划分（组件树）

●

● 组件注册的步骤

●

● 01注册一个全局组件并使用 使用vue.extend的方式 一般已经不用

●

● 02 全局组件（可在多个实例同时调用）与局部组件（在实例中定义）的对比 一般创建局部组件即可，毕竟只有一个实例

●

● 03-父组件和子组件的概念（父组件不会自动调用子组件）

●

● 04-组件的语法糖注册方式 (省去了extend步骤 直接组注册时将模板写好)

● 语法

●

● 代码

● 之前

● 语法糖写法

● 05-组件模板的分离写法 目的是script中不写html标签

●

● 06-组件中数据的存放问题

● **01.**现有问题 vue组件无法访问顶层实例的数据 因为如果可以访问，代码会变得臃肿

●

● 02.**解决思路 需要创建一个数据函数** 返回一个对象 对象中有各种属性

● 用意 数据如果不写成函数的形式 则不同组件间数据会相互调用

●

● 07-组建中的data为什么是函数 （对于06的补充）

● 当写成对象时 不同组件调用数据时，数据间会相互影响 写成函数的话每次返回一个实例对象 定义的每个组件都有自己的一个空间

● 微信回答

● 为什么组建中的data是一个函数：如果data是一个对象，那么每次这个组件被调用的时候，使用data中的数据时，就相当于返回了data这个对象，这样每个组件内存中的指向都这个data对象，他们的指针是一样的，这时候改变任意一个组件，其他组件中的数据也会被更改，这是我们不希望看到的。而当data是一个函数，每次使用这个组件中的data，就相当于调用了这个data函数，而函数每次被调用时内存中都会开辟一个新的地址，而每个组件都指向不同的地址，所以改变任意一个组建的data，不会影响到别的组件的data，这才是我们希望看到的。

● 08-组件通讯 父组件向子组建传递数据 （一般props使用对象写法）

● 01-应用场合及原理+使用实例

●

● 02-cli式写法

● 子组件需要添加props

● 09-组建通信-父传子（props中的驼峰标识 对于08的补充 貌似没啥用）

● 3.组件名千万不可大写

● v-bind不支持大写 现在的版本貌似以及支持

● 驼峰标识需要更换为-+ 小写

● 10-组件通信-子传父

●

● 11-组件通信-父子组建通信案例（子组件不能跨过父组建去修改props里的数值 会爆错）

● 完成一个实例 子组件将input输入的数值传入父组件并且谢修改父组件中的值

● java数据转换 转换为数字 *一个数字 方法2 parseFloat

● 12-组件通信-父子组件通信案例（watch实现 watch可用于监听某个属性的改变）

●

● 13****组件访问-父访问子-$children和$ref（引用） 一般用于父组件访问子组件中的方法

●

● 14组件访问-子访问父-parent-root

●

● 11-组件化高级—slot插槽（父组件改变子组件的渲染形式）

● 01-slot-插槽的基本使用 让封装的组件具有扩展性—结构一致，内容不同

● 作用域插槽slot

● 02-slot-具名插槽的使用

●

● 03-如何判断编译的作用域

●

● 04-作用于插槽的案例

●

● 12-前端模块化

● 01-为什么要有模块化

● 很大程度上规避变量重名和函数重名问题

● 02-ES6的模块化实现

● import export

● 导出exoprt

●

● 导入import

●

● 13-webpack的使用

● 01-webpack的起步

●

● 02-webpack的配置

●

● 2.1.使用不同的规范进行文件调用

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VxUTBgdb-1621664285341)(https://gitee.com/xue_jin_tao/cloud_/raw/master/img/clip_image230.gif)]

● 03-webpack的loader 处理样式等加载文件的打包

●

● 04-webpack配置vue

● 05-webpack的Plugin

● Plugin:插件

● 增加版权信息的说明

● 14.vuecli2.0+vuecli3.0 的使用（创工程）

● 01.the oled

● vue cli运用概念与安装步骤

● 3种安装方式

●

● 脚手架npm引入的方式

● 01.安装node 集成npm

● https://www.cnblogs.com/xuhuale/p/10167159.html

● 02.安装vuecli

● 上官网教程即可

● 拉取vuecli2,0

●

● 不同版本的初始化方式

●

● 创工程步骤 做毕设时的版本

https://www.bilibili.com/video/BV15741177Eh?p=150

● 1.vue create my-bishe 空格取消

●

● 2.选择配置

●

● 3独立配置参数

●

● 4.一路确认

● 5.运行代码

● npm run serve

● 目录解析

●

● 安装 element

● vue add element

https://www.jianshu.com/p/4014c68fa05e

●

● 清除不必要的文件 最终

●

● 01.vuecli2.0创工程步骤 7.30日复习

● 01.基础信息配置 项目名称等

●

● 02.编译方式

●

● 03.是否配置路由

●

● 04.是否对代码进行限制

●

● 05.是否对代码添加单元测试

●

● 06.是否采用端到端测试

●

● 07.选择编译管理的工具

●

● 汇总

●

● 02.对于创建的工程的目录的大致框架解析

●

● 03.Runtime Compiler和 Runtime-only的区别

●

● 02.vuecli 3.0

● 01.vuecli3.0****创工程的步骤 vue create my-bishe

● 01.选择自动配置还是手动配置

●

● 02.空格键控制选中取消某个选项

●

● 2.选择配置

●

● 3独立配置参数

●

● 4.一路确认

● 5.运行代码

● npm run serve

● 目录解析

●

● **02.**对于vuecli3.0的目录解析

●

● 15 .认识vuecli3 包含vue router

● 01 main.js-----函数代码入口

●

● 02 vue.configure-----独立配置参数

●

● 03 关于 vue-cli路由（网页路径的切换 = 组件的切换）

● 01.什么是路由 路由的概念

● 通过互联的网络将网络信息从原地址传输到目的地址

● 02.前端渲染和后端渲染的区别

●

● 03.路由的作用

●

● 04.如何实现页面跳转但是页面不刷新

● 01.hash方式

●

● 02.history方式

● 01.history.pushState方式进行网页跳转

●

● 02.history,replaceState方式进行网页跳转 不可退回

●

● 03.history.go（）方式很像网页跳转

●

● 05.认识vue-router

●

● 06 如何使用vue路由

● 01.文字+ppt

●

● 02.实际调用方式

● 01-创建路由组件（router或者 index文件的写入方式 会在mainjs调用）

●

● 02-配置路由映射关系：组件和路径映射关系 通过配置一个对象中的属性实现

●

● 03-使用路由 router-link（位置 App.vue 因为div="app"在这里）

●

● 04-使用小技巧 让登录后第一个界面显显示的是我们想要指定的一个界面------重定向

●

● 05-使网站输入从hash变为history

●

● 06-使用router属性修改跳转的页面的的方式

●

● 07.动态路由 主界面根据不同的点击跳转界面时，跳转后的界面获取一些数据信息（传递参数方式1 params）

● 01.创建路由

●

● 02.路由在app.vue跳转时拼接id

●

● 03.跳转后的页面获取ID

●

● 08.$route和$router的区别

● 01.$router是定义路由时new出来的整个大的对象

●

● 02.$route是当前处于活跃的路由对象，可以获取当前网页所选中的一些参数

● 09.路由的懒加载

● 01.文字说明

●

● 02.懒加载的代码写法—就是在内部import组件

●

● 10-路由嵌套

● 01.认识路由嵌套 引用场景

●

● 02.代码具体实现

● 01.新建并编写组件

● 02-编写路由映射路径 children关键词 后面跟数组

●

● 02-对应的父组件需要添加routerview APP中的router-view展示的是第一层路由

●

● 03-为子路由添加默认展示的界面

●

● 11-路由跳转时传递参数方式2（query）有大量的参数的方式进行传递，因为用到了对象

● 01.在父级router-link直接传入需要的参数

●

● 02.待跳转的组件 获取方式

●

● 03.使用方法函数的方式跳转

●

● 12.$route和$router的区别 加强版

● 01.看源码 看 this.$router的use（install）等调用方式

● 02.对一个函数添加方法 prototype

●

● 13-路由导航守卫 可以搭配生命周期函数使用

● 01.一些常用的生命周期函数

●

● 02.使用created生命周期函数修改网页的标题 document.title

●

● 03.使用全局导航守卫动态改变网页标题（使用前置钩子 每个路由跳转时都会调用全局导航守卫）

●

● 04.组件内守卫+

●

● 14.keep-alive

● 01.keep-alive文字描述

●

● 02.代码实现

●

● 04-组件文件分布

● components内部写一些公共的部分

● views创建一些独立的界面

● 16-箭头函数

● 01.基础写法

●

● 02.简写

● 01.参数只有一个 前面参数括号可以省略

●

● 02.语句只有一个 后面大括号可以省略 同时代码会自动return 没有返回值（比如consol.log）的时候返回undefine

●

● 03.箭头函数中的this、function函数中的this以及setTimeout()中的this

● windows.setTimeout 箭头函数的this固定指向上层对象 JS中函数属于一等公民 也属于对象

● 解析对比

● 出题

● .特质 ：函数的另外一种写入方式 同时当函数参数为1或者执行语句为1时有简化的写入方式

● 阶段总结

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FbyP7Yp-1621664285471)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image409.gif)]

● 17-promise异步封装

● 01-promise的基础使用

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p4F45NmC-1621664285472)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image411.gif)]

● 02-promise的另外处理形式

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oEFPT0Dn-1621664285473)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image413.gif)]

● 03-promise的链式调用（一）

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6xw2aVGy-1621664285475)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image415.gif)]

● 04-promise的链式调用（二）-----简写

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8bywJ1CV-1621664285476)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image417.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-guo2z1FT-1621664285478)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image419.gif)]

● 05-Promise的all方法使用

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Ns4EteC-1621664285479)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image421.gif)]

● 18-vuex状态管理

● 01.使用方式

● 00.vuex的作用 文字叙述

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c3i49Wd5-1621664285480)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image423.gif)]

● 01.安装vuex插件

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZyAx9oET-1621664285481)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image425.gif)]

● 02.创建一个store的文件夹 并对vuex插件进行对象创建和导出

●

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kYIU7MNH-1621664285482)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image427.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDCMPRXR-1621664285484)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image429.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sx1RkmN4-1621664285485)(…/AppData/Local/Temp/msohtmlclip1/01/clip_image431.gif)]

● 03.store对象中放入的数据 5个重要数据

● 01.state 定义可供多个组件共享的全局变量

● 01.基础数据定义

●

● 02.对state中变量的改变 方式1 不推荐

●

● 03.对state中变量的改变 mutations方式 方式2推荐

● 02.mutations 作用：修改state中的数据，同时被devtools监听

● 01.mutations函数定义方式

●

● 02.组件中调用mutations函数的方式 commit方式

●

● 03.mutations传参 （在提交commit的时候，不仅触发mutations中定义的函数 同时传入参数）

● 00.文字说明 mutatins配置有payloads

●

● 01.组件中方法函数中的写法

●

● 02.store中mutations属性的写法

●

● 04.mutations特殊的提交风格

● 01.组件中的函数提交

●

● 02.store中函mutations的定义

●

● 05.mutations响应规则

● 01.在store中定义好的变量或者属性 都具备响应式原理

●

● 02.组件中自己使用方法函数新建的数据不具备响应式原理

●

● 03.该问题的解决思路 使用splice或者Vue.set方法

●

● 04.删除属性

●

● 07.mutations的常量 马甲传入参数

●

● 08.mutations当中如果写异步函数 不会被记录在devtools当中 需要使用actions

●

● 03.actions 异步操作 类似于mutations 在mutations前面多一层调用

● 01.actions的定义方式

●

● 02.actions的使用方式

●

● 03.actions传递参数

● 01.组件中的写法

●

● 02.store中的写法

●

● 04.actions参数修改成功后，返回一个回调

● 01.promise写法

● 01.组件写法

●

● 02.store定义actions时的写法

●

● 04.getters 类似计算属性

● 01.函数定义

●

● 02.函数调用

●

● 03.对数据进行过滤等操作 也可用到getters

●

● 04.可以getters函数调用前面定义的函数

●

● 05.gettrs函数传参

● 01.问题，getters参数固定 第一个参数是state 第二个参数是getters 第三个即使写参数也不起作用

●

● 02，返回一个函数 进行传参(重点 getters不是函数 计算属性的本质是访问器属性)

●

● 05.modules 避免state过于臃肿

● 01.文字说明

●

● 02.modules中state的使用

● 01.store中的数据定义

●

● 02.组建中的变量使用

●

● 03.modules中mutations的使用

● 01.store中的mutations函数定义

●

● 02.组件中的函数使用

●

● 04.modules中getters的使用

● 01.store中的定义方式

●

● 02.函数中的调用方式

●

● 03.module中的getters函数调用其他模块的函数

● 01.函数在store中的定义方式

●

● 02.函数在组件中的使用方式

●

● 05.modules中actions的使用

● 01.store中的函数定义

●

● 02.组件中的使用和之前一致

● 04.actions参数获取的另外一种写法

● 01.对象解构写法

●

● 02.对象的解构概念

●

● 02.分离重构store代码

● 01.state变量定义建议不抽离新的文件

●

● 02.mutations的抽离

● 01.新建一个mutations的文件

●

● 02.将之前定义的函数全部exportdefault

●

● 03.将文件导入

●

● 04.字面量增强写法导入

●

● 03.actions的抽离与mutations一致

● 04.getters的抽离与mutations一致

● 05.modules的抽离

● 01.新建文件夹

●

● 02.导入文件夹内的moduleA

●

● 03.模块的导入不变

●

● 代码规范

● 缩进：2个空格比较合适（java套层比较多）

● vue设置代码段

● 19.网页实战

● 01.TabBar实现

● 01.注意代码的移植性和扩展性

● 02.添加全局样式修改

● 01.新建文件 写样式

●

● 02.main.js引入require—方式1 不推荐

●

● 03.直接在main.js里写style 方式2 不推荐

●

● 04.在css文件中引入文件 @关键词 方式3 推荐

●

● 05.弹性布局编写侧边栏（直接写在app.vue中即可）

●

● 06.侧边栏放在最下端

●

● 07.添加阴影

●

● 03.封装文件

● 01.内容抽离

●

● 02.导入组件并注册使用

●

● 04.添加图片

● 01.目录划分

●

● 05.插槽增加代码复用性

● 06.组件创建在多个文件夹

●
1664285516)]

● 05.modules 避免state过于臃肿

● 01.文字说明

●

● 02.modules中state的使用

● 01.store中的数据定义

●

[外链图片转存中…(img-fMp2pqMr-1621664285517)]

● 02.组建中的变量使用

●

● 03.modules中mutations的使用

● 01.store中的mutations函数定义

●

[外链图片转存中…(img-lDq7Abb3-1621664285518)]

● 02.组件中的函数使用

●

● 04.modules中getters的使用

● 01.store中的定义方式

●

● 02.函数中的调用方式

●

● 03.module中的getters函数调用其他模块的函数

● 01.函数在store中的定义方式

●

● 02.函数在组件中的使用方式

●

● 05.modules中actions的使用

● 01.store中的函数定义

●

[外链图片转存中…(img-H4WNJ1Ow-1621664285519)]

● 02.组件中的使用和之前一致

● 04.actions参数获取的另外一种写法

● 01.对象解构写法

●

● 02.对象的解构概念

●

● 02.分离重构store代码

● 01.state变量定义建议不抽离新的文件

●

[外链图片转存中…(img-FnqQM2Lx-1621664285520)]

[外链图片转存中…(img-tnDshXtR-1621664285521)]

● 02.mutations的抽离

● 01.新建一个mutations的文件

●

[外链图片转存中…(img-3nmbtYr4-1621664285522)]

● 02.将之前定义的函数全部exportdefault

●

[外链图片转存中…(img-jtsgCjBQ-1621664285522)]

● 03.将文件导入

●

● 04.字面量增强写法导入

●

● 03.actions的抽离与mutations一致

● 04.getters的抽离与mutations一致

● 05.modules的抽离

● 01.新建文件夹

●

● 02.导入文件夹内的moduleA

●

● 03.模块的导入不变

●

● 代码规范

● 缩进：2个空格比较合适（java套层比较多）

● vue设置代码段

● 19.网页实战

● 01.TabBar实现

● 01.注意代码的移植性和扩展性

● 02.添加全局样式修改

● 01.新建文件 写样式

●

● 02.main.js引入require—方式1 不推荐

●

● 03.直接在main.js里写style 方式2 不推荐

●

● 04.在css文件中引入文件 @关键词 方式3 推荐

●

● 05.弹性布局编写侧边栏（直接写在app.vue中即可）

●

● 06.侧边栏放在最下端

●

● 07.添加阴影

●

● 03.封装文件

● 01.内容抽离

●

● 02.导入组件并注册使用

●

● 04.添加图片

● 01.目录划分

●

● 05.插槽增加代码复用性

● 06.组件创建在多个文件夹

●

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！