Vue(基础三)_监听器与计算属性

一、前言

二、主要内容

1、watch()监听器（监听单一数据）

（1）监听简单的数据类型

       new Vue({

           el:'#app',
           data(){
               return {
                   msg:''

               }
           },
           watch:{
               //第一个参数为新数据，第二个参数为老数据
               msg:function(newV，oldV ){
                   console.log(newV,oldV)
               }
           }
       })

（2）对于复杂的数据类型（数组，对象）不能用上面的来监听

<body>
    <div id="app">
        <input type="" name="" v-model='msg'>
        <h4>{{stu[0].name}}</h4>
    </div>

    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>

    <script type="text/javascript">
        
       new Vue({

           el:'#app',
           data(){
               return {
                   msg:'',
                   stu:[{ name: 'jack'}]

               }
           },
           watch:{
               //第一个参数为新数据，第二个参数为老数据
               msg:function(newV,oldV){
                   console.log(newV,oldV)
               },

               stu:{
                   deep:true,
                   hander:function(newV, oldV){
                       console.log(newV[0].name)

                   }
               }
           }
       })
        
    </script>
</body>

2、computed计算属性（可以监听多个属性）

　　（1）计算属性：在computed中定义计算属性的方法，在页面中用{{方法名}}来使用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计算属性和监视</title>
</head>
<body>
    <div id="demo">
        姓：<input type="text" name="" placeholder="First Name" v-model="firstName"><br>
        名：<input type="text" name="" placeholder="Last Name" v-model="lastName"><br>

        姓名1：<input type="text" name="" placeholder="Last Name" v-model="fullName1"><br>
        
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script>
        new Vue({
            el:"#demo",
            data:{
                firstName: 'A',
                lastName: 'B',
                //fullName1:'A B'
            },
            computed:{
                //fullName1的值是由前两个属性共同计算得到的
                fullName1(){
                    return this.firstName +" "+this.lastName
                }
            }
        })
    </script>
</body>
</html>

计算属性使用(1).html