vue学习第二天——表单修饰符、自定义指令、侦听器、计算属性、过滤器、生命周期、ES6常用方法

关注

原创最新推荐文章于 2026-07-08 12:04:39 发布 271 阅读 AI 写同款· GEO 优化 ›

《Sigrity SystemSI 2023+LPDDR4仿真自学笔记》（一）创建工程（Part1）为了加强SystemSI 2023软件的熟悉度，咱们完整的走一个仿真全流程。阅读详情

mvvm:m：数据层；v：视图层；vm：控制器，实现数据层和视图层的数据保持一直（实现同步）

<script>
        var str = "hello";
        // split("")将字符串分割成数组
        // reverse()颠倒数组的顺序
        // join("")将数组变成一个字符串
        str = str.split("").reverse().join("");
        console.log(str);
    </script>

表单修饰符：

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

<body>
    <div id="app">
        <input type="text" v-model.trim="txt">
        <br>
        <button @click="fn">确定</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                txt: "123456"
            },
            methods: {
                fn() {
                    console.log(this.txt.length);
                }
            }
        })
    </script>
</body>

</html>

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

<body>
    <div id="app">
        <input type="radio" id="male" name="sex" value="1" v-model="val">
        <label for="male">男</label>
        <input type="radio" id="female" name="sex" value="2" v-model="val">
        <label for="female">女</label>
        <br />
        <span>爱好：</span>
        <input type="checkbox" id="ball" value="1" v-model="hobby">
        <label for="ball">篮球</label>
        <input type="checkbox" id="sing" value="2" v-model="hobby">
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" value="3" v-model="hobby">
        <label for="code">写代码</label>
        <br>
        <!-- multiple:多选 -->
        <select v-model="op" multiple>
            <option value="0">请选择职业</option>
            <option value="1">教师</option>
            <option value="2">软件工程师</option>
            <option value="3">律师</option>
        </select>
        <br>
        <textarea v-model="desc"></textarea>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                val: "1",
                hobby: [1, 2],
                // 若没有设置多选，op对应的值就是一个数值："1"；有多选，则是一维数组
                op: [1, 2],
                desc: "你好"
            }
        })
    </script>

</body>

</html>

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

<body>
    <div id="app">
        <input type="text" v-focus>
        <input type="text" v-color="msg" class="txt">

    </div>
    <script>
        // 第一个参数的是指令的名称
        // 多个文本框绑定v-focus,只有一个有效，只作用于最后一个
        Vue.directive("focus", {
            // e是当前元素
            inserted: function (e) {
                e.focus();
                // console.log(e);
            }
        });
        Vue.directive("color", {
            // e是当前元素
            bind: function (e, binding) {
                console.log(binding);
                e.style.backgroundColor = binding.value.color;
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {
                msg: {
                    color: "blue"
                }
            }
        })
    </script>
</body>

</html>

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

<body>
    <div id="app">
        姓：<input type="text" v-model="lName"><br>
        名：<input type="text" v-model="fName"><br>
        <p>{{aName}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                fName: "",
                lName: "",
                aName: ""
            },
            methods: {

            },
            computed: {

            },
            watch: {
                fName: function (val) {
                    // console.log(val);
                    this.aName = this.lName + val;
                },
                lName: function (val) {
                    console.log(val);
                    this.aName = val + this.fName;
                }
            }
        })
    </script>

</body>

</html>

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

<body>
    <div id="app">
        <!-- 方法调用 -->
        <h3>{{reverseMsg()}}</h3>
        <!-- 计算属性后面不永嘉括号，就只写方法名 -->
        <!-- 我是计算属性只输出一次，但是olleh,输出4次 -->
        <h3>{{reverseStr}}</h3>
        <h3>{{reverseStr}}</h3>
        <h3>{{reverseStr}}</h3>
        <h3>{{reverseStr}}</h3>

        <!-- 方法和计算属性的区别：计算属性是基于依赖进行缓存的，只执行一次，而方法不缓存，重新执行 -->
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello"
            },
            methods: {
                reverseMsg() {
                    return this.msg.split("").reverse().join("");
                }
            },
            // 计算属性
            computed: {
                reverseStr() {

                    console.log("我是计算属性");
                    return this.msg.split("").reverse().join("");
                }
            }
        })
    </script>
</body>

</html>

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

<body>
    <div id="app">
        <h3>{{msg|lower}}</h3>
        <!-- num:x;1:a;2:b -->
        <h3>{{num|str(1,2)}}</h3>
    </div>
    <script>
        // 过滤器
        Vue.filter("lower", function (v) {
            // 首个字母大写，再拼接出来首字母之外的字符
            return v.charAt(0).toLowerCase() + v.slice(1);          //school
        });
        // x:num;a:1;b:2
        Vue.filter("str", function (x, a, b) {
            if (x > 10) {
                return x + a;
            } else {
                return x + b;

            }
        })
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "School",
                num: 11
            }
        })
    </script>
</body>

