vue计算属性computed、事件、监听器watch的使用讲解


Posted in Javascript onJanuary 21, 2019

一.计算属性(computed)

<template>
  <div class="box">
    <h1>计算属性</h1>
    <hr>
    <!-- 直接渲染得到数据 -->
    <p><input type="text" v-model="message"></p>
    <!-- 对data的数据进行简单的操作
    这样有一个不好的地方就是后期对页面数据的维护不是那么方便 -->
    <p>{{message.toUpperCase()}}</p>
    <!-- 通过计算属性改变mesage进行渲染 -->
    <p>{{computedMessage}}</p>
    <hr>
    <!-- 通过事件来改变属性 -->
    <span>{{message}}</span><button @click="changeMessage()">点击改变</button>
    <hr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      passw2: 'sss',
    }
  },
  // computed属性是return返回值,在使用的时候只使用函数名不是调用函数
  computed:{
    computedMessage(){
      return this.message.split('')
    }
  },
  methods:{
    changeMessage(){
      this.message = this.computedMessage+'altman'
    }
  },
}
</script>

这里需要注意的是computed中的函数名不能和所操作data中的数据一样;computed中的函数名相当于是操作data数据后的新数据,在模块中直接使用这个函数名即可实现对data中数据改变的渲染。

二.监听器(watch)

首先确认 watch是一个对象,一定要当成对象来用。

对象就有键,有值。

第一种 键:就是你要监听的那个数据,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。

值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是改变后的新值,第二个是改变之前的值。

第二种  值也可以是函数名:不过这个函数名要用单引号来包裹。(不常用)

第三种情况厉害了(监听的那个数据值是一个对象):

值是包括选项的对象:选项包括有三个。

  •     第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  •     第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  •     第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

用法一:基础用法

<template>
  <div class="box">
    <h1>监听器</h1>
    <label>二次密码:</label>
    <input v-model="watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      watchMsg: '我是监听操作',
    }
  },
  watch:{
    watchMsg(newVal,oldVal){
      console.log('newVal:'+newVal,'oldVal:'+oldVal);
    },
  }
}
</script>

用法二:handler方法和immediate属性

<template>
  <div class="box">
    <h1>监听器</h1>
    <label>二次密码:</label>
    <input v-model="watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      watchMsg: '我是监听操作',
    }
  },
  watch:{
    watchMsg: {
      handler(newVal,oldVal){
        console.log('newVal:'+newVal,'oldVal:'+oldVal);
      },
      immediate:true,
    }
  }
}
</script>

注意到handler了吗,我们给 watchMsg绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。

而immediate:true代表如果在 wacth 里声明了watchMsg之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。

用法三:

deep属性

watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听,比如我们 data 里有一个obj属性/数组:

<template>
  <div class="box">
    <h1>监听器</h1>
    <label>二次密码:</label>
    <input v-model="obj.watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      obj:{
        watchMsg: '我是监听操作',
      }
    }
  },
  watch:{
    // 需要注意的是这里的监听对象也需要变化
    'obj.watchMsg': {
      handler(newVal,oldVal){
        console.log('newVal:'+newVal,'oldVal:'+oldVal);
      },
      immediate:true,
      deep:true,
    }
  }
}
</script>

2、数组的watch

<template>
  <div class="box">
    <h1>监听器</h1>
    <p>{{array}}</p>
    <button @click='addArray()'>点击改变数组</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      array:['mu','zi','dig','big']
    }
  },
  watch:{
    // 需要注意的是这里所监听的对象应该是数组
    array:{
      handler(newVal,oldVal){
        console.log(newVal+'--'+oldVal)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    addArray() {
      this.array.push('66')
    }
  }
}
</script>

3、数组中对象的watch

<template>
  <div class="box">
    <h1>监听器</h1>
    <ul>
      <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---<input type="text" v-model="item.age" @keydown="change(index)"></li>
    </ul>
    <hr>
    <ul>
      <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---{{item.age}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrayObj:[
        {name:'张三',age:'23'},
        {name:'李四',age:'22'}
      ],
    }
  },
  watch:{
    // 需要注意的是这里所监听的对象应该是数组
    arrayObj:{
      handler(newVal,oldVal){
        console.log(newVal+'--'+oldVal)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    change(i) {
      // console.log(this.changeValue)
      this.arrayObj[i].age = this.arrayObj[i].age
    }
  }
}
</script>

4、对象具体属性的watch[活用computed]

<template>
  <div class="box">
    <h1>监听器</h1>
    <p>{{obj.name}}</p>
    <input type="text" v-model="obj.name" name="" id="">
    <p>{{newName}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj:{name:'muzi',age:'23'},
    }
  },
  computed:{
    newName(){
      return this.obj.name.toUpperCase();
    }
  },
  watch:{
    newName(newVal,oldVal){
      console.log(newVal+'--'+oldVal)
    },
    // newName:{
    //   handler(newVal,oldVal){
    //     console.log(newVal+'--'+oldVal)
    //   },
    //   deep:true,
    //   immediate:true,
    // }
  },
}
</script>

从效果图上可以看出,计算属性最好使用在更改数据上然后进行渲染;先进行的计算属性再进行的监听。

vue计算属性computed、事件、监听器watch的使用讲解

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
Express + Session 实现登录验证功能
Sep 08 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 #Javascript
js中实例与对象的区别讲解
Jan 21 #Javascript
详解vue挂载到dom上会发生什么
Jan 20 #Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 #Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 #Javascript
实例介绍JavaScript中多种组合继承
Jan 20 #Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
Python实现的彩票机选器实例
2015/06/17 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python使用tkinter实现简单计算器
2018/01/30 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
服装创业计划书范文
2014/02/05 职场文书
村容村貌整治方案
2014/05/21 职场文书
党校学习心得体会范文
2014/09/09 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
django中websocket的具体使用
2022/01/22 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript