watch：监听属性，来监听dta中的数据变化  或者route的变化

computed：计算属性，

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="vue-2.4.0.js"></script>

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

</head>

<body>

  <div class="app">

    <!-- 如果不使用watch 或者计算属性，我们也可以使用事件绑定机制来引用

     -->

    <input type="text" v-model="fristname">

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

    <input type="text" v-model="countname">

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

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

    <router-view></router-view>

  </div>

  <script>  

    // 路由模板

     var login={

       template:"<h1>登录界面</h1>"

     }

     var zhuce={

       template:"<h1>zhuce界面</h1>"

     }

    // 路由实例

    var router= new VueRouter({

      routes:[

        {path:'/',redirect:'login'},

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

        {path:'/zhuce',component:zhuce}

      ]

    })

    // vm实例

    var vm=new Vue({

      el:'.app',

      data:{

        fristname:'',

        lastname:''

      },

      methods: {

      },

      // 计算属性

      // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，

      // 直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；

        // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；

        // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值

        // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；

      computed: {

        countname:function(){

          // return  是必须的参数  必须有返回值

          return this.fristname+this.lastname;

        }

      },

      // watch 监听data中的属性。

      watch: {

        // 当fristname 发生改变的时候，就会触发这个watch属性

        // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数

        fristname:function(){

          console.log("sdfsdfsf");

        },

        // 监听$route.path 属性，其中这个函数由两个参数  newval和oldval  一个是新的值，一个是旧的值

        '$route.path':function(newval,oldval){

          if(newval==="/login"){

            console.log("欢迎进入登录界面");

          }else if(newval==="/zhuce"){

            console.log("欢迎进入注册界面");

          } 

        }

      },

      router:router

    })

  </script>

</body>

</html>

Vue中使用watch computed的更多相关文章

  1. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  2. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  3. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  4. Vue中method与computed的区别

    为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且 ...

  5. vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...

  6. Vue中watch与computed的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷.对于运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. ...

  7. Vue中computed，methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

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

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

  9. Vue中的computed属性

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

随机推荐

  1. boost写的异步客户端样例代码修改为支持断开重连的代码

    考虑到boost的工业级强度,因此就直接用了,代码的官方示例地址:https://www.boost.org/doc/libs/1_55_0/doc/html/boost_asio/examples/ ...

  2. 转 ORA-13541: system moving window baseline size (691200) greater than retention (432000)

    修改awr生成报告时间间隔和保存时间时报错,由默认的每小时生成,保存8天修改为每半个小时生成一次,保存5天: SQL> exec dbms_workload_repository.modify_ ...

  3. 123457123456#3#----com.ppGame.konglongPuzzle78--前拼后广--konglongPT游戏_pp

    com.ppGame.konglongPuzzle78--前拼后广--konglongPT游戏_pp

  4. PAT 甲级 1068 Find More Coins (30 分) (dp，01背包问题记录最佳选择方案)***

    1068 Find More Coins (30 分)   Eva loves to collect coins from all over the universe, including some ...

  5. layer confirm 三种选择按钮

    layer.confirm('请选择是否通过提现?(tips:同意直接打款,驳回不可恢复)', { btn : ['通过-打款','不通过','通过-已打款'], btn1:function(){ a ...

  6. Java基础教程：垃圾回收

    Java基础教程:垃圾回收 垃圾回收 垃圾回收(Garbage Collection,GC),顾名思义是释放垃圾占用的空间,防止内存泄漏.有效的使用可以使用的内存,对内存堆中已经死亡的或者长时间没有使 ...

  7. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  8. Centos7防火墙关闭和启用iptables操作

    https://yq.aliyun.com/ziliao/33590前序 还是docker惹得最近做的系统都是上的centos7的系统带来的一系列的新环境的适应 补记下:在使用oracle vmbox ...

  9. 【GStreamer开发】GStreamer播放教程05——色彩平衡

    目标 亮度,对比度,色度和饱和度都是常见的视频调节参数,也是GStreamer里面设置色彩平衡的参数.本教程将展示: 如何发现可用的色彩平衡通道 如何改变它们 介绍 <GStreamer基础教程 ...

  10. PHP curl模拟ip和来源进行访问

    PHP curl模拟ip和来源进行访问<pre> public function moniurlqingqiu() { $ch = curl_init(); $curlurl = &quo ...