<!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.完整写法 添加额外的配置项
? ? （1）deep:true 对复杂类型深度监视
? ? ?(2) immediate:true 初始化立即执行一次handler方法
? ? -->
? ? <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>
核心部分---完整写法
// 需求：输入内容，修改语言，都实时翻译
? ? ? // 接口地址：https://applet-base-api-t.itheima.net/api/translate
? ? ? // 请求方式：get
? ? ? // 请求参数：
? ? ? // （1）words：需要被翻译的文本（必传）
? ? ? // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
? ? ? // -----------------------------------------------
? ?
? ? ? const app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? obj: {
? ? ? ? ? ? words: '小黑',
? ? ? ? ? ? lang: 'italy'
? ? ? ? ? },
? ? ? ? ? result: '', // 翻译结果
? ? ? ? },
? ? ? ? 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
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? this.result = res.data.data
? ? ? ? ? ? ? ? console.log(res.data.data)
? ? ? ? ? ? ? }, 300)
? ? ? ? ? ? }
? ? ? ? ? }