VUE学习笔记-2024年4月-CSDN博客

本文链接：https://blog.csdn.net/weixin_54097935/article/details/138966470

VUE学习笔记-2024年4月

文档目录

来源：https://www.bilibili.com/video/BV1Zy4y1K7SH/?spm_id_from=333.337.search-card.all.click
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1.data和el两种写法

data和el两种写法：

1、el的两种写法：

    （1）new Vue时候配置el属性

    （2）先创建Vue实例，然后通过vm.$mount('.root')指向el的值。

2、data的两种写法：

    （1）对象式（就是之前写的那样）

    （2）函数式（注意：data用函数式，return后面必须是对象）

    如何选择：现在两种写法都可以，但是用到组件时，必须用函数式，否则报错。

data: function () {//data用来存储数据
return {
name: ‘阿胜’,
url: ‘https://www.baidu.com’,
address: {
name: ‘China’
}
}

3、原则：

    由Vue管理的函数，一定不能写箭头函数，箭头函数this指向window，如果写了，this就不再是Vue实例了。

2. MVVM模型

1、M：模型（model）：data中的数据；

2、V：视图（view）：模板代码；

3、VM：视图模型（viewmodel）：Vue实例

观察发现：

    1、data中的属性，最后都会出现在VM身上

    2、VM身上的属性以及Vue实例中的属性，在Vue模板（代码）中都可以直接使用

3.Object.defineProperty(定义属性)

object.defineproperty（对象名，对象属性，值）

Object.defineProperty(v,‘age’,{
// value:18;
// enumerable:true,//控制属性是否可以枚举，也就是遍历，默认false
// writable:true,//控制属性是否可以修改，默认false
// configurable:true,//控制属性是否可以被删除，默认false
get(){//当读取时，get函数就被调佣
console.log(‘有人读取age属性’);
return number;
},
set(value){//当修改时，set函数就被调用
console.log(‘修改属性’);
number = value
}
})
object.keys(对象名)：可以将对象的属性转换成数组

5.数据代理

<script>//通过修改obj1的x值，间接修改obj中的x
        var obj = {x:12}
        var obj1 = {y:21}
        Object.defineProperty(obj1,'x',{
            get(){
                return obj.x;
            },
            set(value){
                obj.x = value
            }
        })
    </script>

Vue中的数据代理
在这里插入图片描述
1、Vue中数据代理：

    通过VM对象来代理data对象中属性的操作（读/写）

2、Vue中数据代理的好处：

    更加方便操作data中数据

3、基本原理：

    通过object.defineproperty（）把data对象中所有属性添加到VM中，并且给每一个属性添加getter和setter方法，在getter/setter内部去操作（读/写）data中对应的属性。

6.事件处理

<body>
 
    <div id="root">
        <h1>{{name}}</h1>
        <button @click='showInfo($event,66)'>点我提示信息1</button>
        <button @click="showInfo">点我提示信息2</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data:{
                name:"he"
            },
            methods:{
                showInfo(e,number,a,b,c){
                    console.log(e,number,a,b,c);
                }
            }
        })
    </script>
</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）”效果一致，但是后者传参。

    6、@xxx="yyy",yyy可以写简单的语句

7.事件修饰符

Vue中的事件修饰符：

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

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

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

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

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

    6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；（一般用来优化，移动端用的较多）

    7、修饰符可以连着写！！！例如：@click.prevent.stop（阻止默认行为而且阻止冒泡）

    <style>
        * {
            margin-top: 10px;
        }
        .demo {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
        ul {
            height: 200px;
            width: 200px;
            background-color: #ccc;
            overflow: auto;
        }
        li {
            height: 100px;
 
        }
    </style>
</head>
<body>
    <div class="root">
        <h2>hello,{{name}}</h2>
        <!-- 在事件后面加上prevent后，后面的跳转就不会发生，阻止了默认事件-->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
 
        <!-- 在事件上添加stop会阻止事件冒泡 -->
        <div class="demo " @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
 
        <!-- 在事件上添加once，事件只会触发一次 -->
        <button @click.once="showInfo">点我提示信息</button>
 
        <!-- 默认事件冒泡，在事件后面添加capture后，就是处理捕获 -->
        <div class="demo " @click.capture="showMsg(2)">
            <button @click="showMsg(1)">点我提示信息1</button>
        </div>
        <!-- self：只有event.target是当前操作的元素时才触发事件； -->
        <div class="demo " @click.self="showMsg(2)">
            <button @click="showMsg(1)">点我提示信息1</button>
        </div>
 
        <!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕；（一般用来优化，移动端用的较多） -->
        <ul @wheel.passive="showInfo2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
 
    </div>
    <script>
        new Vue({
            el:'.root',
            data:{name:'阿胜'},
            methods:{
                showInfo(){
                    alert('同学你好帅!!!')
                },
                showMsg(e){
                    console.log(e);
                    alert('hello')
                },
                showInfo2(){
                    for(var i =0;i<100000;i++){
                        console.log('#');
                    }
                }
            }
        })
    </script>
</body>

8.键盘事件

1、Vue中常用的键盘别名：

    回车 => enter

    删除 => delete（捕获“删除”和‘退格’键）

    退出 => esc

    空格 => space

    换行 => tab（特殊，必须配合keydown去使用）

    上 => up

   下=> down

    左 => left

    右 => right

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

3、系统修饰键（用法特殊）：Ctrl、Alt、shift、meta（win键）

    （1）配合keyup使用：按下修饰键的同时，还得按下其他键，随后释放其他键，事件才触发。

    （2）配合keydown使用：正常触发

    （3）如果想ctrl + y 触发，可以写@keyup.ctrl.y

4、可以使用keycode去指定具体按键（不推荐，以后弃用）

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

<body>
    <div class="root">
        <h2>hello,{{name}}</h2>
        <!-- 按下enter后才会触发事件 -->
        <input type="text" placeholder="输入完后按enter" @keydown.up="showInfo">
 
        <!-- 没有别名的大写键 -->
        <input type="text" placeholder="输入完后按capslock" @keydown.caps-lock="showInfo">
 
        
        <input type="text" placeholder="输入完后按ctrl" @keyup.ctrl="showInfo">
 
    </div>
    <script> 
        new Vue({
            el:'.root',
            data:{
                name:'阿胜'
            },
            methods:{
                showInfo(e){
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>