【Vue】Vue2.0+Vue3.0学习笔记day02

西西歪歪西歪

已于 2022-02-19 17:54:29 修改

阅读量284

点赞数

分类专栏： Vue 文章标签： vue.js 前端 elementui

于 2022-01-03 13:38:57 首次发布

本文链接：https://blog.csdn.net/weixin_58214412/article/details/122276702

版权

Vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

008.数据绑定

009.el和data的两种写法

010.理解MVVM

011.Object.defineProperty（定义对象属性）

008.数据绑定

<body>
    <!-- 
        Vue中有两种数据绑定的方式：
          1.单向绑定（v-bind）：数据只能从data流向页面
          2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
          备注：
             1.双向绑定一般都应用在表单类元素（输入类元素）上（如：input、select等）
             2.v-model：value可以简写为v-model，因为v-model默认收集的就是value值
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 普通写法 -->
        单向数据绑定: <input type="text" v-bind:value="name"><br/>
        双向数据绑定: <input type="text" v-model:value="name">
        <!-- 简写 -->
        单向数据绑定: <input type="text" :value="name"><br/>
        双向数据绑定: <input type="text" v-model="name">

        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <!-- <h2 v-model:x="name">你好啊</h2> -->
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪'
            }
        })
    </script>
</body>

009.el和data的两种写法

<body>
    <!-- 
        el和data的两种写法:
          1.el有两种写法：
             1 new Vue时候配置el属性
             2 先创建Vue实例，随后通过v.$mount('#root')指定el的值
          2.data有两种写法：
             1 对象式
             2 函数式
             如何选择：目前哪种写法都可以，以后学到组件时data必须使用函数式，否则会报错
          3.一个重要原则：
             由vue管理的函数一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了      
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // el的两中写法
        /* const v=new Vue({
            // el:'#root', //第一种写法
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪'
            }
        })
        console.log(v);
        v.$mount('#root') //第二种写法 */

        // data的两种写法
        new Vue({
            el:'#root',
            // 第一种写法 对象式
            /* data:{
                name:'西西歪'
            }  */
            // 第二种写法 函数式
            data(){
                console.log(this); // 此处的this是Vue实例对象
                return{
                    name:'西西歪'
                }
            }
        })
    </script>
</body>

010.理解MVVM

<body>
    <!-- 
        MVVM模型
           1.M：模型（model）：data中的数据
           2.V：视图（view）：模板代码
           3.VM：视图模型（viewmodel）：vue实例
        测试发现：
           1.data中所有的属性最后都出现在VM身上
           2.VM身上所有的属性及vue原型上所有的属性，在vue模板中都可以直接使用
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学校的名称: {{name}}</h1>
        <h1>学校的地址: {{address}}</h1>
        <h1>测试一下1: {{$options}}</h1>
        <h1>测试一下2: {{__patch__}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm = new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪',
                address:'广州',
                a:1
            }
        })
        console.log(vm);
    </script>
</body>

011.Object.defineProperty（定义对象属性）

<!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>回顾object.defineProperty方法</title>
</head>

<body>
    <script>
        let number = 18
        let person = {
            name: '张三',
            sex: '男',
            //直接写数据容易被修改删除
            // age:'18' 
        }

        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable:true, //控制属性是否可以枚举（遍历），默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true  //控制属性是否可以被删除，默认值是false

            // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get(){
                console.log('有人读取age属性了');
                return number
            },
             // 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
             set(value){
                 console.log('有人修改了age属性，且值是',value);
                 number=value
             }
        })

        //keys()提取对象所有属性名变成数组
        // console.log(Object.keys(person));

        console.log(person);
    </script>
</body>

</html>

012.理解数据代理

<!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>
</head>

<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读、写） -->
    <script>
        let obj = {x:100}
        let obj2 = {y:200}
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            set(value){
                obj.x=value
            }
        })
    </script>
</body>

</html>

013.Vue中的数据代理

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

<body>
    <!-- 
      1.Vue中的数据代理：
         通过VM对象来代理data对象中属性的操作（读、写）
      2.Vue中数据代理的好处：
         更加方便的操作data中的数据
      3.基本原理：
          通过Object.defineProperty()把data所有属性添加到VM上
          为每一个添加到VM上的属性都指定一个getter/setter
          在getter/setter内部去操作（读、写）data中对应的属性      
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学校的名称: {{name}}</h1>
        <h1>学校的地址: {{address}}</h1>
    
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm = new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪',
                address:'广州'
            }
        })
    </script>
