获得徽章 0
如何点击另外一个按钮,不仅轮播图要消失,轮播图对应的按钮也要消失?
1. 先给按钮动态绑定一个:class=“isShow”
2. 在data中定义这个isShow , 并赋上一个值, isShow: domhide
3. 在css中定义两个样式 , 因为最初是要显示这个按钮的,所以.domhide{display: block;}给显示 , .domshow{display: none;}给隐藏 , 这个是自己额外定义的
4. 再点击其他的按钮的时候,轮播图的数据直接给 ‘ ’空 , 然后调用this.isShow = "domshow" , 按钮隐藏
5. 再点击轮播图数据的时候,只需要在数据赋值给数组的上面调用this.isShow = "domhide" , 按钮显示
展开
3
uniapp如何将页面以轮播的方式切换?
不用使用任何组件库的swiper,因为组件库的swiper都是直接数据挂载到标签上,然后通过键值对的方式来进行渲染。我们这里先在pages文件夹下新建一个只使用原生swiper标签的父组件,然后将需要轮播滑动切换的页面封装到components目录下,作为子组件,然后再将需要轮播滑动切换的组件导入到那个原生的swiper组件里面去,每一个需要轮播切换的子组件以标签的形式放入到<swiper-item><swiper-item>标签里面去
展开
评论
Promise是什么?
Promise是ES6新出的一个 构造函数 , 用于创建Promise实例对象
Promise实例对象 :可以理解为一个处理异步和同步操作的容器
promise本身是同步的(容器 ) , Promise 的then( ) 方法里面的代码才是异步的
Promise 里面的代码怎么执行 , 取决于你在Promise的里面写了什么.

Promise作用 :
解决回调地狱 , 优化语法
回调地狱是什么 ?
异步回调 层层嵌套


Promise原理
Promise的本质是一个容器
Promise有三种工作状态 :
1. 进行中 pending
2. 已成功 fulfilled
3. 已失败 rejected

Promise状态切换只有两种情况
从pending(进行中)变成fulfilled(已成功)
从pending(进行中)变成rejected(已失败)

Promise创建的时候里面的代码会立即执行
(1) 不要在 Promise里面去处理异步结果
(2) 而是执行 Promise的resolve和reject方法

发挥联想 :
Promise像一个中介 , 我把居住证交给中介(Promise)来帮我办 , 中介(Promise)什么活都接 , 不管同步还是异步都接
中介办没办好 , 有三种状态
中介正在办理 pending
中介办理成功了 fulfilled
中介办理失败了 rejected


promise 本身无法控制异步顺序 (异步无序) , promise 本质只是控制异步结果的顺序
发挥联想 :

Promise像一个中介 , 我把居住证交给中介(Promise)来帮我办 , 中介(Promise)什么活都接 , 不管同步还是异步都接
中介办没办好 , 有三种状态
中介正在办理 pending
中介办理成功了 fulfilled
中介办理失败了 rejected
展开
一次就好吧于2022-06-15 00:16发布的图片
一次就好吧于2022-06-15 00:16发布的图片
一次就好吧于2022-06-15 00:16发布的图片
一次就好吧于2022-06-15 00:16发布的图片
评论
axios是什么 : 一个js框架,用于发送ajax请求(底层使用XMLHttpRequest)

请求axios的时候,如果res的数据是数组,则渲染的时候,需要使用arr.map(item={})
如果res的数据是对象 , 则可以直接获取元素之后进行innerHTML添加内容

get() : 写url和请求参数
then(res=>{}) : 成功回调, 相当于以前jq的success
catch(err=>{}):失败回调, 一般可以省略不写
then(()=>{}):完成回调, 表示请求完成,无论成功失败都会执行。一般可以省略不写
get方法第一个参数是url
get方法第二个参数是对象类型 { params:{get参数对象} }


post请求
post方法第一个参数是url
post方法第二个参数是对象类型 { post参数对象 }




axios.get().then()
axios.post().then()
(2)介绍第三种使用方式
axios({
url:'请求路径',
method:'请求方式',
data:{ post请求参数 },
params:{ get请求参数 }
}).then(res=>{
//成功回调
//console.log(res)
});
展开
评论
Ajax发送get请求与post请求 :

get传参格式:
url?key=value

示例: autumnfish.cn


post请求 :
需要设置请求头(固定语法):
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') 固定格式
使用xhr的send方法发送参数: xhr.send('参数名=参数值');


