vue知识总结（二）

发布于：2022-11-27 ⋅ 阅读:(303) ⋅ 点赞:(0)


事件对象

事件对象：$event

谁触发这个事件事件对象就指向谁（事件对象中包含触发这个事件的元素所有信息 ）类似于拖拽

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <!-- 事件对象 $event -->
        <input type="text" @keydown="fun($event)">
    </div>
    <script>
        let vm = new Vue({
            data: {

            },
            methods: {
                fun(e) {
                    console.log(e)
                    if (e.keyCode == 90) {
                        console.log("z被按下了")
                    }
                }
            }

        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

修饰符

通过vue提供的修饰符可以来处理dom事件的一些细节性内容

v-on:事件.修饰符=“函数()”

按键修饰符

优化我们对于键盘事件的相关处理

.up  .down .left .right  .space .enter .ctrl .tab .delete .shift .esc

-------@keydown.space="fun()"

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <input type="text" @keydown.space="fun()">
    </div>
    <script>
        let vm = new Vue({
            data: {

            },
            methods: {
                fun() {
                    console.log("空格被按下了")
                
                }
            }

        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

事件修饰符

-1.stop修饰符  阻止事件传播

-2.prevent修饰符  阻止事件默认行为

-3.captrue修饰符   设置捕获

-4.self修饰符  只会触发自己范围内的事件 不包含子元素

-5.once修饰符  只会触发当前事件一次

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        .fu {
            width: 600px;
            height: 600px;
            background-color: pink;
        }

        .zi {
            width: 300px;
            height: 300px;
            background-color: goldenrod;
        }
    </style>
</head>

<body>
    <div id="demoDiv">
        <div class="fu" @click="fufun()">
            <div class="zi" @click.stop="zifun()"></div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            data: {

            },
            methods: {
             
                    fufun() {
                        console.log("fufufuffufufu")
                    },
                    zifun() {
                        console.log("zizizizziizzi")
                    },
                }
            

        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

v-model修饰符

给表单元素进行数据的双向数据绑定

lazy修饰符

用户使用v-model之后，洪湖每次修改输入的内容，都会将数据同时绑定，为了避免这种情况的发生，使用lazy修饰符来进行限定。只有当用户的input中失去焦点护着用户点击回车按钮时才会将数据进行修改。

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <input type="text" v-model.lazy="inputval">
        <h1>{{inputval}}</h1>
    </div>

    <script>
        let vm = new Vue({
            data: {
                inputval:"我是默认值"
            }
        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

number修饰符

当用户在input中输入数字时，浏览器会默认将输入的数字转化为string类型，使用number修饰符来将输入的数字转为number类型

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="demoDiv">
        没有使用number
        <input type="text" v-model="inputval">
        <hr>
        使用了number
        <input type="text" v-model.number="inputval">
        <hr>
        <button @click="fun()">点我查看类型</button>
    </div>

    <script>
        let vm = new Vue({
            data: {
                inputval:0
            },
            methods:{
                fun(){
                    console.log(typeof(this.inputval))
                }
            }
        })
        vm.$mount("#demoDiv") 
    </script>
</body>
</html>

trim修饰符

使用trim修饰符来去掉首部或者尾部的所有空格

计算机属性：computed

<!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>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
       
    
      <!-- 因为view区域是展示数据的  我们在这个里面处理数据 不合适 会导致页面的可读性比较差 -->
      <h1>基本展示:{{text}}</h1>
      <h1>大写：{{text.toUpperCase()}}</h1>
      <h1>大写截取：{{text.toUpperCase().slice(1,4)}}</h1>
    </div>
    <script>
        let vm=new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefghijk"
            },
         
        })
       
    </script>
</body>
</html>

例如上述代码，我们在view区域是展示 数据的，我们在{{}}中处理数据优点不太合适，会导致页面的可读性比较差。

这个时候我们遇到    一条数据在不同位置展现出不同形态的时候我们可以使用计算机属性

什么是属性？-----》vue实例中的例如text属性

什么是计算机属性？

就是把属性通过加工通过计算返回新的结果 就是计算属性

computed的传统写法：

写在与el data methods 同级位置 其中有俩个方法  get  set

 读取： get方法：必须要写，该函数不接受参数，当初次读取计算属性所依赖的数据发生变化内调用，个getter函数有一个返回值，该返回值就是计算属性的值

语法：

修改： set方法，可选项 接受一个可选参数------参数就是计算属性被修改之后的值--当计算属性的值被修改时调用

 computed:{
       计算出存储结果的名字:{
          //必须要写，该函数不接受参数
          //什么时候被调用?：当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
        get(){
              return 你的计算逻辑
           },
           //可选项 接受一个可选参数（计算属性被修改之后的值）
           //什么时候被调用?： 当计算属性被修改时被调用
            set(value){

            }
        }
    }

<!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>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
       
       <h1>读取data中的数据--{{text}}</h1>

       <input type="text" v-model="newtext">
       <h1>读取计算属性的数据--{{newtext}}</h1>
    </div>
    <script>
        let vm=new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefghijk"
            },
            // 计算属性
            computed:{
                newtext:{
                    get(){
                        console.log("我是计算属性的get方法")
                        return this.text.toUpperCase()
                    },
                    set(value){//当newtext被修改的时候set就会触发 value就是修改之后的数据
                        console.log("我是计算属性的set方法",value)
                    
                    }
                }
            }, 
        })
       
    </script>
