Vue的watch属性

Vue的watch属性可以用来监听data属性中数据的变化



<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="lib/vue.min.js"></script>

        <script src="lib/vue-router-3.0.1.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="firstname" />

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:"#app",

                data:{

                    firstname:"",

                    lastname:""

                },

                methods:{},

                watch:{

                    firstname:function(){

                        console.log(this.firstname)

                    }

                }

            })

        </script>

    </body>

</html>

可以从上述代码中实践得知，输入框内的值变化多少次，控制台就会打印多少次

同时还可以直接在监听的function中使用参数来获取新值与旧值



                watch:{

                    firstname:function(newValue,OldValue){

                        console.log(newValue);

                        console.log(OldValue);

                    }

                }

其中第一个参数是新值，第二个参数是旧值

同时Watch还可以被用来监听路由router的变化，只是这里的监听的元素是固定的



<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="lib/vue.min.js"></script>

        <script src="lib/vue-router-3.0.1.js"></script>

        <style type="text/css">

        </style>

    </head>

    <body>

        <div id="app">

            <!--

                由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号

            -->

<!--            <a href="#/login">登录</a>

            <a href="#/register">注册</a>-->

            <router-link to="/login" tag="span">登录</router-link>

            <router-link to="/register">注册</router-link>

            <router-view></router-view>

        </div>

    </body>

    <script>

        var login={

            template:'<h1>登录组件</h1>'

        }

        var register={

            template:'<h1>注册组件</h1>'

        }

        var routerObj = new VueRouter({

            routes:[

            //此处的component只能使用组件对象，而不能使用注册的模板的名称

                {path:"/login",component:login},

                {path:"/register",component:register}

            ]

        })

        var vm = new Vue({

            el:'#app',

            data:{

            },

            methods:{

            },

            router:routerObj,//将路由规则对象注册到VM实例上

            watch:{

                '$route.path':function(newValue,OldValue){

                        console.log(newValue);

                        console.log(OldValue);

                }

            }

        })

    </script>

</html>

计算属性Computed的作用

computed属性的作用与watch类似，也可以监听属性的变化



<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="lib/vue.min.js"></script>

        <script src="lib/vue-router-3.0.1.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="firstname" />

            <input type="text" v-model="lastname" />

            <input type="text" v-model="fullname" />

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:"#app",

                data:{

                    firstname:"",

                    lastname:""

                },

                methods:{},

/*                watch:{

                    firstname:function(newValue,OldValue){

                        console.log(newValue);

                        console.log(OldValue);

                    }

                }*/

                computed:{

                    fullname:function(){

                        return this.firstname +"-"+this.lastname

                    }

                }

            })

        </script>

    </body>

</html>

只是他会根据他依赖的属性，生成一个属性，让vm对象可以使用这个属性

methods,watch,computed的区别

  1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  2. methods方法表示一个具体的操作，主要书写业务逻辑；
  3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

来源：https://segmentfault.com/a/1190000016285469

Vue的watch和computed属性的更多相关文章

  1. vue中，class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

  2. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. Vue computed属性

    computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...

  4. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

  5. Vue中的computed属性

    阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...

  6. vue的computed属性

    vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号 <div> <input type="text" v-model=&q ...

  7. [vue]计算和侦听属性(computed&watch)

    先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...

  8. 八、Vue中的computed属性

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

  9. 十三、Vue中的computed属性

    以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...

随机推荐

  1. window下安装tensowflow

    tensorflow0.12版本支持windows,但是需要python3.5.x.而我的本机只安装了Anaconda2.7版本.因此我们可以在Anaconda中新增Python3.5的环境. 首先, ...

  2. 高性能内存池NedAlloc

    http://www.nedprod.com/programs/portable/nedmalloc/ http://blog.sina.com.cn/s/blog_6f5b220601012x4t. ...

  3. -[__NSCFString longValue]: unrecognized selector sent to instance

    You can use NSString methods intValue longLongValue. 这个使用longvalue会crash报上面的错误

  4. Dubbo简介及实例

    节点角色说明: Ø  Provider: 暴露服务的服务提供方. Ø  Consumer: 调用远程服务的服务消费方. Ø  Registry: 服务注册与发现的注册中心. Ø  Monitor: 统 ...

  5. intellij idea 提示找不到default activivty

      更换环境之后 ,intellij idea 提示找不到默认的activity.   而查看源代码. 在代码中明显已经设置了默认activity了. 后来发现.程序中有个库工程中的AndroidMe ...

  6. C#中如何让ListView控件点击选中整行

    将Listview控件的FullRowSelect属性置为True,当然Listview的View属性应该是Details. 2017年6月25日17:15:55

  7. beautifulsoup的一些使用

    自动补全代码: import requests from bs4 import BeautifulSoup response=requests.get('https://www.ithome.com/ ...

  8. Linux命令行编辑常见的快捷键(有用, 通用)

    本文讲述了Linux命令行编辑常见的快捷键,希望对您有所帮助. Linux命令行编辑快捷键: history 显示命令历史列表 ↑(Ctrl+p) 显示上一条命令 ↓(Ctrl+n) 显示下一条命令 ...

  9. 《图论》——广度优先遍历算法(BFS)

    十大算法之广度优先遍历: 本文以实例形式讲述了基于Java的图的广度优先遍历算法实现方法,详细方法例如以下: 用邻接矩阵存储图方法: 1.确定图的顶点个数和边的个数 2.输入顶点信息存储在一维数组ve ...

  10. Nginx（一）：安装

    nginx 的安装 下载地址: http://nginx.org/download/nginx-1.4.2.tar.gz 安装准备: nginx依赖于pcre库,要先安装pcre(正则的库) yum ...