Vue笔记【五】【持续更新】

念故思旧

已于 2023-10-09 11:30:51 修改

阅读量37

点赞数

分类专栏： Vue2学习文章标签： vue.js 笔记前端

于 2023-10-09 11:28:38 首次发布

本文链接：https://blog.csdn.net/weixin_56612338/article/details/133697866

版权

Vue2学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

8.Vue中的修饰符

8.1事件修饰符

Vue当中提供的事件修饰符：
.stop ：停止事件冒泡，等同于 event.stopPropagation()。
.prevent ：等同于 event.preventDefault() 阻止事件的默认行为。
.capture ：添加事件监听器时使用事件捕获模式
添加事件监听器包括两种不同的方式：
一种是从内到外添加。（事件冒泡模式）
一种是从外到内添加。（事件捕获模式）
.self ：这个事件如果是“我自己元素”上发生的事件，这个事件不是别人给我传递过来的事件，则执行对应的程序。
.once ：事件只发生一次
.passive ：passive翻译为顺从/不抵抗。无需等待，直接继续（立即）执行事件的默认行为。
.passive 和 .prevent 修饰符是对立的。不可以共存。（如果一起用，就会报错。）
.prevent：阻止事件的默认行为。
.passive：解除阻止。

8.2按键修饰符

9个比较常用的按键修饰符：
.enter
.tab （必须配合keydown事件使用。）
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
怎么获取某个键的按键修饰符？
第一步：通过event.key获取这个键的真实名字。
第二步：将这个真实名字以kebab-case风格进行命名。
PageDown是真实名字。经过命名之后：page-down
按键修饰符是可以自定义的？
通过Vue的全局配置对象config来进行按键修饰符的自定义。
语法规则：
Vue.config.keyCodes.按键修饰符的名字 = 键值
系统修饰键：4个比较特殊的键
ctrl、alt、shift、meta
对于keydown事件来说：只要按下ctrl键，keydown事件就会触发。
对于keyup事件来说：需要按下ctrl键，并且加上按下组合键，然后松开组合键之后，keyup事件才能触发。

9.计算属性

9.1定义

使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性

Vue的原有属性: data对象当中的属性可以叫做Vue的原有属性。

全新的属性: 表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。

9.2语法格式

语法格式：需要一个新的配置项 computed
         computed : {
         // 这是一个计算属性
         计算属性1 : {
         // setter 和 getter方法。
         // 当读取计算属性1的值的时候，getter方法被自动调用。
         get(){},
          // 当修改计算属性1的值的时候，setter方法被自动调用。
         set(val){}
                    },
         // 这是另一个计算属性
          计算属性2 : {},
         }
//作用
代码得到了复用。
代码更加便于维护了。
代码的执行效率高了。

9.3反转字符串案例

<!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>反转字符串计算属性实现</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        输入的信息：<input type="text" v-model="info"> <br>
        反转的信息：{{reversedInfo}}
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '计算属性-反转字符串案例',
                info : ''
            },
            computed : {
                // 可以定义多个计算属性
                // 完整写法
                reversedInfo : { 
                    get(){
                        return this.info.split('').reverse().join('')
                    },
                    // 当修改计算属性的时候，set方法被自动调用。
                    set(val){
                        this.info = val.split('').reverse().join('')
                    }
                }

                // 简写形式：set不需要的时候。
                /*reversedInfo(){ 
                    return this.info.split('').reverse().join('')
                }*/
            }
        })
    </script>
</body>
</html>

10.侦听属性

10.1定义

侦听属性顾名思义就是侦听属性是否发生变化的一个属性，我们可以侦听data中的原有属性，也可以侦听计算属性

10.2小案例

当我们在文本输入框中输入数字时，控制台打印新的值和旧的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>侦听属性的变化</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>{{msg}}</h1>
        数字:<input type="text" v-model="number">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: '侦听属性的变化',
            number: 0
        },
		//侦听属性
        watch: {
            number: {
                //immediate改为true 当页面第一次加载时，自动执行一次handler,默认为false
                //immediate:true,
                //值每发生一次变化，handler自动执行一次
                handler(newValue, oldVue) {
                    console.log(newValue, oldVue);
                }
            }
        }
    });
</script>

</html>