Vue核心（二）

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量205 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43776195/article/details/119857817
版权

前端 vue.js

文章目录

在这里插入图片描述

Vue核心知识点（二）

前言

本博客是对以下视频教程做的一个笔记总结，这个笔记和视频不是一一对应的，但可作为参考，不喜勿喷。

2021最新Vue迅速上手教程丨vue3.0入门到精通

本博客是Vue核心知识点的第二篇，第一篇在这儿：Vue核心（一） 。由于内容太多，一篇博客写不完，所以写了**Vue核心知识点（二）**这篇博客。

如果对你有所帮助，欢迎点赞，评论，转发。

这篇博客的主要内容有：

  • 指令补充==>自定义指令。
  • 指令补充==>局部指令和全局指令。
  • 计算和监视属性。
  • 过滤器。
  • 收集表单数据。

1、自定义指令、局部指令、全局指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以当元素被插入页面时，让其所绑定的input元素默认获取焦点。

1.1 代码示例

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>自定义指令、全局指令、局部指令</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    <h2>1、数字放大10倍</h2>
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>
    <hr>
    <h2>2、当元素被插入页面时，让绑定的input元素默认获取焦点</h2>
    <input type="text" v-fbind="n" v-abc v-def>
    <!--<input type="text" v-fbind:value="n"> v-fbind指令的value值为n-->
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //关闭Vue的生产提示

    /*自定义全局指令abc（配置对象）*/
    Vue.directive('abc', {
        /*指令和元素成功绑定时（一上来）*/
        bind(element, binding) {
            console.log("指令和元素成功绑定");
        },
        /*指令所在元素被插入页面时*/
        inserted(element, binding) {
            console.log("指令所在元素被插入页面");
        },
        /*指令所在的模板被重新解析时（模板中的数据发生改变时，模板会被重新解析）*/
        update(element, binding) {
            console.log("模板中数据发生改变，指令所在模板被重新解析");
        }
    });

    /*自定义全局指令def（函数式）*/
    Vue.directive('def', (element, binding) => {
        //箭头函数
        console.log("全局指令---函数式---");
        console.log("def指令的value值---" + binding.value);
    });

    const vm = new Vue({
        data() {
            return {
                n: 1
            };
        },
        /*定义指令（局部）*/
        directives: {
            /*函数形式*/
            // big:function (element,binding) {}
            big(element, binding) {

                //big函数何时会被调用？？
                //1、指令和元素绑定成功时（一上来）
                //2、指令所在模板被重新解析时

                /*指令参数输出*/
                // console.log('big--this---');
                // console.log(this); //此处的this是window
                // console.log('big--element---');
                // console.log(element); //使用big指令的标签，此处是span标签
                // console.log('big--binding---');
                // console.log(binding); //绑定对象，包含了一系列参数，如：指令的value值

                element.innerText = binding.value * 10; //放大10倍
            },
            /*配置对象形式*/
            fbind: {
                /*指令和元素成功绑定时（一上来）*/
                bind(element, binding) {
                    console.log("指令和元素成功绑定");
                    element.value = binding.value;
                },
                /*指令所在元素被插入页面时*/
                inserted(element, binding) {
                    console.log("指令所在元素被插入页面");
                    /*当元素被成功插入页面时，元素获取焦点
                    （注意，元素没有被插入页面时，元素是无法获取到焦点的）*/
                    element.focus(); //元素获取焦点
                },
                /*指令所在的模板被重新解析时（模板中的数据发生改变时，模板会被重新解析）*/
                update(element, binding) {
                    console.log("模板中数据发生改变，指令所在模板被重新解析");
                    element.value = binding.value;
                }
            }
        }
    });
    vm.$mount('#root');
</script>
</html>

指令参数输出如下：

在这里插入图片描述

1.2 总结

