Watch监听器和防抖功能

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>watch侦听器</title>

<!-- watch侦听器

作用:监视数据变化,执行一些 业务逻辑或异步操作

语法:

1.简单写法 简单类型数据,直接监视

2.完整写法 添加额外的配置项 -->

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-size: 18px;

}

#app {

padding: 10px 20px;

}

.query {

margin: 10px 0;

}

.box {

display: flex;

}

textarea {

width: 300px;

height: 160px;

font-size: 18px;

border: 1px solid #dedede;

outline: none;

resize: none;

padding: 10px;

}

textarea:hover {

border: 1px solid #1589f5;

}

.transbox {

width: 300px;

height: 160px;

background-color: #f0f0f0;

padding: 10px;

border: none;

}

.tip-box {

width: 300px;

height: 25px;

line-height: 25px;

display: flex;

}

.tip-box span {

flex: 1;

text-align: center;

}

.query span {

font-size: 18px;

}

.input-wrap {

position: relative;

}

.input-wrap span {

position: absolute;

right: 15px;

bottom: 15px;

font-size: 12px;

}

.input-wrap i {

font-size: 20px;

font-style: normal;

}

</style>

</head>

<body>

<div id="app">

<!-- 条件选择框 -->

<div class="query">

<span>翻译成的语言:</span>

<select>

<option value="italy">意大利</option>

<option value="english">英语</option>

<option value="german">德语</option>

</select>

</div>

<!-- 翻译框 -->

<div class="box">

<div class="input-wrap">

<textarea v-model="obj.words"></textarea>

<span><i>⌨️</i>文档翻译</span>

</div>

<div class="output-wrap">

<div class="transbox">{{ result }}</div>

</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>

// 接口地址:https://applet-base-api-t.itheima.net/api/translate

// 请求方式:get

// 请求参数:

// (1)words:需要被翻译的文本(必传)

// (2)lang: 需要被翻译成的语言(可选)默认值-意大利

// -----------------------------------------------

const app = new Vue({

el: '#app',

data: {

// words: ''

obj: {

words: ''

},

result: '', // 翻译结果

timer: null // 延时器id

},

// 具体讲解:(1) watch语法 (2) 具体业务实现

watch: {

// 侦听器

// 侦听谁就写谁

// 该方法会在数据变化时调用执行

// newValue新值,oldValue老值(一般不用)

// 该方法会在数据变化时调用执行

// newValue新值, oldValue老值(一般不用)

// words (newValue) {

// console.log('变化了', newValue)

// }

// 拿结果

// async 'obj.words'(newValue){

// // 发请求

// const res = await axios({

// url:'https://applet-base-api-t.itheima.net/api/translate'

// // 接口

// params:{

// words:newValue

// }

// })

// }

'obj.words' (newValue) {

// 此时就可以监视到obj里面的words

// console.log('变化了', newValue)

// 防抖: 延迟执行 → 干啥事先等一等,延迟一会,一段时间内没有再次触发,才执行

clearTimeout(this.timer)

this.timer = setTimeout(async () => {

//

const res = await axios({

url: 'https://applet-base-api-t.itheima.net/api/translate',

params: {

words: newValue

}

})

this.result = res.data.data

console.log(res.data.data)

}, 300)

}

}

})

</script>

</body>

</html>

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法