</body>

</html>

014.事件处理

<!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>
    <!-- 引入Vue -->
    <script 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">
        <h1>欢迎来到{{name}}学习</h1>
        <button v-on:click="showInfo1">点我提示信息1（不传参）</button>
        <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm = new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪'
            },
            methods:{
                showInfo1(event){
                    // console.log(event.target.innerText);
                    // console.log(this); //此处的this是VM
                    alert('同学你好!')
                },
                showInfo2(event,number){
                    console.log(event,number);
                    // console.log(event.target.innerText);
                    // console.log(this); //此处的this是VM
                    // alert('同学你好!!')
                }
            }
        })
    </script>
</body>

</html>

015.事件修饰符

<!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>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;          
        }
        .demo1{
            height: 50px;
            background-color: aqua;
        }
        .box1{
            padding: 5px;
            background-color: aqua;
        }
        .box2{
            padding: 5px;
            background-color: yellowgreen;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: orange;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 
        Vue中的事件修饰符：
          1.prevent：阻止默认事件（常用）;
          2.stop：阻止事件冒泡（常用）;  冒泡：多个组件嵌套，触发内层组件时，会一一触发外层事件
          3.once：事件只触发一次（常用）;
          4.capture：使用事件的捕获模式;  捕获阶段由外往内，冒泡阶段由内往外；
            点击事件先经历捕获阶段再到冒泡阶段，默认下在冒泡阶段才处理事件。
          5.self：只有event.target是当前操作的元素时才触发事件;
          6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕;       
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!-- prevent：阻止默认事件（常用） -->
        <a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343" @click.prevent="showInfo">点我提示信息</a>
        
        <!-- 阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
       
        <!--  事件只触发一次（常用） -->
       <button @click.once="showInfo">点我提示信息</button>
       
       <!-- 使用事件的捕获模式 -->
       <div class="box1" @click.capture="showMsg(1)">
           div1
           <div class="box2" @click="showMsg(2)">
               div2
           </div>
       </div>
       
       <!-- 只有event.target是当前操作的元素时才触发事件 -->
       <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
       </div>

       <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
       <!-- wheel滚轮滚动事件，scroll滚动条滚动事件 -->
       <ul @wheel.passive="demo" class="list">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ul>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm = new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪'
            },
            methods:{
                showInfo(e){              
                    alert('同学你好!')
                    // console.log(e.target);
                },

                showMsg(msg){                  
                    console.log(msg);
                },

                demo(){                  
                    for (let i = 0; i < 100000; i++) {
                        console.log('#');
                        
                    }
                    console.log('累坏了');
                }
            }
        })
    </script>
</body>

</html>

016.键盘事件

<!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>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        1.Vue中常用的按键别名：
          回车=>enter
          删除=>delete（捕获“删除”和“退格”键）
          退出=>esc
          空格=>space
          换行=>tab (特殊，必须配合keydown使用)
          上=>up
          下=>down
          左=>left
          右=>right
        2.Vue中未提供别名的按键，可以使用按键原始的key值去绑定，但要注意由两个单词大写开头组成的词要转为kebab-case（短横线命名）
        3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
          1 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键事件才被触发
          2 配合keydown使用：正常触发事件
        4.也可以使用keyCode去指定具体的按键（不推荐）
        5.Vue.config.keyCode.自定义键名=键码，可以去定制按键别名          
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm = new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪'
            },
            methods:{
                showInfo(e){
                    // keyCode按键编码，13是回车键编码
                   /*  if(e.keyCode !== 13) return */
                    console.log(e.target.value);
                },
               
            }
        })
    </script>
</body>

</html>

017.事件总结

    <!-- 修饰符可以连续写 -->
<div>
            <!-- <a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343" @click.prevent.stop="showInfo">点我提示信息</a> -->
        </div>

西西歪歪西歪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】Vue2.0+Vue3.0学习笔记day02

目录008.数据绑定009.el和data的两种写法010.理解MVVM011.Object.defineProperty（定义对象属性）012.理解数据代理013.Vue中的数据代理014.事件处理015.事件修饰符016.键盘事件017.事件总结
复制链接

扫一扫