前端路线--Vue（day03）

最新推荐文章于 2023-07-12 23:25:33 发布

喝西瓜汁的兔叽Yan

最新推荐文章于 2023-07-12 23:25:33 发布

阅读量259

点赞数

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

本文链接：https://blog.csdn.net/Yan9_9/article/details/124746810

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

01-自定义指令

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

<body>
    <div id="app">
        <!-- // 使用自定义指令的时 用v-* -->
        <h2 v-color>{{msg}}</h2>
        <h2 v-color>好谷就业力</h2>
    </div>

    <div id="app2">
        <h2 v-color>{{msg}}</h2>
    </div>
</body>
<script>
    //自定义指令---实质上是自定义属性
    // 全局自定义指令和私有自定义指令
    // 全局自定义指令可以在所有的实例中使用，私有自定义指令只能在定义的实例对象中使用
    // console.dir(Vue)

    //1.定义全局指令
    //Vue.directive("指令名称",{钩子函数}) 可以定义全局指令
    Vue.directive("color", { //定义的时候直接写名字就行
        //bind钩子函数
        // 作用:只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
        bind: function(el) {
            //el:指的是使用该指令的DOM元素。
            el.style.color = "red"; //利用js给DOM添加样式
        }
    })


    //定义一个作用范围为app的实例对象
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂"
        }
    })

    //定义一个作用范围为app2的实例对象
    new Vue({
        el: "#app2",
        data: {
            msg: "好谷二哥"
        }
    })
</script>

</html>

02-自定义指令2

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

<body>
    <div id="app">
        <!-- // 使用自定义指令的时 用v-* -->
        <h2 v-color>{{msg}}</h2>
        <h2 v-color>好谷就业力</h2>
    </div>

    <div id="app2">
        <h2 v-color>{{msg}}</h2>
    </div>
</body>
<script>
    //自定义指令---实质上是自定义属性
    // 全局自定义指令和私有自定义指令
    // 全局自定义指令可以在所有的实例中使用，私有自定义指令只能在定义的实例对象中使用
    // console.dir(Vue)

    //1.定义全局指令
    //Vue.directive("指令名称",{钩子函数}) 可以定义全局指令
    Vue.directive("color", { //定义的时候直接写名字就行
        // inserted钩子函数 
        // 作用：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
        inserted: function(el) {
            //el:指的是使用该指令的DOM元素。
            el.style.color = "red"; //利用js给DOM添加样式
        }
    })


    //定义一个作用范围为app的实例对象
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂"
        }
    })

    //定义一个作用范围为app2的实例对象
    new Vue({
        el: "#app2",
        data: {
            msg: "好谷二哥"
        }
    })
</script>

</html>

03-bind和inserted钩子函数的区别

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

<body>
    <div id="app">
        <!-- // 使用自定义指令的时 用v-* -->
        <h2 v-color>{{msg}}</h2>
        <h2 v-color>好谷就业力</h2>
    </div>

    <div id="app2">
        <h2 v-color>{{msg}}</h2>
    </div>
</body>
<script>
    /* 
        bind和inserted区别:
        bind无父节点
        inserted有父节点
    */

    //自定义指令
    Vue.directive("color", { //定义的时候直接写名字就行
        bind: function(el) {
            console.log(el.parentNode); //null 父节点不存在
            el.style.color = "red";
        },
        inserted: function(el) {
            console.log(el.parentNode); //DOM元素 父节点存在
            el.style.color = "red";
        }
    })


    //定义一个作用范围为app的实例对象
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂"
        }
    })

    //定义一个作用范围为app2的实例对象
    new Vue({
        el: "#app2",
        data: {
            msg: "好谷二哥"
        }
    })
</script>

</html>

04-自定义指令传参

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

<body>
    <div id="app">
        <h2 v-color="oRed">{{msg}}</h2>
    </div>

    <div id="app2" v-color="oGreen">
        <h2>{{msg}}</h2>
    </div>

</body>
<script>
    // 需求：定义一个指令v-color="oRed"文字变红色  v-color="oGreen"文字变绿色

    Vue.directive("color", {
        bind: function(el, args) {
            //el:使用指令的DOM元素
            //args:传进来的参数对象
            console.log(args); //对象
            console.log(args.value); //传进来参数的值
            el.style.color = args.value;
        }
    });


    new Vue({
        el: "#app",
        data: {
            msg: "许嵩",
            oRed: "red" //定义上面的oRed
        }
    })

    new Vue({
        el: "#app2",
        data: {
            msg: "vae",
            oGreen: "green" //定义上面的oGreen
        }
    })
</script>

</html>

05-常见的钩子函数

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

<body>
    <div id="app">
        <h2 v-color="oRed">{{msg}}</h2>
        <button @click="changeMsg()">修改msg</button>
    </div>