</html>

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

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <!-- 点击之后更新数据 -->
        <button @click="fn">点我</button>
        <!-- 确认销毁 -->
        <button @click="del">销毁当前vue</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "hello"
            },
            methods: {
                fn() {
                    // 数据更新
                    this.msg = "hihihihi";
                },
                del() {
                    if (confirm("你确定要销毁当前Vue吗？")) {
                        // 销毁vue对象
                        this.$destroy();
                    }
                }
            },
            // 分为四个大的阶段，每个大阶段分有两个小阶段（前后），每个步骤只有一次
            // msg、methods初始化之前
            beforeCreate: function () {
                console.log("beforeCreate");
                console.log(this.msg);      //undefined,msg还未初始化
            },
            // msg、methods已初始化完成，msg、methods出现的最早位置
            created: function () {
                console.log("created");
                console.log(this.msg);
            },
            // 挂载前
            beforeMount: function () {
                console.log("beforeMount");
                console.log(document.querySelector("h3").innerHTML);        //{{msg}}，在此步骤，还未渲染
                console.log(this.msg);

            },
            // 挂载后，在此步骤可以操作DOM节点了
            mounted: function () {
                console.log("mounted");
                console.log(document.querySelector("h3").innerHTML);        //hello
                console.log(this.msg);
            },
            // 在此阶段之前的函数都是自动执行的
            // 到此阶段，已经脱离了创建阶段，进入了运行阶段
            // 这两个阶段会根据data数据的改变而选择性的触发0次到多次
            // 数据更新前
            beforeUpdate: function () {
                console.log("beforeUpdate");
                console.log(document.querySelector("h3").innerHTML);
            },
            // 数据更新后
            updated: function () {
                console.log("updated");
                console.log(document.querySelector("h3").innerHTML);
            },
            beforeDestroy: function () {
                console.log("beforeDestroy");
                console.log(this.msg);
                this.fn();
            },
            destroy: function () {
                console.log("destroy");
                console.log(this.msg);
            },
            // render()是一个渲染函数，创建一个新的标签元素，把之前的元素全部清掉
            // render: function (createElement) {
            //     return createElement('h1', "this is a h1");
            // }
            // el是一个函数；里面的两个参数：第一个参数是创建的标签类型，菲尔格参数是标签内容
            // 调用时，记得把console.log(document.querySelector("h3").innerHTML);注释掉，不然就会报错，因为h3已经不存在了
            // render(el) {
            //     return el("div", "我是一个div独苗") ；
            // }
        })
    </script>
</body>

</html>

<!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>es6常用方法</title>
</head>

<body>
    <script>
        var arr = [20, 10, 15, 19, 30, 7, 19, 25, 31];
        // 找到了满足条件的就停止
        var newArr = arr.find((v, i) => {
            return v > 20;
            // return返回的是逻辑值，没有就返回undefined
        })
        console.log(newArr);        //30
        var index = arr.findIndex((v, i) => {
            return v > 20;
        })
        console.log(index);     //30
        // item => item > 20,=>后面没有用大括号，自动返回值，省略了return
        var newa = arr.filter(item => item > 20);
        console.log(newa);      //[30,25,31]
        // 数据去重(有第一次出现了，去掉后面出现的)
        var array = [20, 10, 10, 10, 15, 19, 30, 7, 7, 7, 19, 25, 31, 31];
        // (v, i, self) => {return self.indexOf(v) === i;}
        // =>后面使用了{}，所以要记得用return获取返回值
        // (v, i, self):当前比较的值(v)，索引(i),原数组(self)
        // 例如索引为3的10：(10,3,array);self.indexOf(10)为1，第一次出现的索引值为1，不等于它本身现在的索引值3，所以不加入新数组，达到去重的效果
        var newArray = array.filter((v, i, self) => {
            // self.indexOf(v) === i:比较的值(v)第一次在原数组(self)出现的位置，是否等于当前的索引位置，若是等于则加入新数组，若是不等于，则不加入新数组
            return self.indexOf(v) === i;
        })
        console.log(newArray);
        var newArraya = [];
        // array.forEach((v, i, array) => {
        //     if (v > 20) {
        //         newArraya.push(v);
        //     }
        // })
        newArraya = array.filter((v, i, array) => {
            return v > 20;
        })
        console.log(newArraya);
    </script>
</body>

</html>

<!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>es6常用方法</title>
</head>

<body>
    <script>
        var arr = [20, 10, 15, 19, 30, 7, 19, 25, 31];
        // 是否存在一个30，满足一个就好
        // var bool = arr.some((v, i) => v === 30);     //true
        // 全部都是30，全部满足
        var bool = arr.every((v, i) => v === 30);           //false
        console.log(bool);
        var arr2 = [2, 4, 6];
        var newArr2 = arr2.map((v, i) => {
            return v * 10;
        })
        console.log(newArr2);       //[20,40,60]
        var arr3 = ["谁睡觉", "谁最菜"];
        var newArr3 = arr3.map((v, i) => {
            return `<li>${v}</li>`;
        })
        console.log(newArr3);
        var arr4 = [5, 6, 4, 3]
        var total = arr4.reduce((sum, num) => {
            console.log(sum);       //0,5,11,15
            console.log(num);       //5,6,4,3
            return sum + num;
        }, 0)
        console.log(total);     //18





    </script>
</body>

</html>

收录于