自定义指令总结：

  • 一、定义语法：

    • 局部指令：

      new Vue({
  directives{指令名:回调函数}
})

      或者

      new Vue({
  directives:{指令名:配置对象}
})

    • 全局指令：

      Vue.directive(指令名,配置对象)

      或者

      Vue.directive(指令名,回调函数)

      注意：directives和data，methods等属性是同级的！！

  • 二、配置对象中常用的3个回调：

    • bind：指令与元素成功绑定时调用。
    • inserted：指令所在元素被插入页面时调用。
    • update：指令所在模板结构被重新解析时调用。

  • 三、备注：

    • 指令定义时不加v-，但使用时要加v-；
    • 指令名如果是多个单词，要使用kebab-case命名方式（小写，多个单词间横线隔开），
    • 不要用camelCase（小驼峰）命名。

2、计算属性

案例：姓名案例。

需求：根据姓和名，拼成全名。

如下图：

在这里插入图片描述

2.1 姓名案例_插值语法实现

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>姓名案例_插值语法实现</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"> <br><br>
    名：<input type="text" v-model="endName"> <br><br>
    全名：{{firstName}}--{{endName}}
</div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        data() {
            return {
                firstName: '张',
                endName: '三'
            };
        }
    });
    /*将Vue实例挂载到root容器上*/
    vm.$mount('#root');
</script>
</html>

2.2 姓名案例_methods实现

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>姓名案例_methods实现</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"> <br><br>
    名：<input type="text" v-model="endName"> <br><br>
    <!--差值语法：只要Vue实例和原型上有的都可以直接写，
    fullName函数是Vue实例上有的，所以可以直接写调用-->
    全名：{{fullName()}}
</div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        /*data:{
            firstName: '张',
            endName: '三'
        },*/

        data() {
            return {
                firstName: '张',
                endName: '三'
            };
        },
        methods: {
            /*全名*/
            fullName() {
                return this.firstName + '---' + this.endName;
            }
        }
    });
    /*将Vue实例挂载到root容器上*/
    vm.$mount('#root');
</script>
</html>

2.3 姓名案例_计算属性实现

定义：所谓计算属性是指，要用的属性不存在，要通过已有属性计算得来。

即：在已有属性的基础上，通过对已有属性的计算，产生一个新的属性。

2.3.1 代码示例

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>姓名案例_计算属性实现</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"> <br><br>
    名：<input type="text" v-model="endName"> <br><br>
    全名：{{fullName}}
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    var vm = new Vue({
        data() {
            return {
                firstName: '张',
                endName: '三'
            };
        },
        computed: {
            fullName: {
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get() {
                    console.log("get...");
                    /*一般来说，由Vue管理的函数，只要不写成箭头函数，this都是Vue实例对象*/
                    console.log(this); //此处的this是vm
                    return this.firstName + '-' + this.endName;
                },
                //set什么时候调用? 当fullName被修改时。
                set(value) {
                    console.log("set...", value);
                    const arr = value.split('-');
                    /*当fullName被修改时，引起fullName这个计算属性所依赖的属性发生变化，
                    从而引起计算属性fullName的变化。*/
                    this.firstName = arr[0];
                    this.endName = arr[1];
                }
            }
        }

        // computed: {
        //     //计算属性简写
        //     fullName() {
        //         console.log('get被调用了');
        //         return this.firstName + '-' + this.lastName;
        //     }
        // }

    });
    /*将vm挂载到root容器上*/
    vm.$mount('#root');
</script>
</html>
2.3.2 总结

计算属性：

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

3、监视属性

案例：点击按钮，切换天气。

如图：

在这里插入图片描述

3.1 天气案例_计算属性实现

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>天气案例_计算属性实现</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    <h2>今天天气很{{weatherInfo}}</h2>
    <button @click="isHot=!isHot">切换天气</button>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        data() {
            return {
                isHot: true, //用于判断天气是否是炎热
            };
        },
        computed: {
            weatherInfo() {
                /*计算属性的简写形式：
                当有人读取weatherInfo属性时，就会执行该函数，实际上就是get()*/
                return this.isHot ? '炎热' : '凉爽';
            }
        }
    });
    /*将Vue实例挂载到root容器上*/
    vm.$mount('#root');
