Vue的监听属性

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量987 收藏 10
点赞数 18
分类专栏： Vue 文章标签： vue.js css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59745705/article/details/134984091
版权

<!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)

            }

          }

小小程序员.¥
关注
  • 18
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解vue2.0监听属性的使用心得及搭配计算属性的使用
01-19
我们在工作中常常需要监听某一个属性值的变化，这个时候我们就需要用到了监听属性watch，在这里我总结watch属性的三种场景使用希望对你有所帮助： 1.基础版监听： 场景如下：输入框输入你的年龄，如果年龄在0-15岁...
vue监听对象及对象属性问题
12-04
监听整个对象，使用watch就行 export default { data() { return { a: { b: 1, c: 2 } } ... console.log('监听a整个对象的变化...监听对象中具体属性的变化，需要使用watch配合computed export default { data
Vue之监听属性
Ming_xm的博客
07-26 5830
监听属性是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。在监听数据对象中的属性时，每当监听的属性发生变化，都会执行特定的操作。监听属性可以定义在watch选项中，也可以使用实例方法vm.$watch()。运行结果如图：上述代码中，在watch选项中对fullname属性进行了监听。当改变该属性值的时候，会执行对应的回调函数，函数中的两个参数newValue和oldValue分别表示监听属性的新值和旧值。其中，第二个参数可以省略。使用实例方法vm。
Vue 监听属性
qq_56515781的博客
07-29 1031
Vue 监听属性
Vue监听属性详细讲解
weixin_43749805的博客
05-09 1807
定义要监听的属性： “message” 初始值设置为 “Hello, Vue!data() {return {' } }下面例子中，定义了一个名为 “message” 的 watch 属性，它监听 “message” 属性的变化，并在变化时输出变化前后的值watch : {
vue 监听属性 watch
weixin_57742734的博客
08-29 779
vue监听事件 watch
Vue监听属性的变化
aocuicheng1364的博客
02-24 1902
监听属性的变化watch: { counter: function (nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!') }} 转载于:https://www.cnblogs.com/erfsfj-dbc/p/10426703.html...
Vue监听属性详解
Mq_sir的博客
11-23 2830
Vue监听属性 什么是监听属性？ ???? 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。 监听属性和计算属性的区别？ 计算属性是依赖的值改变后重新计算结果更新DOM，会进行缓存。 属性监听的是属性值，当定义的值发生变化时，执行相对应的函数。 最主要的用途区别： 计算属性不能执行异步任务。计算属性一般不会用来向服务器请求或者执行异步任务，因为耗时可能会比较长，我们的计算属性要实时更新。所以这个异步任务就可以用监听属性来做。 总之一句话：comp
Vue的计算属性与监听属性
qq_46149597的博客
11-03 3093
计算属性的getter和setter，计算属性的缓存，对象数据中的属性进行监听，deep选项
vue监听对象属性值变化
小马甲
11-18 3998
只要对象属性里面的任何一个属性值发生改变，不论嵌套的多深，都会触发监听里面的。定义一个新属性，新属性使用。里面的某个属性值，再使用。注意：如果是一个数组对象。，如果该属性是一个数组。来监听这个新属性值。
用Vue.js实现监听属性的变化
11-26
创建 Vue 实例时，Vue 将遍历 data 的属性，通过 ES5 的 Object.defineProperty 将它们转为 getter/setter，在其内部 Vue 可以追踪依赖、通知变化。 const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部，同...
vue计算属性无法监听到数组内部变化的解决方案
10-16
今天小编就为大家分享一篇vue计算属性无法监听到数组内部变化的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 407
在vue.config.js中配置关闭Uncaught runtime errors显示。
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 305
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 242
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 351
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 811
vue初使用实例之笔记本
vue面试题汇总之响应式理解
fyw1789的博客
06-12 399
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
vue 监听属性改变
06-01
在 Vue 中，可以使用 `watch` 属性监听属性改变。具体的做法是在 Vue 实例中添加 `watch` 属性，然后指定需要监听的属性和回调函数。例如，监听 `name` 属性的改变，可以这样写： ``` watch: { name: function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小程序员.¥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值