</body>
</html>

 computed简写写法推荐使用

语法：computed:{

       处理的变量名（）{

                       return 你的逻辑

            }

     }

<!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>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
       
       <h1>读取data中的数据--{{text}}</h1>


       <h1>读取计算属性的数据--{{newtext}}</h1>
    </div>
    <script>
        let vm=new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefghijk"
            },
            // 计算属性简写
            computed:{
                newtext(){
                    return this.text.toUpperCase()
                }
            }
        })
       
    </script>
</body>
</html>

计算属性是依赖data数据的：计算属性是依赖data里面的属性的，当计算属性依赖的data数据改变时计算属性也会收到通知，做出相关计算返回新的结果

计算属性与方法methods的区别

计算属性处理数据如果被多次调用的时候计算属性只执行一次（因为计算属性在第一次处理好数据之后就会把数据放到缓存中  之后每次读取都是依赖缓存中读取  所以多次调用计算属性只执行一次）.------------计算属性是依赖缓存的   

方法methods 只要被调用就会执行，调用几次就执行几次相对于计算属性依赖缓存而言更消耗内存

watch监听、侦听属性

watch是vue实例的一个属性  它的作用就是用来监听data中的数据  当数据变了watch就会触发 从而调用函数处理一些逻辑

watch简写写法

语法：写在el data methods同级位置

watch:{
    你要监听的data数据(newval,oldval){            

    }

}

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demoDiv">
            <h1>watch</h1>
          
            <input type="text" v-model="text">
            <h1>{{text}}</h1>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    text:""
                },
                methods:{

                },
                // watch监听数据
                watch:{
                    text(newval,oldval){
                        console.log(newval+"---"+oldval)
                    }
                }
            })
        </script>
</body>
</html>

watch传统写法

handler方法：

语法：

watch:{

   text:{

        handler(newval,oldval){

         console.log("11111")}

        }

    }

immediate属性

watch默认绑定，页面首次加载时是不会执行的，只有当值发生变化时参会执行

设置immediate为true后，监听会在值初始化的时候就开始，也就是页面上数据还没有发生变化的时候。

​​​​​​​watch:{
    text:{
      handler(){
           console.log("aaaa");
       },
       immediate:true //true就表示会立即执行
    },
  }

deep属性

deep代表的是深度监听，默认值是false。

watch在监听对象的时候受现代javascript的限制，vue不能检测到对象属性的添加或删除，这个时候deep属性就可以派上用场了，deep意思就是深度监听，监听器会一层一层往下遍历，给对象的所有属性都加上这个监听器，但是这样性能的开销就会非常的大，任何修改obj里面的任何一个属性都会触发这个监听器里的handler

<template>
  <div>
    <input type="text" v-model="obj.name">
    <h1>{{obj.name}}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      obj:{
        name:"xixi"
      }
    }
  },
  watch:{

    obj:{
      handler(){
           console.log("aaaa");
       },
       immediate:true, //true就表示会立即执行
       deep:true
    },
     
  }
}
</script>

<style>

</style>

使用了deep之后，他会把对象中所有的属性都会监听到不管你用不用，反正都会给你监听，name这样性能的开销就会非常的大，对于这一点对deep进行一个优化，我们可以使用字符串形式监听

<template>
  <div>
    <input type="text" v-model="obj.name">
    <h1>{{obj.name}}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      obj:{
        name:"xixi"
      }
    }
  },
  watch:{
    // 字符串方式
    "obj.name":{
      handler(){
           console.log("aaaa");
       },
       immediate:true
    },
     
  }
}

总结：

如果进行问到了watch任何知识点？

首先watch的作用是监听data数据，当data的数据发生改变时watch就会触发一个异步回调函数完成对应逻辑操作。

其次watch有两种写法，第一种简写，使用监听的数据对应一个函数，里面有两个参数newval和oldval,第二种传统的写法，监听的数据里面有一个handler方法，这个方法就是被监听的数据触发之后调用的回调函数，当然里面也有两个形参newval和oldval其次里面还有一个immediate属性，它的作用是watch首次加载不会触发，如果想让watch首次加载或初始化监听，那么就可以设置这个属性为true，开启初始化监听还有就是vue不能检测到对象属性的添加和删除，所以如果要监听对象的属性，那么必须使用deep开启深度监听，但是开启deep监听之后，deep就会把对象的所有属性都监听上，不管用不用都会监听，浪费资源，所以我们可以使用字符串的方式来监听对象的属性从而优化性能

计算属性与watch的区别

计算属性:计算属性是依赖data的数据，当data的数据改变之后计算属性会重新计算返回一个新的结果

watch监听：watch是监听data的数据，当data的数据改变之后，watch会调用一个回调函数完成一些特定的逻辑

计算属性是同步的，watch是异步的

计算属性computed首次运行，默认是深度依赖，适合做筛选，不可异步

watch监听首次不运行默认浅度观测，适合做执行异步或开销较大的操作

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布