</body>
<script>
    //定义全局指令v-color
    Vue.directive("color", {
        //钩子函数bind--自定义指令
        bind: function(el, args) {
            el.style.color = args.value;
        },
        //钩子函数inserted--自定义指令
        inserted: function(el) {
            console.log("inserted");
        },
        //钩子函数update--数据修改时执行
        update: function(el) {
            console.log("修改数据时执行了update钩子函数");
        },
        //钩子函数componentUpdated--数据修改完执行
        componentUpdated: function(el) {
            console.log("数据修改完执行了componentUpdated钩子函数");
        },
        //钩子函数unbind--只调用一次,指令与元素解绑时调用
        unbind: function() {
            console.log("元素与指令解绑后调用unbind钩子函数");
        }
        //销毁见下方↓
    });


    //实例化一个Vue对象
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "八个",
            oRed: "red"
        },
        methods: {
            changeMsg() {
                this.msg = "msg被修改了";
            }
        }
    })

    //销毁实例
    //销毁后数据不能再修改
    vm.$destroy();
</script>

</html>

06-私有指令

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

<body>
    <div id="app">
        <h2 v-color="oRed">{{msg}}</h2>
        <button @click="changeMsg()">修改msg</button>
        <br>
        <input type="text" v-focus>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "你过来呀!",
            oRed: "red"
        },
        methods: {
            changeMsg() {
                this.msg = "求求你们别打了";
            }
        },
        //定义私有指令
        directives: {
            // 对象的属性就是指令名
            color: { //color 指令名
                bind: function(el, args) {
                    el.style.color = args.value;
                },
                //钩子函数inserted--自定义指令
                inserted: function(el) {
                    console.log("inserted");
                },
                //钩子函数update--数据修改时执行
                update: function(el) {
                    console.log("修改数据时执行了update钩子函数");
                },
                //钩子函数componentUpdated--数据修改完执行
                componentUpdated: function(el) {
                    console.log("数据修改完执行了componentUpdated钩子函数");
                },
                //钩子函数unbind--只调用一次,指令与元素解绑时调用
                unbind: function() {
                    console.log("元素与指令解绑后调用unbind钩子函数");
                }
                //销毁见下方↓
            },
            // v-focus 自动获取表单焦点
            focus: {
                //bind无法自动选中的原因:
                inserted: function(el) {
                    el.focus();
                }
            }
        }
    });

    // 销毁
    vm.$destroy();
</script>

</html>

07-自定义指令简写

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

<body>
    <div id="app">
        <h2 v-color="oPurple">{{msg}}</h2>
        <h2 v-haogu="txt"></h2>
        <!-- 字面量形式自定义指令 -->
        <h2 v-erge="{color:'orange'}">字面量形式自定义指令</h2>
    </div>
</body>
<script>
    //定义一个全局指令v-color
    Vue.directive("color", {
        bind: function(el, args) {
            el.style.color = args.value;
        }
    });
    //v-erge
    Vue.directive("erge", {
        bind: function(el, args) {
            el.innerHTML = args.value.color;
        }
    });

    // 实例一个Vue对象
    new Vue({
        el: "#app",
        data: {
            msg: "Hui",
            oPurple: "purple",
            txt: "Yan I love You"
        },
        // 定义私有指令
        directives: {
            //自定义指令的简写(默认是bind)
            haogu: function(el, args) {
                el.innerHTML = args.value;
            }
        }
    })
</script>

</html>

08-计算属性computed

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

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h2>方法形式:{{formatMsg()}}</h2>
        <h2>方法形式:{{formatMsg()}}</h2>
        <h2>计算属性形式:{{msgFormat}}</h2>
        <h2>计算属性形式:{{msgFormat}}</h2>
        <button @click="changeMsg()">修改msg</button>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂"
        },
        methods: {
            changeMsg() {
                this.msg = "已修改!"
            },
            formatMsg() {
                console.log("方法形式每次都执行");
                return this.msg.split("").join("-");
            }
        },
        // 计算属性
        // 将好谷学堂===>好-谷-学-堂
        computed: {
            msgFormat() {
                console.log("计算属性出来的字符串只执行一次");
                return this.msg.split("").join("-");
            }
        }

    })


    /* 
    总结：
    1.计算属性：是基于它们的响应式依赖进行缓存的
    2.如果依赖的条件不变，只执行一次，如果条件变化了那么会再次执行


    面试题:方法和计算属性的区别?
    1.方法会重复执行，计算属性是基于它们的响应式依赖进行缓存的
    2.计算属性中必须有return ，方法中可以没有return
    3.方法在使用的时候需要加(),计算属性不用加(使用的是属性)
    */
</script>

</html>

09-侦听器

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

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <div>{{tips}}</div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "哈哈哈",
            tips: ""
        },
        // 侦听器watch
        //可以监视data中的数据变化
        watch: {
            //监听msg的变化
            //属性是data中定义的数据
            msg: function(newVal, oldVal) {
                // newVal:新值
                //oldVal:旧值
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
                if (newVal == "二哥") {
                    this.tips = "用户名可用"
                } else {
                    this.tips = "用户名不可用"
                }
                console.log("msg变化了");
            }
        }
    })
</script>

</html>

10-侦听器watch深度监视

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