</script>
</html>

3.2 天气案例_监视属性watch

所谓监视，就是监视某些属性的值是否发生了改变，

而监视属性就是为了监视这些属性变化，而设定的一个属性（watch）。

3.2.1 代码示例

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>天气案例_监视属性_watch实现</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    <h2>今天天气很{{weatherInfo}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        data() {
            return {
                isHot: true,
            };
        },
        methods: {
            /*切换天气*/
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        /*监视属性：第一种写法*/
        // watch: {
        //     isHot: {
        //         immediate: true, //初始化时调用一下handler
        //         //监视isHot属性，当isHot属性值发生改变时，handler函数自动会被调用
        //         handler(newValue, oldValue) {
        //             //handler什么时候调用？当isHot发生改变时。
        //             console.log('isHot被修改了');
        //             console.log('新值：' + newValue);
        //             console.log('旧值：' + oldValue);
        //         }
        //     }
        // },
        computed: {
            weatherInfo() {
                return this.isHot ? '炎热' : '凉爽';
            }
        }
    });
    /*挂载Vue实例*/
    vm.$mount('#root');

    /*监视属性：第二种写法（常用）*/
    //如果开始的时候不知道要监视什么属性，后面可以采取这种方式对属性进行监视
    vm.$watch('isHot', {
        immediate: true, //初始化时调用一下handler
        //监视isHot属性，当isHot属性值发生改变时，handler函数自动会被调用
        handler(newValue, oldValue) {
            console.log('isHot被修改了');
            console.log('新值：' + newValue);
            console.log('旧值：' + oldValue);
        }
    });
</script>
</html>
3.2.2 总结

监视属性watch：

  • 当被监视的属性变化时, 回调函数自动调用, 进行相关操作。
  • 监视的属性必须存在，才能进行监视！！
  • 监视的两种写法：
    • new Vue时传入watch配置。
    • 通过vm.$watch监视。
  • 监视属性的作用：
  • 当所监视的属性的值发生改变时，需要做一些事情（操作），
  • 如：向后台发送请求等。

3.3 天气案例_深度监视

watch默认是浅层次的监视（一层），

深度监视是指，如果所监视的属性有多层（对象），

通过深度监视可以监视到属性内部值的变化。

