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>Document</title>
<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="./vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 引入axios.js库 发送HTTP请求 -->
<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旧值(一般不用)
// words(newValue){
// console.log('变化了',newValue)
// }
// 使用 async 和 await 来使异步代码更加简洁和易读。
'obj.words'(newValue){ //方法名不能直接出现特殊字符，出现要加引号
// console.log('变化了',newValue)
//防抖：延迟执行 -> 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
// 使用Axios发送一个GET请求到指定的API接口
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)
},500)
}
}
})
</script>
</body>
</html>
<!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>Document</title>
<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 v-model="obj.lang">
<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="./vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 引入axios.js库 发送HTTP请求 -->
<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: '苹果',
lang:'italy'
},
result:'', //翻译结果
// timer:null //延时器id(存它只是为了清除，与页面渲染无关，因此可以省略)
},
// 具体讲解：(1) watch语法 (2) 具体业务实现
watch:{
obj:{
deep:true,//深度监视
immediate:true,//立刻执行，一进入页面handler就立刻执行
handler(newValue){
clearTimeout(this.timer) //用于取消先前设置的定时器的方法。
//存当前延时器
this.timer = setTimeout(async() => {
const res = await axios({
url:'https://applet-base-api-t.itheima.net/api/translate',
params:newValue //params 选项用于传递查询参数
})
this.result = res.data.data
console.log(res.data.data)
},300)
}
}
}
//该方法会在数据变化时调用执行
//newValue新值，oldValue旧值(一般不用)
// words(newValue){
// console.log('变化了',newValue)
// }
// 使用 async 和 await 来使异步代码更加简洁和易读。
//'obj.words'(newValue){ //方法名不能直接出现特殊字符，出现要加引号
// console.log('变化了',newValue)
//防抖：延迟执行 -> 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
// 使用Axios发送一个GET请求到指定的API接口
// 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)
// },500)
// }
// }
})
</script>
</body>
</html>
