学习day48

最新推荐文章于 2024-09-10 17:22:42 发布

啊岳的学习

最新推荐文章于 2024-09-10 17:22:42 发布

阅读量625

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/2301_76386566/article/details/131802319

版权

文章介绍了Vue中事件的基本使用，包括v-on或@绑定事件，methods中处理函数的注意事项，以及事件修饰符如prevent、stop、once等的使用。此外，还讨论了计算属性的定义、优势和getter/setter的工作原理，以及如何通过watch进行属性监视和响应变化。

摘要由CSDN通过智能技术生成

事件的基本使用：

1.使用v-on：xxx或@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了

4.methods中配置的函数，都是被Vue所管理的函数，this指向的是vm或组件实例对象

5.@click=“demo”和@click="demo（$event）"效果一致，但后者可以传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        事件的基本使用：
            1.使用v-on：xxx或@xxx绑定事件，其中xxx是事件名
            2.事件的回调需要配置在methods对象中，最终会在vm上
            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了
            4.methods中配置的函数，都是被Vue所管理的函数，this指向的是vm或组件实例对象
            5.@click=“demo”和@click="demo（$event）"效果一致，但后者可以传参
     -->

    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo">点我提示信息(不传参)</button>
        <button @click="showInfo2(66,$event)">点我提示信息(传参)</button>
    </div>


    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    const vm = new Vue({
        el:"#root",
        data:{
            name:'尚硅谷',  
        },
        methods:{
            showInfo(){
                alert('同学你好!')
            },
            showInfo2(number,event){
                console.log(number,event)
                //alert('同学你好!!')
            }
        }
    })

</script>


</html>

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self：只有event，target是当前操作的元素是才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: blue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 
        Vue中的事件修饰符：
          1.prevent：阻止默认事件（常用）
          2.stop：阻止事件冒泡（常用）
          3.once：事件只触发一次（常用）
          4.capture：使用事件的捕获模式
          5.self：只有event，target是当前操作的元素是才触发事件
          6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
     -->

    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 1.prevent：阻止默认事件（常用） -->
        <a href="http://www.atguigu.com" @click="showInfo">点我提示信息</a>
        <!-- 2.stop：阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
    </div>

        <!-- 3.once：事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>

        <!--  4.capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
    </div>



    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    const vm = new Vue({
        el:"#root",
        data:{
            name:'尚硅谷',
        },
        methods:{
            showInfo(e){
                //e.preventDefault()
                e.stopPropagation()
                alert('同学你好')
            },
            showMsg(number){
                console.log(number)
            }
        }
    })

</script>


</html>

1.Vue中常用的按键别名

回车：enter

删除：delete（捕获“删除”和“退格”）

退出：esc

空格：space

换行：tab

上：up

下：down （特殊，配合keydown使用）

左：left

右：right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，弹药注意转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl，alt，shift，meta

(1).配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

(2).配合keydown使用：正常触发事件

4.也可以使用keyCode去指定具体的按键

5。Vue.config.keyCodes 自定义键名=键码，可以去定制按键别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1.Vue中常用的按键别名
          回车：enter
          删除：delete（捕获“删除”和“退格”）
          退出：esc
          空格：space
          换行：tab
          上：up
          下：down （特殊，配合keydown使用）
          左：left
          右：right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，弹药注意转为kebab-case（短横线命名）

        3.系统修饰键（用法特殊）：ctrl，alt，shift，meta
          (1).配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
          (2).配合keydown使用：正常触发事件

        4.也可以使用keyCode去指定具体的按键

        5。Vue.config.keyCodes 自定义键名=键码，可以去定制按键别名

     -->

    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo">
    </div>


    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    const vm = new Vue({
        el:"#root",
        data:{
            name:'尚硅谷',
            
        },
        methods:{
            showInfo(e){
                
                console.log(e.target.value)
            }
        }
    })

</script>


</html>

计算属性：

1.定义：要用的属性不存在，要通过已有的属性计算得来

2.原理：底层借助了Object.defineproperty方法提供getter和setter

