4.Vue学习记录（表单数据提交、过滤器、指令）

2022-12-2
表单数据提交：
        1.普通的input框使用v-model绑定，单选框和复选框需要给每个选项添加vale值
        2.可以为v-model添加配置，如.trim去除里面的空格，.number只能填数字
过滤器：
        1.过滤器的使用filters里面写函数，如filters：{function（）{}}
        2.过滤器分两种全局过滤器，局部过滤器，全局过滤器：Vue.filter（（函数名），function（）{}）
        3.过滤器可以使用在插值语法中，也可以使用在v-bind
        4.时间插件dayjs

2022-12-3
内部指令：
        1.v-bind：单向绑定解析表达式，简写：
        2.v-model：双向绑定
        3.v-for：数组遍历
        4.v-on：事件绑定，绑定监听事件
        5.v-if：条件渲染
        6.v-else：条件渲染
        7.v-show：条件渲染
        8.v-text：标签中添加文本数据，类似于插值语法
        9.v-html：标签中加载文本数据，但存在安全问题可能存在xss攻击
        10.v-cloak：当页面没加载vue的时候是存在此属性，当加载了vue后会把所有v-cloak属性删除，与css样式搭配可以解决网络延迟加载vue的问题
xss攻击：
        获取用户的cookie数据，在目标网站中伪造用户数据进行访问网站

2022-12-4
内部指令：
        1.v-once：初次渲染，之后改变不再进行渲染
        2.v-pre：使节点不再被vue渲染，通常适用于不需要被渲染的节点减少渲染时间
自定义指令：
        1.使用directives来自定义指令，定义的指令可以是个函数但不能有返回值也可以是个函数对象，格式：function(){}，使用v-function
        2.当组件重新渲染时定义的指令被调用
        3.函数对象时指令的写法：name：{//指令与元素成功绑定时
                                bind（element，binding）{}，
                                //指令所在元素被加载到页面后
                                inserted（element，binding）{}，
                                //指令所在的模板被重新解析时
                                update（element，binding）{}}
        4.定义全局指令：Vue.directive("",function（）{})，定义多个单词的的指令，使用-连接