区别:
1. 传参的方式不同
2. get传小文件 , post传大文件
3. get传输的速度较快,post传输的速度较慢(需要切片传输)
4. post比较安全
展开
一次就好吧于2022-06-11 19:40发布的图片
一次就好吧于2022-06-11 19:40发布的图片
评论
Ajax是什么?
Ajax是让浏览器跟服务器交互的一套API,它的作用就是可以让浏览器和服务器进行交互。
说人话: ajax 是一种 用于`向服务器请求数据`的 技术

为什么需要ajax?
1.以前我的写的页面全部都是固定的假数据,其实网页的数据都是从服务器获取的,一旦服务器数据变化,网页上的内容也会发生变化
2.虽然可以通过在浏览器地址栏直接输入网址(url)的方式向服务器获取数据,但是我们的网页会刷新
3.学会ajax:就可以做到在不刷新网页的情况下向服务器请求数据,让网站数据内容动态变化。

ajax的工作流程:
- 1.创建XMLHttpRequest对象(俗称小黄人)
- `let xhr = new XMLHttpRequest();`
- 2.设置请求
- `xhr.open('get', 'autumnfish.cn');`
- 3.发送请求
- `xhr.send();`
- 4.注册回调函数
- - 这个函数不是立即执行的,而是等服务器把数据响应返回才会执行(PS:什么时候执行取决于你的网速快慢)
- `xhr.onload = function () {console.log(xhr.responseText);}`


Ajax 即AsynchronousJavascriptAndXML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
说人话:ajax就是一套可以让网站跟服务器交互的一种技术,能在我们需要时,不用再刷新网页就能去服务器要一些数据回来
展开
一次就好吧于2022-06-11 19:32发布的图片
一次就好吧于2022-06-11 19:32发布的图片
评论
this指向:
JavaScript 中允许指定函数中 `this` 的指向,有 3 个方法可以动态指定普通函数中 `this` 的指向

使用 `call` 方法调用函数,同时指定函数中 `this` 的值
1. call` 方法能够在调用函数的同时指定 `this` 的值
2. 使用 `call` 方法调用函数时,第1个参数为 `this` 指定的值
3. `call` 方法的其余参数会依次自动传入函数做为函数的参数



apply:
1. apply` 方法能够在调用函数的同时指定 `this` 的值
2. 使用 `apply` 方法调用函数时,第1个参数为 `this` 指定的值
3. `apply` 方法第2个参数为数组,数组的单元值依次自动传入函数做为函数的参数



bind` 方法并不会调用函数,而是创建一个指定了 `this` 值的新函数:
bind` 方法创建新的函数,与原函数的唯一的变化是改变了 `this` 的值
展开
一次就好吧于2022-06-10 17:48发布的图片
一次就好吧于2022-06-10 17:48发布的图片
一次就好吧于2022-06-10 17:48发布的图片
1
箭头函数:
箭头函数**中的 `this` 与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 `this` !箭头函数中访问的 `this` 不过是箭头函数所在作用域的 `this` 变量
console.log(this) // 此处为 window
// 箭头函数
const sayHi = function() {
console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
}
// 普通对象
const user = {
name: '小明',
// 该箭头函数中的 this 为函数声明环境中 this 一致
walk: () => {
console.log(this)
},

sleep: function () {
let str = 'hello'
console.log(this)
let fn = () => {
console.log(str)
console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
}
// 调用箭头函数
fn();
}
}

// 动态添加方法
user.sayHi = sayHi

// 函数调用
user.sayHi()
user.sleep()
user.walk()
展开
评论
this:
this` 是 JavaScript 最具“魅惑”的知识点,不同的应用场合 `this` 的取值可能会有意想不到的结果,在此我们对以往学习过的关于【 `this` 默认的取值】情况进行归纳和总结

普通函数:
普通函数的调用方式决定了 `this` 的值,即【谁调用 `this` 的值指向谁】
// 普通函数
function sayHi() {
console.log(this)
}
// 函数表达式
const sayHello = function () {
console.log(this)
}
// 函数的调用方式决定了 this 的值
sayHi() // window
window.sayHi()


// 普通对象
const user = {
name: '小明',
walk: function () {
console.log(this)
}
}
// 动态为 user 添加方法
user.sayHi = sayHi
uesr.sayHello = sayHello
// 函数调用方式,决定了 this 的值
user.sayHi()
user.sayHello()
展开
评论
try ... catch:
function foo() {
try {
// 查找 DOM 节点
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (error) {
// try 代码段中执行有错误时,会执行 catch 代码段
// 查看错误信息
console.log(error.message)
// 终止代码继续执行
return

}
finally {
alert('执行')
}
console.log('如果出现错误,我的语句不会执行')
}
foo()
1. try...catch` 用于捕获错误信息
2. 将预估可能发生错误的代码写在 `try` 代码段中
3. 如果 `try` 代码段中出现错误后,会执行 `catch` 代码段,并截获到错误信息
展开
评论
深浅拷贝:
1. 首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象,简单来说,浅拷贝只复制一层对象的属性,二深拷贝则复制了所有的层级。
2. 对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会 改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性

