一次就好吧
前端
获得徽章 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>标签里面去展开赞过 评论1 - 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展开赞过 评论2 - 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)
});展开赞过 评论1 - 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比较安全展开赞过 评论1 - 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就是一套可以让网站跟服务器交互的一种技术，能在我们需要时，不用再刷新网页就能去服务器要一些数据回来展开评论点赞 - 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` 的值展开等人赞过 17 - 箭头函数:
箭头函数**中的 `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()展开赞过 评论2 - 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()展开赞过 评论2 - 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` 代码段，并截获到错误信息展开赞过 评论2
autumnfish.cn