3.3.1 代码示例

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>天气案例_监视属性</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    <h2>今天天气很{{weatherInfo}}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr/>
    <h3>a的值是：{{numbers.a}}</h3>
    <button @click="numbers.a++">a++</button>
    <h3>b的值是：{{numbers.b}}</h3>
    <button @click="numbers.b++">b++</button>
    <h3>e: {{numbers.c.d.e}}</h3>
    <button @click="numbers={a:666,b:999}">彻底替换掉numbers</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        data() {
            return {
                isHot: true,
                //深度监视：测试数据（numbers）
                numbers: {
                    a: 1,
                    b: 2,
                    c: {
                        d: {e: 3}
                    }
                }
            };
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        computed: {
            weatherInfo() {
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        watch: {
            /*监视numbers对象属性的变化*/
            numbers: {
                deep: true, //开启深度监视
                handler() {
                    console.log('numbers变了...');
                }
            },
            //简写
            isHot(newValue, oldValue) {
                //此处的this是Vue实例对象
                console.log('isHot被修改了', newValue, oldValue, this);
            }
        }
    });

    vm.$mount('#root');

    /*vm.$watch('isHot', {
        immediate: true, //初始化时，让handler默认执行一次
        deep: true, //开启深度监视
        handler(newVal, oldVal) {
            console.log('isHot被改了...');
        }
    });*/
    vm.$watch('numbers.a', {
        immediate: true, //初始化时，让handler默认执行一次
        deep: true, //开启深度监视
        handler(newVal, oldVal) {
            //此处的this是Vue实例对象（handler写成普通函数）
            console.log('a变了...', this);
        }
    });
    //简写
    vm.$watch('numbers.a', (newValue, oldValue) => {

        /*****************个人理解，可能不对*************************/
        //此处的this是window（handler写成箭头函数）
       //箭头函数的this根据代码上下文决定，
       //向外找到==>$watch()这个函数，这个函数底层是window管理的，
       //所以箭头函数中的this指向的是window，而不是指向Vue实例对象
       /*****************个人理解，可能不对*************************/
        console.log('a变了...', newValue, oldValue, this);
    });
</script>
</html>
3.3.2 总结

  • 深度监视：

    • Vue中的watch默认不监测对象内部值的改变（一层）。

    • 配置deep:true可以监测对象内部值改变（多层）。

    • 监视属性都有简写的形式。

      watch: {
      //简写
      属性名(newValue, oldValue) {
          //此处的this是Vue实例对象
           console.log('xxx被修改了', newValue, oldValue, this);
      }
}

      或

      //简写
vm.$watch('numbers.a', (newValue, oldValue) => {
  //此处的this是window（handler写成箭头函数）
  console.log('a变了...', newValue, oldValue, this);
});

  • 备注：

    • Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
    • 使用watch时根据数据的具体结构，决定是否采用深度监视。
    • 注意this指向问题。

  1. 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

  2. 箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。

例如下面这段函数中，this指向的是Person对象，此时的箭头函数所处的宿主对象是Person，而不是执行时的对象Window，所以this指向的是person。

在这里插入图片描述

参考：关于箭头函数中的this的指向

3.4 姓名案例_watch实现

3.4.1 代码示例

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>姓名案例_watch实现</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/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>{{fullName}}</span> <br/><br/>
</div>
</body>

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

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            endName: '三',
            fullName: '张-三'
        },
        watch: {
            firstName(val) {
                setTimeout(() => {
                    console.log(this);
                    this.fullName = val + '-' + this.lastName;
                }, 1000);
            },
            endName(val) {
                this.fullName = this.firstName + '-' + val;
            }
        }
    });
</script>
</html>
3.4.2 总结（重要）

computed和watch之间的区别：

  1. computed能完成的功能，watch都可以完成。
  2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
  3. 两个重要的小原则：
    • 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
    • 所有不被Vue所管理的函数， 最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
    • 不被Vue所管理的函数有：定时器的回调函数、ajax的回调函数、Promise的回调函数等。

4、过滤器

所谓过滤器，是指对要显示的数据进行特定格式化后（也就是对数据进行处理后）再显示，

适用于一些简单逻辑的处理。