<body>
    <div id="app">
        <h2>{{obj.username}}</h2>
        <button @click="changeObj()">修改username</button>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            obj: {
                username: "好谷"
            }
        },
        methods: {
            changeObj() {
                this.obj.username = "二哥";
            }
        },
        watch: {
            // obj: { //监视对象的变化
            //     handler(newVal) {
            //         console.log(newVal);
            //     },
            //     deep: true   //深度监视
            // }
            obj: { //监视对象的变化
                handler(newVal) {
                    console.log(newVal);
                },
                deep: true //深度监视
            }
        }
    })
</script>

</html>

11-全局过滤器

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

<body>
    <div id="app">
        <!--使用过滤器 数据|过滤器名  -->
        <h2>{{msg|formatMsg}}</h2>
    </div>
</body>
<script>
    //需求将msg变化成  //好-谷-学-堂
    // 过滤器：全局过滤器和私有过滤器
    // 全局过滤器所有的实例中都可以使用
    // 私有过滤器只是在定义它的实例中有效
    console.log(Vue);

    //定义一个全局过滤器
    // Vue.filter("过滤器名",callback)
    Vue.filter("formatMsg", function(value) {
        // value:使用过滤器数据---指的是msg
        return value.split("").join("-");
    })

    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂"
        }
    })
</script>

</html>

12-私有过滤器

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

<body>
    <div id="app">
        <!--使用过滤器 数据|过滤器名  -->
        <h2>{{msg|formatMsg}}</h2>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂"
        },
        //定义私有过滤器
        filters: {
            //属性写过滤器名
            formatMsg: function(value) {
                return value.split("").join("-");
            }
        }
    })
</script>

</html>

13-过滤器传递参数

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

<body>
    <div id="app">
        <!--使用过滤器 数据|过滤器名  -->
        <h2>{{msg|formatMsg}}</h2>

        <!-- 当前电脑上的时间 格式化一下  2022-05-11 -->
        <h3>{{time | formatTime("YYYY-MM-DD")}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂",
            time: new Date()
        },
        //定义私有过滤器
        filters: {
            //属性写过滤器名
            formatMsg: function(value) {
                return value.split("").join("-");
            },

            // 时间的过滤器--对应h3
            formatTime: function(value, args) {
                //value:使用过滤器的元素
                //args:传递的参数
                if (args == "YYYY-MM-DD") {
                    return value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate();
                }
            }
        }
    })
</script>

</html>

14-生命周期

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

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <button @click="changeMsg()">更新数据</button>
        <button @click="destroyFn()">销毁实例</button>
    </div>
</body>
<script>
    // 生命周期：一个实例从创建到销毁的过程
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂"
        },
        methods: {
            changeMsg() {
                this.msg = "更新数据";
            },
            destroyFn() {
                this.$destroy(); //销毁实例
            }
        },
        // 生命周期和data同级
        // 1.实例创建之前被调用
        beforeCreate() {
            console.log("beforeCreate--实例创建之前");
            console.log(this.$data); //undefined 
            console.log(this.$el); //undefined
            // debugger;
        },
        // 2.实例创建之后
        // created在实例创建完成后被立即调用此时data 和 methods已经可以使用  但是页面还没有渲染出来
        //最早可在该声明周期中修改数据
        created() {
            console.log("created实例创建之后--最早可以在该生命周期中修改数据");
            console.log(this.$data); //数据已经有了
            console.log(this.$el); //还没有挂载元素
            // debugger;
        },
        //3.模板编译之前
        // beforeMount在挂载开始之前被调用   此时页面上还看不到真实数据 只是一个模板页面而已
        beforeMount() {
            console.log("beforeMount--模板编译之前");
            console.log(this.$el);
            console.log(this.msg); //数据尚未显示
            // debugger;
        },
        //4.模板编译完成
        mounted() {
            console.log("mounted--模板编译完成");
            //最多使用的钩子
            // debugger;
        },
        //5.数据更新之前
        beforeUpdate() {
            console.log("beforeUpdate--数据更新之前");
        },
        // 6.数据更新之后
        updated() {
            console.log("updated--数据更新之后");
        },
        //7.实例销毁之前
        beforeDestroy() {
            console.log("beforeDestroy--实例销毁之前");
        },
        //8.实例销毁之后
        destroyed() {
            console.log("destroyed--实例销毁之后");
        }
    })
</script>

</html>

15-数组变异方法

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

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <input type="text" v-model="str">

        <ul>
            <li v-for="(item,index) in arr" :key="index">{{item}}</li>
        </ul>

        <button @click="add()">添加</button>
        <button @click="add2()">替换2</button>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "好谷学堂",
            str: "",
            arr: []
        },
        methods: {
            add() {
                this.arr.push(this.str);
                this.str = "";
            },
            add2() {
                // this.$set(数组,索引,要添加的值)
                this.$set(this.arr, 0, this.str);
            }
        }
    })
</script>

</html>

喝西瓜汁的兔叽Yan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端路线--Vue（day03）

01-自定义指令<!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"> <ti
复制链接

扫一扫