Vue：emotional damage

最新推荐文章于 2023-08-12 16:09:38 发布

阿狗哲哲

最新推荐文章于 2023-08-12 16:09:38 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue2

本文链接：https://blog.csdn.net/qq_52438590/article/details/123996971

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

4、v-model的三个修饰符（ lazy number trim）

一、收集表单数据

1、文本输入框

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

2、单选框

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值，不配置value属性，默认就会收集null，因为你勾选了也没给值，因此value属性为空，需要手动写明一个value值。

                男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female">

3、复选框

若：<input type="checkbox"/>
                           1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                           2.配置input的value属性:
                                   (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                                   (2)v-model的初始值是数组，那么收集的的就是value组成的数组

hobby:[],

因此可以根据实际情况，合理的选择初始值是数组还是其他，

比如阅读用户协议功能，就可选择不使用数组，直接拿布尔值就可

4、v-model的三个修饰符（ lazy number trim）

trim：输入首尾空格过滤

账号：<input type="text" v-model.trim="userInfo.account">

lazy：失去焦点再收集数据

如果不加lazy，表单中的内容在输入时就会立即绑定给vue去托管，加了lazy会在失去焦点时才托付给vue

<textarea v-model.lazy="userInfo.other"></textarea>

number：输入字符串转为有效的数字

加了number类型后，表单中只能输入数字，但也得v-model绑定number属性，否则

一般二者都是同时使用，前者保证文本框内不能输入字母，后者将数字绑定到vue，

如果前边不加原生的number属性，可以输入字母，字母后边的也会作废，vue不会转为数字

如果后边不加vue的number属性，放到vue托管时，会变成字符串类型，不能转成数字

二、过滤器

过滤器：
               定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
               语法：
                       1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
                       2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
               备注：
                       1.过滤器也可以接收额外参数、多个过滤器也可以串联
                       2.并没有改变原本的数据, 是产生新的对应的数据

常用于解析时间戳这种小功能，过滤器不是必须，通过计算属性和method方法也可以实现功能4

，先说明一个常用的时间小插件，dayjs

<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script>

github仓库中给出了api

计算属性：

methods：

局部filters

全局filters

三、内置指令

1、v-text

1.作用：向其所在的节点中渲染文本内容。

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

如上所示，v-text不会解析data里的html标签，同时，他会替换到页面上整个的结点，把“你好”给吞了

2、v-html

v-html指令：
                       1.作用：向指定节点中渲染包含html结构的内容。
                       2.与插值语法的区别：
                                   (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
                                   (2).v-html可以识别html结构。
                       3.严重注意：v-html有安全性问题！！！！
                                   (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
                                   (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

比如他可以将待解析的html绑到str2上，获取到你当前的cookie，因此获取你的信息。

一旦你的httponly这一栏没有设置true，则将被劫持cookie

3、v-cloak

v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

配合css属性可以实现网速慢时，vue来不及渲染，出现{{xxx}}对用户不友好

当渲染完毕后，v-cloak属性将被移除

4、v-once

v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

只进行第一次的渲染，此后不在受影响

5、v-pre

v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

渲染那些不需要被vue渲染的，减轻vue的压力

四、生命周期

生命周期：
                       1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
                       2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
                       3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
                       4.生命周期函数中的this指向是vm 或组件实例对象。

template的使用

template:`
				<div>
					<h2>当前的n值是：{{n}}</h2>
					<button @click="add">点我n+1</button>
				</div>
			`,

使用template要注意使用div最外面包起来，使其只有一个根节点，否则报错

template中的内容会将root绑定的div整个替换掉

注意区分：

与之前的template标签不是一回事，之前是个标签，配合v-if使用可以隐藏外面的

生命周期中比较重要的两个

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

               关于销毁Vue实例
                       1.销毁后借助Vue开发者工具看不到任何信息。
                       2.销毁后自定义事件会失效，但原生DOM事件依然有效。
                       3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。