const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
// 把对象转换为 JSON 字符串
// console.log(JSON.stringify(obj))
const o = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '123'
console.log(obj)


异常处理:
了解 JavaScript 中程序异常处理的方法,提升代码运行的健壮性
throw异常处理是指预估代码执行过程中可能发生的错误,然后最大程度的避免错误的发生导致整个程序无法继续运行
function counter(x, y) {

if(!x || !y) {
// throw '参数不能为空!';
throw new Error('参数不能为空!')
}

return x + y
}

counter()
1. throw` 抛出异常信息,程序也会终止执行
2. `throw` 后面跟的是错误提示信息
3. `Error` 对象配合 `throw` 使用,能够设置更详细的错误信息
展开
评论
原型链:
基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链
// Person 构造函数
function Person() {
this.arms = 2;
this.walk = function () {}
}

// Person 原型对象
Person.prototype.legs = 2;
Person.prototype.eyes = 2;
Person.prototype.sing = function () {}
Person.prototype.sleep = function () {}

// Chinese 构造函数
function Chinese() {
this.skin = 'yellow';
this.language = '中文';
}

// Chinese 原型对象
Chinese.prototype = new Person();
Chinese.prototype.constructor = Chinese;

// 实例化
let c1 = new Chinese();

console.log(c1)
在 JavaScript 对象中包括了一个非标准备的属性 `__proto__` 它指向了构造函数的原型对象,通过它可以清楚的查看原型对象的链状结构。
展开
评论
原型继承:
基于构造函数原型对象实现面向对象的继承特性
// 所有人
function Person() {
// 人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;

// 人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}

// 中国人
function Chinese() {
this.skin = 'yellow';
this.language = '中文';
}
// 日本人
function Japanese() {
this.skin = 'yellow';
this.language = '日文';
}

上述代码可以理解成将 `Chinese` 和 `Japanese` 共有的属性和方法提取出来了,也就是说 `Chinese` 和 `Japanese` 需要【共享】一些属性和方法,而原型对象的属性和方法恰好是可以被用来共享的
// 中国人
function Chinese() {
this.skin = 'yellow';
this.language = '中文';
}
// 日本人
function Japanese() {
this.skin = 'yellow';
this.language = '日文';
}

// 人们【共有】的行为特征
let people = {
// 人的特征
arms: 2,
legs: 2,
eyes:2,
// 人的行为
walk: function () {},
sleep: function () {},
sing: function () {}
}

// 为 prototype 重新赋值
Chinese.prototype = people;
Chinese.prototype.constructor = Chinese;
展开
评论
继承:继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义,分别封装中国人和日本人的行为特征来理解编程中继承的含义,代码如下:
// 封装中国人的行为特征
function Chinese() {
// 中国人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;

this.skin = 'yellow';
this.language = '中文';

// 中国人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}

// 封装日本人的行为特征
function Japanese() {
// 日本人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;

this.skin = 'yellow';
this.language = '日文';

// 日本人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}
其实我们都知道无论是中国人、日本人还是其它民族,人们的大部分特征是一致的,然而体现在代码中时人的相同的行为特征被重复编写了多次,代码显得十分冗余,我们可以将重复的代码抽离出来
展开
评论
原型对象:
实际上每一个构造函数都有一个名为 `prototype` 的属性,译成中文是原型的意思,`prototype` 的是对象类据类型,称为构造函数的原型对象,每个原型对象都具有 `constructor` 属性代表了该原型对象对应的构造函数
function Person() {

}

// 每个函数都有 prototype 属性
console.log(Person.prototype)


了解了 JavaScript 中构造函数与原型对象的关系后,再来看原型对象具体的作用,如下代码所示
function Person() {
// 此处未定义任何方法
}

// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
console.log('Hi~');
}

// 实例化
let p1 = new Person();
p1.sayHi(); // 输出结果为 Hi~

构造函数 `Person` 中未定义任何方法,这时实例对象调用了原型对象中的方法 `sayHi`,接下来改动一下代码:
function Person() {
// 此处定义同名方法 sayHi
this.sayHi = function () {
console.log('嗨!');
}
}

// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
console.log('Hi~');
}

let p1 = new Person();
p1.sayHi(); // 输出结果为 嗨!
展开
评论
下一页