vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html

一、计算属性-computed

  1. 作用:能够避免数据冗余,通过计算,可以在已有的data数据中生成新的变量,计算属性的变量将会被缓存

      触发时机:当依赖的响应式属性变化才会重新计算

示例:

html:
<!-- 输出:Li XuanJing -->
<div id="app">{{fullName}}</div> script:
var vm = new Vue({
el:'#app',
data:{
fristName:'Li'
lastName:'XuanJing'
},
computed:{
// 仅读取
fullName () {
return this.fristName + ' ' + lastNmae
},
setName :{
    //读取和设置(getter、setter)
    get () {
  return this.fristNmae + ' ' lastName
    }
    set (v) {
      this.lastName = v + lastName
    }  
}
}
})
// 修改 setName 属性
vm.setName = 'lx' // => 输出: lastName = lxXuanJing

二、属性监听-watch

   1. 作用:监听属性的变化

2. 触发时机:当属性发生变化时触发(可以配合v-model等指令使用)

示例(vue.js官方实例):

var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
  methods:{
    someMethod () { /* ...... */}
  }
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 绑定一个方法
b: 'someMethod',
// deep=true 深度 watcher(检测每一个伪属性的变化)
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 设置immediate属性后,该回调将会在侦听开始之后被立即调用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
// watch vm.e.f's value: {g: 5}:监听e.f属性的变化
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1

  

三、方法选项-methods

  作用:Vue实例中,函数需要定义在 methods 对象选项中

  触发时机:当methods中的方法被主动调用的时候触发

实例(官方实例):

var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2

  

Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)的更多相关文章

  1. [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

    一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...

  2. Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  3. Vue.js的类Class 与属性 Style如何绑定

    Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...

  4. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  5. vue.js 中使用(...)运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

  6. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  7. Android TextWatcher的使用方法(监听ExitText的方法)

    我做了一个查询单词的简单app, 当在EditText中输入单词的时候,点击lookup,则在TextView区域显示出该单词的意思,当EditText中没有任何字符时,显示"word de ...

  8. v-on可以监听多个方法吗?

    原文地址 v-on可以监听多个方法 <template> <div class="about"> <button @click="mycli ...

  9. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

随机推荐

  1. 【剑指Offer】把数组排成最小的数 解题报告(Python)

    [剑指Offer]把数组排成最小的数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews ...

  2. LeetCode1238循环码排列

    题目 给你两个整数 n 和 start.你的任务是返回任意 (0,1,2,,...,2n-1) 的排列 p,并且满足: p[0] = start p[i] 和 p[i+1] 的二进制表示形式只有一位不 ...

  3. codeforc 603-A. Alternative Thinking(规律)

    A. Alternative Thinking time limit per test 2 seconds memory limit per test 256 megabytes   Kevin ha ...

  4. select......for update会锁表还是锁行

    select查询语句是不会加锁的,但是select .......for update除了有查询的作用外,还会加锁呢,而且它是悲观锁. 那么它加的是行锁还是表锁,这就要看是不是用了索引/主键. 没用索 ...

  5. A New Defense Against Adversarial Images: Turning a Weakness into a Strength

    目录 概 主要内容 准则1 准则2 总策略 Hu S, Yu T, Guo C, et al. A New Defense Against Adversarial Images: Turning a ...

  6. Saliency maps

    目录 问题 细节 变量 扩展 代码 Deep Inside Convolutional Networks: Visualising Image Classification Models and Sal ...

  7. uniapp中scroll-view自定义滚动条

    注意事项 需在app.vue中添加如下,需要important /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16upx!imp ...

  8. 制作登录页面,点击键盘的 Enter 键或者单击“登录”按钮,验证用户输入的邮箱和密码是否正确

    查看本章节 查看作业目录 需求说明: 制作登录页面 点击键盘的 Enter 键或者单击"登录"按钮,验证用户输入的邮箱和密码是否正确 实现思路: 准备登录的静态页面 在页面中嵌入脚 ...

  9. 【MySQL作业】DDL 和 DML——美和易思使用 DML 删除表数据应用习题

    点击打开所使用到的数据库>>> 删除客户"刘一鸣". 执行 SQL 代码"delete from customer where cName=' 刘一鸣 ...

  10. 如何优雅的设置UI库组件的属性?

    UI库提供了很多组件,组件又带有很多属性,有一些常用属性我们可以记住并且手撸,但是有些不常用的属性,或者需要设置多个属性,这样的情况下写起来就麻烦了,有时候还要打开帮助文档看看属性是怎么设定的,需要设 ...