3.get函数什么时候执行？

(1)初次读取时会执行一次，

(2)当依赖的数据发生改变时，会再次调用

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

5.备注

1.计算属性最终会出现在vm上，直接读取即可

2.如果计算属性要被修改，那必须写set函数去响应，且set中要引起计算时依赖的数据发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_计算属性实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        计算属性：
            1.定义：要用的属性不存在，要通过已有的属性计算得来
            2.原理：底层借助了Object.defineproperty方法提供getter和setter
            3.get函数什么时候执行？
                (1)初次读取时会执行一次，
                (2)当依赖的数据发生改变时，会再次调用
            4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
            5.备注
               1.计算属性最终会出现在vm上，直接读取即可
               2.如果计算属性要被修改，那必须写set函数去响应，且set中要引起计算时依赖的数据发生改变

     -->


    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        测试：<input type="text" v-model="x"><br>
        全名:<span>{{fullName}}</span>
    </div>


    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    const vm= new Vue({
        el:"#root",
        data:{
            firstName:'张',
            lastName:'三' ,
            x:'你好'
        },
        computed:{
            fullName:{
                //get有什么作用？当有人读取fullName时，get被调用，且返回值就作为fullName的值
                //get什么时候调用？ 1.初次读取fullName时。 2.所依赖的数据发生变化时
            get(){
                console.log('get被调用了')
               // console.log(this)  此处的this为vm
                return this.firstName +'-'+this.lastName
            },
            //
            set(value){
                console.log('set',value)
                const arr=value.split('-')
                this.firstName=arr[0]
                this.lastName=arr[1]
            }
            }
        }
    })

</script>


</html>

监视属性watch：

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法：

(1)new Vue传入watch配置

(2)通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例_监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        监视属性watch：
          1.当被监视的属性变化时，回调函数自动调用，进行相关操作
          2.监视的属性必须存在，才能进行监视
          3.监视的两种写法：
              (1)new Vue传入watch配置
              (2)通过vm.$watch监视
     -->

    <div id="root">
        <h2>今天天气{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    const vm = new Vue({
        el:"#root",
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot=!this.isHot
            }
        },
        // watch:{
        //     isHot:{
        //         immediate:true, //初始化时，让handler调用一下
        //         //handler什么时候调用？ 当isHot发生改变时
        //         handler(newValue,oldValue){
        //             console.log('isHot被修改了',newValue,oldValue)
        //         }
        //     }
        // }
    })
        vm.$watch('isHot',{
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            }
        })
    
</script>

</html>

深度监视：

(1).Vue中的watch默认不监测对象的内部值的改变（一层）

(2)配置deep：true可以监测对象内部值的改变（多层）

备注：

(1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

(2)使用watch时根据根据的具体结构，决定是否采用深度监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例_监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        深度监视：
          (1).Vue中的watch默认不监测对象的内部值的改变（一层）
          (2)配置deep：true可以监测对象内部值的改变（多层）
        备注：
          (1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
          (2)使用watch时根据根据的具体结构，决定是否采用深度监视
     -->

    <div id="root">
        <h2>今天天气{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值时：{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值时：{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    const vm = new Vue({
        el:"#root",
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:2
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot=!this.isHot
            }
        },
        watch:{
            isHot:{
                //immediate:true, //初始化时，让handler调用一下
                //handler什么时候调用？ 当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            // 'numbers.a':{
            //     handler(){
            //         console.log('a被改变了')
            //     }
            // }
            numbers:{
                deep:true,
                handler(){
                    console.log('numbers改变了')
                }
            }
        }
    })
       
    
</script>

</html>

今天差不多到这里了，感觉前端真的东西很多。

啊岳的学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习day48

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，弹药注意转为kebab-case（短横线命名）4.methods中配置的函数，都是被Vue所管理的函数，this指向的是vm或组件实例对象。(1).配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。(1).Vue中的watch默认不监测对象的内部值的改变（一层）3.系统修饰键（用法特殊）：ctrl，alt，shift，meta。
复制链接

扫一扫