2021-07-16

最新推荐文章于 2021-07-28 19:42:37 发布

mayellce

最新推荐文章于 2021-07-28 19:42:37 发布

阅读量172

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/maryal/article/details/118800425

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-bind的基本使用

在这里插入图片描述

v-bind 动态绑定

在这里插入图片描述

v-bind动态绑定style(对象语法）

在这里插入图片描述

v-bind动态绑定style（数组语法）

在这里插入图片描述

计算属性的基本使用

将firstname和lastname拼接有三种方式
一.在h2中直接用“+”将其拼接
二.利用方法methods 返回拼接后的结果
三.利用计算属性 computed返回拼接后的结果
这里要注意这里的fullname是个属性调用时后面不能加括号（）

在这里插入图片描述

计算属性的复杂操作

计算属性和methods的区别
计算属性在多次调用时，它只调用一次，而methods调用几次就执行几次，是没有缓存的，性能更低

在这里插入图片描述 es6比es5好用

复习回归

在这里插入图片描述

Day2

01.计算属性的setter和getter

之前我们学习的计算属性的应用是简写，完整的写法如下
在这里插入图片描述计算属性一般是没有set方法，只读属性

02.计算属性和methods的对比

在这里插入图片描述

03.块级作用域-let和var

以后用let和const
let：当这个（变量）标志符要改变的时候
const：当这个标志符不改变的时候
在这里插入图片描述

在这里插入图片描述这里的点击第一个按钮显示“这是第5个按钮被点击”
原因是，当点击第一个按钮时，我们想让这个i显示等于0的状态，但是通过i++for循环导致这里的i被修改为5
以前的解决方案———>闭包
原因：函数是一个作用域
在这里插入图片描述

05.const的使用和注意点

在这里插入图片描述

06.ES6对象字面量的增强写法

在这里插入图片描述

1.属性的增强写法

在这里插入图片描述

2.函数的增强写法

在这里插入图片描述 TypeScripe(microsoft)->ts(类型检测)
Angular->Google
flow（Facebook）

08.v-on的基本使用和语法题

在这里插入图片描述
语法糖

09.v-on的参数传递问题

在这里插入图片描述

v-on修饰符的使用

stop修饰符的使用
阻止事件冒泡 @click .stop
在这里插入图片描述 prevent修饰符的使用
监听某个键盘的键帽

once修饰符的使用

11.v-if 、v-else-if 、v-else的使用

在这里插入图片描述

v-if如果是ture的话，内容就会显示出来
在这里插入图片描述 v-if如果是false，那么显示v-else的内容
v-else-if（用的不是特别多）

在这里插入图片描述
针对逻辑判断比较复杂的，更建议用计算属性

12.登录切换的案例

在这里插入图片描述这里添加的label的for和input中的id相同的作用：

13.登录切换的input复用问题

在这里插入图片描述解决方案：添加key，key不相同时内部就不会进行复用

14.v-show的使用以及和v-if的区别

在这里插入图片描述

v-if ：当条件为false时，包含v-if指令的元素，根本就不会存在dom中
v-show ：当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none；

在这里插入图片描述

15.v-for遍历数组和对象

1.遍历数组
在这里插入图片描述
2.遍历对象

16.v-for的绑定和非绑定key的区别

在这里插入图片描述
插入删除替换：splice
没有key的时候性能比较低

17.数组中哪些方法是响应式的

数据是响应式的
在这里插入图片描述
通过索引值修改数组中的元素，不是响应式

如果要修改元素的话，需要用到splice
在这里插入图片描述或者用vue里面的一种方法
set（要修改的对象，索引值，修改后的值）

18.作业的回顾和实现

在这里插入图片描述

19.购物车案例-界面搭建

01.JavaScript高阶函数的使用

在这里插入图片描述编程范式：命令式编程/声明式编程
编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）

1.filter函数

2.map函数
3.reduce函数

在这里插入图片描述整合一下
更简洁

02.v-model

在这里插入图片描述

双向绑定
在这里插入图片描述

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

在这里插入图片描述
v-model设置相同也可以实现互斥，此时可以把name属性去掉

04.v-model:checkbox类型的使用

label 的好处：这里点文字“同意协议”也可以把复选框勾选

单选框
在这里插入图片描述

在这里插入图片描述多选框

在这里插入图片描述

05.v-model:select

在这里插入图片描述

单选
在这里插入图片描述

多选

06.input的值绑定

在这里插入图片描述
v-bind：value = “item”

07.v-model修饰符的使用

在这里插入图片描述

08.组件化的实现和使用步骤

在这里插入图片描述
注册组件的基本步骤

09.组件化的基本使用过程

template：模板
es6的``是支持换行的（tab上面的键）
在这里插入图片描述

10.全局组件和局部组件

在这里插入图片描述

11.父组件和子组件的区分

在这里插入图片描述

12.注册组件的语法糖写法

在这里插入图片描述

语法糖

全局组件
局部组件

13.组件模板分离的写法

在这里插入图片描述

方式一

方式二

14.为什么组件data必须是函数

在这里插入图片描述为什么组件data必须是函数

在这里插入图片描述

15-17.父子组件通信

> 父传子props

properties（属性）
在这里插入图片描述

在这里插入图片描述

props传对象
在这里插入图片描述

props驼峰标识

通过v-bind是不支持驼峰的 cInfo（×）cinfo（√）

在这里插入图片描述复杂的

在这里插入图片描述子传父（自定义事件）

在这里插入图片描述 @item ——>v-on:item
发射事件：自定义事件

06.slot-插槽的基本使用

在这里插入图片描述

07.slot-具名插槽的使用

在这里插入图片描述

08.编译作用域的概念

在这里插入图片描述

09.作用域插槽的使用

在这里插入图片描述

10.前端代码复杂带来的问题

模块化开发
在这里插入图片描述

11.前端模块化雏形和CommonJS

在这里插入图片描述

在这里插入图片描述 CommonJS

在这里插入图片描述

ES6模块化的导入和导出

在这里插入图片描述

13.webpack

在这里插入图片描述

07-(理解)前端渲染后端渲染和前端路由后端路由

P110 04-(学握)vue-router-路由的嵌套使用

在这里插入图片描述

P111 06-(学握)vue-router-参数传递(一)

在这里插入图片描述
profile 档案

URL :
协议://主机:端口/路径?查询
scheme://host:port/ path?query#fragment|

取出来的方法
在这里插入图片描述

P112 06.vue- router.参数传递(二)

P113 07-(理解)vue-router-router和route的由来

所有的组件都继承自Vue类的原型
往vue的原型里面加属性，其他地方可以直接使用
在这里插入图片描述

P114 08-vue-router-全局导航守卫

在这里插入图片描述监听全局的跳转

P115 09-(理解)vue-router-导航守卫的补充

meta:元数据(描述数据的数据)

在这里插入图片描述

口https://router.vuejs.org/zh/guide/advanced/navigation-
guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D
%AB

P116 10-(学握)vue-router keep-alive及其他问题

keep-alive可以防止组件频繁地被销毁
在这里插入图片描述
如果要保持首页的状态的话。。。。

之所以 activated（）deactivated（）会被执行，是因为这里我们有一个keep-alive，如果没有keep-alive就不会被执行。

P117 11-(学握)vue-router keep alive属性介绍

在这里插入图片描述

P118 12-tabbar-基本结构的搭建

删除这些
在这里插入图片描述

P125 02-Promise-Promise的介绍和基本使用

在这里插入图片描述
用一个方法把这部分代码抽离出去
调用resolve 用then（）
链式编程

什么情况下会用到Promise?
一般情况下是有异步操作时，使用Promise对这个异步操作进行封装

在这里插入图片描述

P126 03-Promise-Promise的三种状态

在这里插入图片描述另外一种写法

P127 04-Promise Promise的链式调用

在这里插入图片描述简写

在这里插入图片描述
如果有一步是失败的，那么直接执行.catch部分
简写

在这里插入图片描述

或者用throw，得到的结果是一样的

P128 05-Promise Promise的all方法调用

在这里插入图片描述

P129 06-(学握)vuex-Vuex概念和作用解析

在这里插入图片描述

P130 07-(学握)vuex-单界面到多界面状态…

在这里插入图片描述

P131 08-(学握)vuex. devtools和mutations

在这里插入图片描述

P132 09-(学握)yuex. state单状态树的理解

在这里插入图片描述
filte过滤属性

P133 10-(学握)vuex. getters的使用详解

P134 11-(学握)vuex. mutations的携带参数

在这里插入图片描述

P135 12-(学握)vuex mutations的提交风格

在这里插入图片描述

P136 13-(学握)vuex.数据的响应式原理

在这里插入图片描述

P137 14-(学握)vuex. mutations的类型常量

在这里插入图片描述

第一种导入方法要有default的时候才能用
普通的导入用的是第二种方法。。。加括号

在这里插入图片描述

P138 16-(学握)vuex actions的使用详解

在这里插入图片描述
我们强调，不要再Mutation中进行异步操作.

在这里插入图片描述

P139 16-(学握)vuex-modules的使用详解

P140 17-(学握)vuex. store文件夹的目录

P141 01-(了解)网络请求模块的选择-axios

在这里插入图片描述

P142 02-(学握)axios框架的基本使用

在这里插入图片描述

安装方法

P143 03-(学握)axios发送并发请求

在这里插入图片描述

P144 04-(学握)axios的配置信息相关

在这里插入图片描述请求类型为pose时用data
get时用params

P145 06-(学握)axios的实例和模块封装

在这里插入图片描述 instance实例

在这里插入图片描述因为要搞多个实例，所以这里不用default 而用function

在这里插入图片描述

P146 06-(学握)axios的拦截器的使用

最终解决方案

在这里插入图片描述如果服务器不再维护了，可以这样处理

在这里插入图片描述

P146 06-(学握)axios的拦截器的使用

借用这个理解一下
在这里插入图片描述

url那块是第一个函数，赋值给config
instance返回的是promise ，而return的是他的返回值，相当于return promise

这里整个request返回的是promise
在这里插入图片描述

这里new了一个promise没有必要直接return就行

在这里插入图片描述 interceptors拦截器

在这里插入图片描述

请求拦截的作用
1.比如config中的一些信息不符合服务器的要求
2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息

在这里插入图片描述

响应拦截： instance. interceptors . response .use ()

P147 07-(学握)项目开发:项目创建和GitHu…
P148 08-(学握)项目开发划分目录结构
P149 09-(学握)项目开发css文件的引入
P160 10-(学握项目开发vue.config和edit…
P161 11-(学握)项目开发tabbar引入和项…
P162 12-(理解)项目开发小图标的修改以…
P163 13-(学握)首页开发:首页导航栏的封…
P164 14-(学握)首页开发请求首页的多个…
P165 16-(学握)首页开发轮播图的展示
P166 16-(学握)首页开发推荐信息的展示
P167 17-(了解)知识回顾2
P168 01-(学握)首页开发FeatureView的封装
P169 02-(学握)首页开发-TabControl的封装
P160 03-(学握)首页开发保存商品的数据…
P161 04-(学握)首页开发首页数据的…
P162 05-(学握)首页开发首页商品数据的…
P163 06-(学握)首页开发TabControl点击…
P164 07-(学握)Better -Scroll的安装和使用