Vue2（三）表单数据收集、过滤器、内置和自定义Vue指令、生命周期

目录

一、表单数据收集

1.v-model拓展

2.收集输入框数据

3.收集单选框数据

4.收集复选框数据

5.收集选择框数据

6.打包发出表单数据

二、过滤器（Vue3已移除）

三、更多Vue内置指令 

1.v-text

2.v-html

3.v-cloack

4.v-once

5.v-pre

四、自定义指令

1.定义

（1）局部指令

（2）全局指令

2.注意

 五、生命周期**

1.创建流程

（1）beforeCreate

（2）created

2.挂载流程

（1）beforeMount

（2）mounted

3.更新流程

（1）beforeUpdate

（2）updated

4.销毁流程

（1）beforeDestroy

（2）destroyed

5.注意事项

（1）常用的生命周期钩子:

（2）关于销毁Vue实例

---

一、表单数据收集

1.v-model拓展

v-model.number转换为数字型

v-model.lazy懒加载，即目标失焦后才会存入数据

v-model.trim去除首尾空格

2.收集输入框数据

v-model='存储数据的属性名'

单行输入框和多行输入框是一样的

3.收集单选框数据

收集性别信息，单选框没有value一说，所以需要自己预先写好value，保存数据的属性填写对应value即可设置默认值

    <div class="root">
        男：<input type="radio" name="sex" v-model="StuInfo.sex" value="male">
        女：<input type="radio" name="sex" v-model="StuInfo.sex" value="female">
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                StuInfo: {
                    sex: 'female' //设置默认值为女
                }
            }
        })
    </script>

4.收集复选框数据

和单选框相似，注意：存储复选框数据的属性初始值必须是一个数组 

    <div class="root">
        爱好:
        学习<input type="checkbox" name="hobby" v-model="StuInfo.hobby" value="study">
        游戏<input type="checkbox" name="hobby" v-model="StuInfo.hobby" value="game">
        睡觉<input type="checkbox" name="hobby" v-model="StuInfo.hobby" value="sleep">
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                StuInfo: {
                    hobby: [] //初始值应设为【】
                }
            }
        })
    </script>

5.收集选择框数据

 数据绑定写在select标签上

<div class="root">
        <select v-model="StuInfo.city">
            <option value="">请选择城市</option>
            <option value="chengdu">成都</option>
            <option value="beijing">北京</option>
            <option value="chongqing">重庆</option>
        </select>
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                StuInfo: {
                    city: ''
                }
            }
        })
    </script>

6.打包发出表单数据

使用JSON.stringfy(vm.StuInfo) 

二、过滤器（Vue3已移除）

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

 调用过滤器：数据属性 | 过滤器名

过滤器要写返回值到value上 

（1）局部过滤器

    <div class="root">
        <p>首字母大写:{{str | firstUpper}}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                str: 'grizzily'
            },
            filters: {
                firstUpper(value) {
                    return value[0].toUpperCase() + value.slice(1)
                }
            }
        })
    </script>

（2）全局过滤器

// 全局过滤器
Vue.filter('my-filter', function (value) {
    // 返回处理后的值
})

三、更多Vue内置指令 

1.v-text

特点：

（1）v-text=''name''和插值语法{{name}}作用相同

        区别在于：v-text渲染该节点文本，会替换掉节点内原有的文本，而插值语法不会

2.v-html

特点：

（1）和插值语法的区别：v-html支持html结构的解析；v-html会替换掉节点内原有的文本

（2）v-html可能导致严重安全性问题**

        在网页上直接动态渲染html，容易受到xss攻击！（cookie原理，cokie被非法获得从而用户信息被盗）

        一定要在可信的地方使用v-html，不要在用户输入的地方使用

3.v-cloack

特点：

（1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，该属性自动消失

（2）配合css使用属性选择器[v-cloak]，可将网速过慢导致未解析的模板隐藏起来（display:none）

4.v-once

特点：

（1）只会解析有该属性的模板一次，后由动态节点变为静态节点

（2）以后数据的改变不会引起该结构的更新，可以优化性能

可用于某属性的初始值

5.v-pre

特点：

（1）会跳过所在节点的编译

（2）可利用它，跳过没有指令语法、插值语法的节点，加快编译速度

四、自定义指令

1.定义

（1）局部指令

const vm = new Vue({
    el: '.root',

    directives: {
        // 自定义指令 函数型
        // element：元素(真实dom);bindings：绑定对象v-demo
        demo(element, bindings) {
            // 内容
        },
        // 对象型
        demo2: {
            // 指令和元素成功绑定时调用
            bind: {
                //内容
            },
            // 指令所在元素被插入页面时调用
            inserted: {
                //内容
            },
            // 指令所在模板结构被重新解析时调用
            update: {
                //内容
            }
        }
    }
})

（2）全局指令

Vue.directive('demo3', function (element, bindings) {
    // 内容
})
Vue.directive('demo4', {
    // 指令和元素成功绑定时调用
    bind: {
        //内容
    },
    // 指令所在元素被插入页面时调用
    inserted: {
        //内容
    },
    // 指令所在模板结构被重新解析时调用
    update: {
        //内容
    }
})

2.注意

（1）有两种定义方式：对象型和函数型；对象型用于需要完成不同时期的动作时使用(bind,inserted,update)

（2）指令定义时不用加v-，使用时要加v-

（3）不能使用驼峰命名法，建议使用-将单词分隔开

        注意定义指令时使用引号书写，例如'my-demo':{}或'my-demo'(){}

 五、生命周期**

1.创建流程

（1）beforeCreate

初始化生命周期、事件，还未开始数据代理

此时无法通过vm访问到_data的数据和methods的方法

    beforeCreate() {
        console.log('beforeCreate')
    }

（2）created

初始化数据监视、数据代理

此时可以通过vm访问到_data的数据和methods的方法

    created() {
        console.log('created')
    }

2.挂载流程

（1）beforeMount

在此之前，Vue开始解析模板和生成虚拟DOM(存储在内存中)，此时页面上还不能显示解析好的内容

    beforeMount() {
        console.log('beforeMount')
    }

（2）mounted

在此之前将虚拟DOM转换为真实DOM插入到界面中

    mounted() {
        console.log('mouted')
    }

3.更新流程

（1）beforeUpdate

此时，数据的新的，页面是旧的，未保持同步

    beforeUpdate() {
        console.log('beforeUpdate')
    }

（2）updated

此时数据和界面都是新的，数据和页面保持同步

    updated() {
        console.log('updated')
    }

4.销毁流程

（1）beforeDestroy

此时，vm中所有的_data、methods方法、指令等都可用，但更改数据后不会触发更新流程，一般在此阶段执行：关闭定时器、取消订阅、解绑自定义事件等收尾操作

    beforeDestroy() {
        console.log('beforeDestroy')
    }

（2）destroyed

此时，数据监听、子组件、自定义事件监听被销毁，但原生事件不会被销毁

    destroyed() {
        console.log('destroyed')
    }

5.注意事项

（1）常用的生命周期钩子:

        1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]

        2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]

（2）关于销毁Vue实例

        1.销毁后借助Vue开发者工具看不到任何信息

        2.销毁后自定义事件会失效，但原生DOM事件依然有效

        3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了