Vue中使用watch computed

时间 2019-11-09
标签 vue 使用 watch computed 繁體版
原文原文链接
watch：监听属性，来监听dta中的数据变化或者route的变化html
computed：计算属性，vue
<!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>