Vue学习总结-watch

watch-监视文本框变化

<template>
  <div id="app">
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
  </div>
</template>

<script>

    import About from "./components/About.vue"
    import HelloWorld from "./components/HelloWorld.vue";

    export default {
        name: 'App',
        data: function () {
            return {
                firstname: '',
                lastname: '',
                fullname: '',
            }
        },

        methods: {},
        watch: {
            //监视data中指定数据的变化，然后触发watch中对应的function处理函数
            'firstname': function (newVal, oldVal) {
                console.log('监视到了firstname变化')
                this.fullname = newVal + '-' + this.lastname
            },
            'lastname': function (newVal, oldVal) {
                console.log('lastname')
                this.fullname = this.firstname + '-' + newVal

            }
        }
    }
</script>

<style scoped>
  h1 {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  .container {
    display: flex;
    height: 600px;

  }

  .router-link-active, .myActive {
    color: red;
    font-weight: 100;
    font-size: 20px;
    text-decoration: underline;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 700px;
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(140px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
  }
</style>

watch-监视路由地址的改变

new Vue({
  el: '#app',
  router,
  watch:{
    '$route.path':function (newVal,oldVal) {
      console.log(newVal+'---'+oldVal)
      if(newVal === '/HelloWorld')
      {
        console.log('欢迎进入HelloWorld')
      }
      if(newVal === '/About')
      {
        console.log('欢迎进入About')
      }
    }

  },
  components: { App },
  template: '<App/>'
})

computed-计算属性的使用和3个特点

//可定义一下属性，这些属性叫做【计算属性】，其本质就是一个方法
只不过，我们在使用这些属性的时候，是把它们的名称直接当做属性使用，并不会把属性当方法调用
注意：
1 计算属性，在引用的时候一定不要加()调用，直接把它当做普通属性去使用
2 只要计算属性在这份function内部，所用到的任何data中的数据发生变化，就会立即从新计算这个计算属性的值
3 计算属性的求值结构会被缓存起来，方便下次直接使用，如果计算属性方法中依赖的任何数据，都没有发生变化，则不会从新求值

<template>
  <div id="app">
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
<!--    <router-link to="/HelloWorld">你好</router-link>-->
<!--    <router-link to="/About">关于</router-link>-->
<!--    <router-view></router-view>-->
  </div>
</template>

<script>

    import About from "./components/About.vue"
    import HelloWorld from "./components/HelloWorld.vue";

    export default {
        name: 'App',
        data: function () {
            return {
                firstname: '',
                lastname: '',
                // fullname: '',
            }
        },
        methods: {},
        computed: {
            //可定义一下属性，这些属性叫做【计算属性】，其本质就是一个方法
            //只不过，我们在使用这些属性的时候，是把它们的名称直接当做属性使用，并不会
            //把属性当方法调用
            //注意：1 计算属性，在引用的时候一定不要加()调用，直接把它当做普通属性去使用
            //2 只要计算属性在这份function内部，锁用到的任何data中的数据发送百脑汇
            //就好立即从新计算这个计算属性的值
            //3 计算属性的求值结构会被缓存起来，方便下次直接使用，如果计算属性方法中依赖的任何数据，都没有发生变化，则不会从新求值
            'fullname': function () {
                return this.firstname + '---' + this.lastname

            }
        }
    }
</script>

<style scoped>

  /*.router-link-active, .myActive {*/
  /*  color: red;*/
  /*  font-weight: 100;*/
  /*  font-size: 20px;*/
  /*  text-decoration: underline;*/
  /*}*/

  /*.el-header, .el-footer {*/
  /*  background-color: #B3C0D1;*/
  /*  color: #333;*/
  /*  text-align: center;*/
  /*  line-height: 60px;*/
  /*}*/

  /*.el-main {*/
  /*  background-color: #E9EEF3;*/
  /*  color: #333;*/
  /*  text-align: center;*/
  /*  line-height: 700px;*/
  /*}*/

  /*.v-enter,*/
  /*.v-leave-to {*/
  /*  opacity: 0;*/
  /*  transform: translateX(140px);*/
  /*}*/

  /*.v-enter-active,*/
  /*.v-leave-active {*/
  /*  transition: all 0.5s ease;*/
  /*}*/
</style>

watch、computed、methods的对比