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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
js不是基础的基础
2006/12/24 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Django 外键的使用方法详解
2019/07/19 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python动态文本进度条的实例代码
2020/01/22 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
办公室文秘自我评价
2013/09/21 职场文书
骨干教师培训制度
2014/01/13 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers