VUE基础、1

发布时间：2024年01月05日

VUE最重要的是对于动态数据的处理，通过绑定数据源，更新对于的区域。

<html>
<script src="./vue.js"></script>

<body>
    <div id="div1">
        你好世界
        {{name}},
        {{age}},
        {{1==='1'?'相等':'不相等'}}
        <a :href="url">跳转</a>
        单向绑定：<input v-bind:value="inputData">
        双向绑定：<input v-model:value="inputData" @change="check()">
    </div>
</body>
<script>
    //绑定区域
    const x = new Vue({
        el: '#div1',
        //数据源
        data: function () {
            return get()
        },
        methods: {
            check() {
                console.log(112)
            }
        }
    })
    function check(data) {
        console.log(data.value)
    }
    // setTimeout(() => {
    //     x.$mount('#div1')
    // }, 2000)
    //函数式
    function get() {
        return {
            name: 'qx',
            age: 100,
            url: 'http://www.baidu.com',
            inputData: '123321'
        }
    }
</script>

</html>

VUE使用的是数据代理：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let user = {
        name: 'qx',
        // age: 20
    }
    let nuber = 10;
    //给user对象增加一个属性，隐藏式的，只有调用时才赋值、
    Object.defineProperty(user, 'age', {
        // value:20,
        // enumerable:true,//是否可遍历
        // writable:true,//是否可以修改
        // configurable:true //是否可以删除
        get() {
            //每次调用user.age的时候，就会调用这个函数
            console.log('age被get了')
            return nuber;
        },
        set(data) {
            //每次set这个值，都会被调用
            console.log('age被set了')
            nuber = data
        }
    })
    console.log(user)
</script>

</html>

事件修饰，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        padding: 10px;
    }

    .d2 {
        height: 50px;
        background-color: aqua;
    }
</style>
<body>
<div id="d1">
    <!--prevent去除默认操作，例如跳转-->
    <a href="http://www.baidu.com" @click.prevent="tiao">击</a>
    <!-- stop阻止冒泡：冒泡是指点击子容器，父容器也会触发一次   -->
    <div class="d2" @click="mp">
        <button @click.stop="mp">冒泡</button>
    </div>

    <!-- once 只触发一次 -->
    <button @click.once="mp">只触发一次</button>

    <!-- capture js处理事件是先捕获，再冒泡调用 -->
    <div class="d2" @click.capture="pr(1)">
        <button @click.="pr(2)">冒泡</button>
    </div>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            name: '是我'
        },
        methods: {
            tiao(e) {
                // e.preventDefault()
                alert("你爹")
            }, mp(e) {
                // e.stopPropagation()
                alert("冒泡")
            }, pr(e) {
                console.log(e)
            }
        }

    })
</script>
</html>

键盘事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <input @keydown="pr">
<!--    单独给某个按键附加事件-->
    <input @keydown.enter="ent">
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            name: 'qx'
        },
        methods: {
            pr(e) {
                // e.preventDefault()
                console.log(e.target.value)
            },
            ent(e) {
                console.log(e.target.value)
            }
        }

    })
</script>
</html>

计算数属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <input v-model:value="name">
    <br>
    <input v-model:value="age">
    <br/>
    信息：<span>{{name}}-{{age}}</span>
    <br>
    信息：<span>{{pj()}}</span>
    <br>
    信息：<span>{{listData}}</span>
    <br>
</div>
</body>
<script src="vue.js"></script>
<script>
    var da = {
        name: '12',
        age: 30
    }
    var vm = new Vue({
        el: '#d1',
        data: {
            name: 'qx',
            age: 12
        },
        methods: {
            pj() {
                return this.name + '-' + this.age;
            }
        },
        computed: {
            listData: {
                get() {
                    return this.name + '-' + this.age;
                },
                set(da) {
                    //在控制台将vm.listData=da，就可以赋值
                    this.name = da.name;
                    this.age = da.age;
                }
            }
        }
    })
</script>
</html>

监视数据

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="d1">
    <span>{{xs}}</span>
    <button @click="gai">更改</button>
</div>
</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            name: true
        },
        methods: {
            gai() {
                this.name = !this.name;
            }
        },
        computed: {
            xs: {
                get() {
                    return this.name ? 'q' : 'x'
                }
            }
        },
        // watch: {
        //也可以直接是属性，xs是计算属性
        //     xs: {
        //         handler(newData, oldData) {
        //             console.log(newData, oldData)
        //         }
        //     }
        // }
    })
    vm.$watch('xs', {
        handler(a, b) {
            console.log(a, b)
        }
    })
</script>

</html>

深度监视（监视vue中对象下的对象）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <p>{{user.age}}</p>
    <button @click="user.age++">按钮</button>
    <button @click="user={age:21}">按钮</button>
</div>
</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: "#d1",
        data: {
            user: {
                name: 'qx',
                age: 13
            }
        },
        watch: {
            //监视某个属性变化
            // 'user.age': {
            //     handler() {
            //         console.log("用户年龄发生改变")
            //     }
            // }
            //监视多级属性，默认deep为false
            // user: {
            //     handler() {
            //         console.log("用户被修改")
            //     },
            //     deep: true
            // }
            //深度监视简写
            // user(newValue, oldValue) {
            //     console.log(newValue.age, oldValue.age)
            // }
        }
    })
    vm.$watch('user', function (a, b) {
        console.log(a, b)
    })
</script>

</html>

vue操作样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        padding: 5px;
    }

    .d1 {
        background-color: violet;
    }

    .d2 {
        border: #54ff47;
    }

    .d3 {
        color: palegreen;
    }

    .d4 {
        width: 50px;
        height: 30px;
    }
</style>
<body>
<div id="div1">
    <div class="d1 d2 d3 d4">asdad</div>
    <div :class="'d3'">asdad</div>
    <div :class="classArr">asdad</div>
    <div :class="obj">asdad</div>
</div>
</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            classArr: ['d1', 'd2', 'd3'],
            obj: {
                d1: false,
                d2: true,
                d3: true

            }
        }
    })

</script>


</html>

条件渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <button @click="f=!f">改变显示</button>
    <div v-if="f">
        asdad
    </div>
    <template v-if="f">
        <div>asvs</div>
    </template>
</div>

</body>
<script src="vue.js">
</script>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            f: false
        }
    })
</script>
</html>

列表渲染以及:key的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <ul>
        <!--:key的作用是在创建虚拟dom节点是，进行比较，如果这个key对应的节点已经创建，就直接复用，而不是创建一个新的dom        -->
        <li v-for="(d,index) in arr" :key="d.age">
            {{d.user}} : {{index}}
            <input>
        </li>
    </ul>
    <button @click="add">添加</button>
</div>
</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            arr: [
                {
                    user: 'a',
                    age: 12
                }, {
                    user: 'b',
                    age: 13
                }, {
                    user: 'c',
                    age: 14
                }
            ]
        },
        methods: {
            add() {
                this.arr.unshift({user: "d", age: 15})
            }
        }

    })
</script>

</html>

列表过滤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="d1">
    <input v-model="tkey" placeholder="请输入查询">
    <ul>
        <li v-for="(p,index) in showArr1" :key="p.id">
            {{p.id}}--{{p.name}}
        </li>
    </ul>
</div>

</body>
<script>
    new Vue({
        el: "#d1",
        data: {
            tkey: '',
            objarr: [
                {id: 1, name: 'abc'},
                {id: 2, name: 'cde'},
                {id: 3, name: 'efg'},],
            showArr1: []
        },
        computed: {
            showArr() {
                return this.objarr.filter((x => {
                    return x.name.indexOf(this.tkey) !== -1
                }))
            }
        },
        watch: {
            tkey: {
                immediate: true,
                handler(val) {
                    this.showArr1 = this.objarr.filter((x) => {
                        return x.name.indexOf(val) !== -1
                    })
                }
            }
        }
    })
</script>
</html>

排序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="d1">
    <input v-model="tkey" placeholder="请输入查询">
    <button @click="sortType=1">升序</button>
    <button @click="sortType=2">降序</button>
    <button @click="sortType=0">原顺序</button>
    <ul>
        <li v-for="(p,index) in showArr1" :key="p.id">
            {{p.id}}--{{p.name}}
        </li>
    </ul>
</div>

</body>
<script>
    <!--    0原顺序，1 升序 2 降序-->
    new Vue({
        el: "#d1",
        data: {
            sortType: 0,
            objarr: [
                {id: 1, name: '123'},
                {id: 3, name: '567'},
                {id: 6, name: '231'},
                {id: 2, name: '345'},
                {id: 5, name: '123'},
                {id: 4, name: '789'},
            ],
            tkey: '',
            showArr1: []
        },
        computed: {
            showArr() {
                return this.objarr.filter((x => {
                    return x.name.indexOf(this.tkey) !== -1;
                }));
            }
        },
        watch: {
            tkey: {
                immediate: true,
                handler(val) {
                    this.showArr1 = this.objarr.filter((x) => {
                        return x.name.indexOf(val) !== -1;
                    });
                }
            },
            sortType(val) {
                console.log(val)
                if (val == 0) {
                    this.showArr1 = this.objarr.filter((x => {
                        return x.name.indexOf(this.tkey) !== -1;
                    }))
                } else {
                    this.showArr1 = this.showArr.sort((x1, x2) => {
                        if (val === 1) {
                            return x1.id - x2.id;
                        } else {
                            return -(x1.id - x2.id);
                        }
                    });
                }
            }
        }
    })
</script>
</html>

数据监听的底层原理：

数据监听本质上用的是

Object.defineProperty()

给每个属性加上get，set方法，一旦值发生改变，刷新vue的dom。进行对比操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="d1">
    <div v-for="(p,index) in arr" :key="p.age">
        {{p.name}}--{{p.age}}-{{user.name}}--{{user.age}}-{{user.gender}}
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            arr: [
                {name: 'qx1', age: 12}, {name: 'qx2', age: 13}
            ],
            user: {
                name: 'qx',
                age: 20
            }
        }
    })
    setTimeout(() => {
        alert("我变了")
        Vue.set(vm.arr,1,{name: 'qx3', age: 10});
        // vm.$set(vm.arr, 1, {name: 'qx3', age: 10});
    }, 2000)
</script>
</html>

文章来源:https://blog.csdn.net/qx020814/article/details/135041470
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！