4.1 代码示例

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>过滤器</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--dayjs: 时间相关的js工具包-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- methods实现 -->
    <h3>现在是：{{getFormatTime()}}</h3>
    <!-- 计算属性实现 -->
    <h3>现在是：{{formatTime}}</h3>
    <!-- 过滤器实现 |的左边time的值作为过滤器的第一个参数 -->
    <h3>现在是：{{time | timeFormater}}</h3>
    <!-- 过滤器实现（传参） -->
    <!--可以是多个过滤器，从左到右，一起起效果-->
    <h3>现在是：{{time|timeFormater('YYYY年MM月DD日 HH:mm')|mySlice}}</h3>
    <!--和v-bind配合使用，如下：对msg使用mySlice过滤器，进行字符串截取，y="Hell"-->
    <h3 :y="msg|mySlice">哈哈</h3>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false; //关闭Vue的生产提示

    /*定义全局过滤器：多个Vue实例中可以用*/
    Vue.filter('mySlice', function (value) {
        //从0开始，截取4个字符
        return value.slice(0, 4);
    });

    const vm = new Vue({
        data() {
            return {
                time: 1628969177603,//时间戳
                msg: 'Hello, Vue!'
            };
        },
        methods: {
            getFormatTime() {
                console.log(this.time);
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
        computed: {
            formatTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
        /*局部过滤器*/
        filters: {
            /*定义了一个名叫timeFormater的过滤器：过滤器要有返回值，否则页面上什么也没有。
            * 不传参，字符串格式就默认为 str 指定的字符串，如果传参，就替换为参数指定的*/
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                console.log('value----', value);
                return dayjs(value).format(str);
            }
        }
    });
    /*挂载Vue实例到root容器上*/
    vm.$mount('#root');
</script>
</html>

4.2 总结

过滤器：

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  • 分类：
    • 全局过滤器：多个Vue实例中可以用。
    • 局部过滤器：在哪个Vue实例中定义，哪个Vue实例就可以使用。
  • 语法：
    • 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{ }}。
    • 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”。
  • 备注：
    • 过滤器也可以接收额外参数、多个过滤器也可以串联。
    • 并没有改变原本的数据, 是产生新的对应的数据。
    • 使用过滤器时，| 的左边变量的值作为过滤器的第一个参数。

5、收集表单数据

这个案例只是为了熟悉一些和表单相关的指令和修饰符。

5.1 代码示例

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>收集表单数据</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    <!--阻止form中button的默认提交事件-->
    <form @submit.prevent="showInfo()">
        <!--v-model.trim：去掉前后的空格，中间的不去-->
        账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
        <!--v-model.trim：去掉前后的空格，中间的不去-->
        密码：<input type="password" v-model.trim="userInfo.password"> <br/><br/>
        <!--v-model.number：限制只能输入数字-->
        年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
        性别：
        男<input type="radio" name="sex" value="male" v-model="userInfo.sex">
        女<input type="radio" name="sex" value="female" v-model="userInfo.sex"> <br/><br/>
        爱好：
        学习<input type="checkbox" value="study" v-model="userInfo.hobby">
        打游戏<input type="checkbox" value="game" v-model="userInfo.hobby">
        吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby">
        <br/><br/>
        所属校区
        <select v-model="userInfo.city">
            <option value="">请选择城市</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="guangzhou">广州</option>
        </select>
        <br/><br/>
        其他信息：
        <!--trim：去掉前后的空格，中间的不去
        lazy：当失去焦点后再收集数据-->
        <textarea v-model.trim.lazy="userInfo.other"></textarea> <br/><br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
        <!--form表单中的button按钮，默认会自动提交表单在表单页面中，
        在form中的button默认的时候点击时间会执行form的提交事件（相当于默认为submit类型），
        如果需要阻止它：将button的type修改为button可以阻止（或者采取其他方式阻止）。
        -->
        <!--type="button"阻止默认提交，默认为 type="submit"-->
        <!--<button type="button">提交</button>-->
        <button>提交</button>
    </form>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false; //关闭Vue的生产提示
    const vm = new Vue({
        data() {
            return {
                /*用户信息*/
                userInfo: {
                    account: '', //账号
                    password: '', //密码
                    age: 18, //年龄
                    sex: 'female', //性别
                    hobby: [], //爱好
                    city: 'guangzhou', //城市
                    other: '', //文本域
                    agree: '', //复选框（同意or不同意协议）
                }
            };
        },
        methods: {
            showInfo() {
                //将js对象转换为字符串，然后输出
                console.log(JSON.stringify(this.userInfo));
            }
        }
    });
    /*挂载Vue实例到root容器上*/
    vm.$mount('#root');
</script>
</html>

5.2 总结

  • 若：< input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
  • 若：< input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
  • 若：< input type="checkbox"/>
    • 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）。
    • 配置input的value属性：
      • v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）。
      • v-model的初始值是数组，那么收集的的就是value组成的数组。
  • 备注：v-model的三个修饰符：
    • lazy：失去焦点再收集数据。
    • number：输入字符串转为有效的数字。
    • trim：输入首尾空格过滤。

6、结语

这篇博客就写到这里，有什么不对的地方欢迎指正。

如果对你有帮助，欢迎点赞，评论和转发。

谢谢。

sunnyboy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
浅谈vue的一些小小资料
qq_56713135的博客
05-07 136
1.v-if和v-show区别 答：v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除， 有更高的切换消耗，适合在请求后台接口，用接口返回数据渲染生成多个 元素的时候，把一个元素作为包装元素，能更加快捷判断 v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display， 设置none或者是block，DOM元素是还存在的，有更高的初始渲染消耗 适合频繁的切换，比如商品分类选项卡 2.v-for中key的作用 ...
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 7952
常规遍历方法 for i forEach 箭头函数=> for of 遍历 for in 遍历 for in 遍历的 是 数组下表 ,适合 遍历集合 箭头函数=> ES6标准新增了一种新的函数：Arrow Function（箭头函数） 基础语法 var fn1 = function(a, b) { return a + b } function fn2(a, b) { return a + b } 使用ES6箭头函数语法定义函数，将原函数的“func
js---new Image()宿主对象
muzidigbig的博客
10-01 9436
javascript 生成img标签的3种方式（对象、方法、html） <div id="d1"></div> <script> //HTML 方式一 function a() { document.getElementById("d1").innerHTML = "<img src='http://baike.bai...
vue-自定义指令
qq_52135740的博客
07-27 442
自定义指令 一、定义语法： (1).局部指令： new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) }) (2).全局指令： Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 二、配置对象中常用的3个回调： (1).bind：指令与元素成功绑定时调用。 (2).inserted：指令所在元素被插入
前端VUE3.0,DAY28，vue自定义指令
疯子的梦想@的博客
09-01 124
VUE3.0,DAY28自定义指令案例需求示范1案例需求示范2总结 自定义指令 1.自定义指令，即DOM元素需要自己进行操作，比如v-show是内嵌指令，背后有个display的DOM操作是vue帮我们操作了，那么自定义就是不用vue，人工进行操作DOM。 案例需求示范1 2.需求:定义一个v-big指令， 和v-text功能类似， 但会把绑定的数值放大10倍。 <!DOCTYPE html> <html lang="en"> <head> <meta c
vue核心技术（二）综合案例-购物车
02-11
在"vue核心技术（二）综合案例-购物车"中，我们将主要关注以下几个核心概念： 1. **Vue实例和数据绑定**： 在购物车案例中，Vue实例是整个应用的基础。通过创建Vue实例，我们可以定义数据模型，这些数据模型会被...
Vue核心技术实战精讲
06-21
本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之...
vue的核心js.zip
09-16
Vue的核心理念是让开发过程变得简单且高效，它允许开发者通过声明式的语法来构建可复用的组件，这些组件能够响应数据变化并自动更新视图。Vue的核心js.zip文件中包含了Vue 2.6.10版本的源码，这使得我们可以深入理解...
vue教程下载，vue核心技术
12-26
vue教程下载 实战vue2018核心技术，课程下载，适合入门小白进阶参考
Vue学习笔记2
qq_48238787的博客
08-13 167
1:列表渲染中key原理(面试重点) 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：   ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！    ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到与新虚拟DO
Vue2——Vue自定义指令
mantou_riji的博客
07-18 2647
需要在directives： 中进行指令的配置定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。尝试使用函数形式实现 但是focus函数需要等element的值修改成功并插入页面后执行才奏效，而使用函数的写法我们无法指定在elemen插入页面后执行focus函数才执行，所以这样写第一次是无法获取焦点的。所以需要采取对象的（键值对）写法： (1).bind:指令与元素成功绑定时调用。
vue的this指向详解
m0_52669454的博客
08-02 3144
vue的this指向详解
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 470
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 995
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 80
【代码】TS如何处理js模块的类型？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 853
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 1562
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
Web Pages 表单
07-20 326
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
Vue框架核心技术详解与实战
"Vue核心技术总结" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。它以其易学性和灵活性而闻名，特别适合开发单页应用程序(SPA)。Vue的核心技术包括数据绑定、指令系统、事件处理机制等，这些是理解...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunnyboy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值