Vue事件处理和计算属性和监视属性

事件处理

注意：绑定事件时，函数名()可加可不加，但是在插值语法中如果不加()就会输出函数体，jial()才会输出返回值

alt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">
    <h1>欢迎{{name}}来做客</h1>
    <button @click="showInfo($event,666)">点我提示信息</button>
</div>

<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;


    const vm = new Vue({
        data(){
            return{
                name:'大***'
            }
        },
        methods:{
            showInfo(event,number){
                console.log(number)
                console.log(event);
                alert('同学你好')
            }
        }


    })
    vm.$mount('#test01')
</script>
</body>
</html>

事件修饰符（支持函数式编程）

alt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">
    <!--加了.prevent点击了之后不会跳转页面-->
    <a href="http://www.baidu.com" @click.prevent="showInfo($event)">点我去百度</a>

    <!--阻止事件冒泡，再阻止默认事件-->
    <div class="demo01" @click="showInfo($event)">
        <button @click.stop.prevent="showInfo($event)">点我提示信息</button>
    </div>

    <!--事件只触发一次-->
    <button @click.once="showInfo($event)">我只会执行一次</button>
</div>


<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;

    const vm = new Vue({
        data(){
            return{
                name:'大***'
            }
        },
        methods:{
            showInfo(event){
                console.log(event);
                alert('同学你好')
            }
        }


    })
    vm.$mount('#test01')
</script>
</body>
</html>

键盘事件

alt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">
    <input type="text" placeholder="请输入账户" @keyup.enter="showInfo($event)">
    <!--按下ctrl+y触发事件-->
    <input type="text" placeholder="请输入账户" @keyup.ctrl.y="showInfo($event)">
</div>


<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;

    const vm = new Vue({
        methods:{
            showInfo(event) {
                console.log(event.target.value)
            }
        }
    })
    vm.$mount('#test01')
</script>
</body>
</html>

计算属性:一般不修改，不需要set()（属性：data里的数据）

姓名案例（用计算属性做）

alt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">
    姓：<input type="text" v-model="firstname"><br><br>
    名：<input type="text" v-model="lastname"><br><br>
  
  	<!--不能写成<span>{{fullName()}}</span>，因为计算属性本质是属性，不是函数-->
    全名：<span>{{fullName}}</span>    
</div>


<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;

    const vm = new Vue({
        data:{
            firstname:'张',
            lastname:'三'
        },
        computed:{
            // 完整写法
            // fullName:{
            //     //get有什么作用？当有人读取fullName时，get就会被调用
            //     get(){
            //         return this.firstname+'-'+this.lastname;
            //     },
            //     set(value){
            //         const arr = value.split('-');
            //         this.firstname = arr[0];
            //         this.lastname = arr[1];
            //     }
            //
            // }

            //简写：只有只考虑读取时才能使用
            fullName(){
                    return this.firstname+'-'+this.lastname;
            }
        }
    })
    vm.$mount('#test01')
</script>
</body>
</html>

监视属性

alt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">
    <h1>今天天气很{{weather}}</h1>
    <button @click="fun1($event)">切换天气</button>
</div>


<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;
    const vm = new Vue({
        data:{
            weather:'炎热'
        },
        methods:{
            fun1(e){
                this.weather==='炎热'?
                    (this.weather='寒冷'):
                    (this.weather='炎热');
            }
        },
        //监视的第一种写法
        // watch:{
        //     weather:{
        //         //newValue,oldValue 属性weather改变前后的值
        //         handler(newValue,oldValue){
        //             console.log(oldValue,newValue)
        //         }
        //     }
        // }
    })
    vm.$mount('#test01')

    //监视的第二种写法
    vm.$watch('weather',{
        //newValue,oldValue 属性weather改变前后的值
        handler(newValue,oldValue){
            console.log(oldValue,newValue)
        }
    })
</script>
</body>
</html>

深度监视

alt

data:{
    weather:'炎热'
    a:{
        b:3
    }
},
watch:{
    weather:{
      	//开启深度监视，能监视b
        deep:true,
        //newValue,oldValue 属性weather改变前后的值
        handler(newValue,oldValue){
            console.log(oldValue,newValue)
        }
    }
}