vue2 part2

E___V___E

已于 2024-08-24 08:53:24 修改

阅读量821

点赞数 12

文章标签： vue vue.js

于 2024-08-23 23:26:06 首次发布

本文链接：https://blog.csdn.net/E___V___E/article/details/141437823

版权

数据代理

通过defineProperty里面传入obj2和x，然后get和set下读取接收下然后再接收set中给对象x用value接收下，这样就能两个数据读取和接收了

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>何为数据代理</title>
</head>

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

</html>

类似指针

控制台输出vm，你的name和address是get和set代理的

new的vue是一个全局对象，无法在控制台变化，error：data.name失败

vm的data实际存在_data中，但是要额外定义data，导入到new vue中，控制台判断是否===，true

~~_data相当于另一个新对象，然后里面的值和原始的data数据一样。~~

控制台vm._data.name='atguigu'
vm.name原来是尚硅谷
vm.name显示"atguigu"

控制台的_data是address，name等是数据劫持

事件处理

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    tle>事件的基本使用</title>
    <!--引入Vue -->
    <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="showInfo1">点我提示信息1（不传参）</button>
            <button@click="showInfo2($event,66)">点我提示信息2（传参）</button><!--传参加小括号，同时showInfo失去了event -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。


    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            showInfo2(event, number) {
                console.log(event, number)
                // console.log(event.target.innerText)
                // console.log(this)//此处的this是vm
                alert('同学你好！！')
            }
        },
        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>
</htm1>

太多东西,自己看p14吧

事件修饰符

所以执行顺序是：触发行为->回调->默认行为?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    tle>事件的基本使用</title>
    <!--引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        * {
            margin-top: 20px;
        }

        .demo1 {
            color: red;
            height: 50px;
        }

        .box1 {
            padding: 50px;
            background-color: skyblue;

        }

        .box2 {
            padding: 20px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <!-- 
    vue的事件修饰符
    1. .prevent 阻止默认事件    
    2. .stop 阻止事件冒泡
    3. .once 只触发一次 
    4. .capture 使用事件的捕获模式
    5. .self 只有event.target是当前操作元素自身时触发事件 
    6. .passive 事件的默认行为立即执行，不会等待事件回调函数执行完毕。
    -->

    <!--准备好一个容器-->
    <div id="root">
        <!-- 阻止默认事件 -->
        <h2>欢迎来到{{name}}学习</h2>
        <a href="https://www.atguigu.com" @click="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click.stop="showInfo">
            <button @click.stop="showInfo">点我</button>
            <!-- 事件冒泡：即多个组件嵌套，触发内层组件时，会一一触发外层事件 -->
        </div>
        <!-- 事件只触发一次 -->
        <button @click.once="showInfo">点我</button>
        <!-- 使用事件的捕获模式： 捕获是由外往内，冒泡相反-->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click.capture="showMsg(2)">
                div2
            </div>
        </div>

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'

        },
        methods: {
            showInfo(e) {//这里写showInfo(e) e.preventDefault()阻止默认事件，可以防止页面跳转
                alert('同学你好')
                comsole.log(e.target)
            },

            showMsg(num) {
                console.log('div' + num + '被点击了')
            }
        }
    })
</script>
</htm1>

键盘事件

016_尚硅谷Vue技术_键盘事件_哔哩哔哩_bilibili

总结

修饰符可以连续写，正常逻辑，先写的先运行

@keyup.ctrl.y就可以ctrl+y

姓名案例-差值语法实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"><br /><br />
        全名：<span>{{firstName.slice(0,3)}} - {{lastName}}</span><!-- firstname只要3位 -->
        全名：<span>{{fullName()}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },

        methods: {
            fullName() {
                return this.firstName.slice(0, 3) + '-' + this.lastName //这里的this是vue实例，所以可以直接调用data里面的属性和方法。

            }//数据发生变化，模板重新解析
        },
    })
</script>

</html>

计算属性

计算属性定义：拿着已经写好的属性，用这些属性计算出来一个属性，称为计算属性，data里面放的是属性，而计算属性需要放到一个单独的集合体中

019_尚硅谷Vue技术_计算属性_哔哩哔哩_bilibili很好的视频，清清楚楚明明白白

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"><br /><br />
        全名：<span>{{firstName.slice(0,3)}} - {{lastName}}</span><!-- firstname只要3位 -->
        全名：<span>???</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
            x: 'hello'
        },
        //相当于computed中的每个对象默认提供getter和setter，我们只是重写了getter
        computed: {
            fullName: {
                //get有什么作用？当有人读取fullname，get就会被调用，返回值是fullname的值
                //get什么时候被调用？1.当fullname的值被读取时，get就会被调用2.依赖的数据发生变化时，get也会被调用
                get() {//get的this指向vm
                    console.log('get调用了')
                    return this.firstname + '-' + this.lastName
                },//在控制台查找vm._data的firstname，lastname都能找到，但是fullname是underfined，compute已经给了vm
                set(value) {
                    console.log('set', value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }

        },
    })
</script>

</html>

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生

计算属性-简写

 get() {//get的this指向vm
                    console.log('get调用了')
                    return this.firstname + '-' + this.lastName
                },//在控制台查找vm._data的firstname，lastname都能找到，但是fullname是underfined，compute已经给了vm


fullName:function(){
    console.log('get调用')
    return this.firstName+'-'+this.lastname

}