Vue2-收集表单数据、过滤器、内置指令与自定义指令、Vue生命周期

🥔:我徒越万重山 千帆过 万木自逢春

更多Vue知识请点击——Vue.js

VUE2-Day4

    • 收集表单数据
      • 1、不同标签的value属性
      • 2、v-model的三个修饰符
    • 过滤器
    • 内置指令与自定义指令
      • 1、内置指令
      • 2、自定义指令
        • 定义语法
        • (1)函数式
        • (2)对象式
    • Vue的生命周期
      • 1、什么是生命周期
      • 2、生命周期中的8个钩子
      • 3、生命周期图解(重要)
      • 4、生命周期案例

收集表单数据

1、不同标签的value属性

若:<input type="text"/>普通输入框,则v-model收集的是value值,用户输入的就是value值。
若:<input type="radio"/>单选框,则v-model收集的是value值,且要给标签配置value值。

若:<input type="checkbox"/>多选框

1、没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2、配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
一句话,想正确收集,那么要写上每个选项的value,且v-model绑定的初始值是数组

2、v-model的三个修饰符

v-model.lazy:实现不用实时收集,输入框失去焦点再收集
v-model.number:输入的字符串收集为数字(Vue内部做了数据转换),通常和type="number"一起使用
v-model.trim:收集时去掉输入的首尾空格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>收集表单数据</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><!-- 这里form不需要action属性,我们可以直接使用ajax --><form @submit.prevent="demo">账号:<!-- v-model.trim去掉前后空格 --><input type="text" v-model.trim="userInfo.accout" /><br />密码:<input type="password" v-model="userInfo.password" /><br />年龄:<!-- 前面一个number控制只能输入数字,后面一个v-model.number把收集的信息转成数值类型,这两个一般搭配使用 --><input type="number" v-model.number="userInfo.age" /><br />性别: 男<inputtype="radio"name="sex"v-model="userInfo.sex"value="male"/><inputtype="radio"name="sex"v-model="userInfo.sex"value="female"/><br />爱好: 吃饭<inputtype="checkbox"v-model="userInfo.hobby"value="eat"/>睡觉<input type="checkbox" v-model="userInfo.hobby" value="sleep" />打豆豆<inputtype="checkbox"v-model="userInfo.hobby"value="beatbean"/><br />所属校区:<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br />其他信息:<!-- v-model.lazy让文本框不是实时收集,而是输入完后失去焦点才收集 --><textarea v-model.lazy="userInfo.other" cols="30" rows="5"></textarea><br /><input type="checkbox" v-model="userInfo.agree" />阅读并接受<a href="https://blog.csdn.net/weixin_56498069?type=lately">《用户协议》</a><button>提交</button></form></div><script type="text/javascript">new Vue({el: "#root",data: {userInfo: {accout: "",password: "",age: "",sex: "",//   多选的勾选框要写成数组hobby: [],city: "",other: "",agree: "",},},methods: {demo() {console.log(JSON.stringify(this.userInfo));},},});</script></body>
</html>

过滤器

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理比如价格1999改成1,999等需求,复杂的最好用计算属性或方法)。
语法:
1、注册过滤器:Vue.filter(name,callback) new Vue{filters:{}}
2、使用过滤器:{{ xxx | 过滤器名}} v-bind:属性 = "xxx | 过滤器名"(第二种几乎不用)
备注:
1、过滤器也可以接收额外参数、多个过滤器也可以串联
2、并没有改变原本的数据, 是产生新的对应的数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>过滤器</title><script src="../js/vue.js"></script><script src="../js/dayjs.min.js"></script></head><body><div id="root"><h1>当前时间是:{{time}}</h1><!-- 计算属性实现 --><h1>当前时间是:{{formatTime}}</h1><!-- 方法实现 --><h1>当前时间是:{{getformatTime()}}</h1><!-- 过滤器实现 time传给timeFormater,然后返回值替换整个部分--><h1>当前时间是:{{time | timeFormater}}</h1><!-- 过滤器实现(传参)--><h1>当前时间是:{{time | timeFormater('YYYY——MM——DD')}}</h1><!-- 过滤器的串联,一层一层往后传,后面的接受的是前面的返回值--><h1>当前时间是:{{time | timeFormater('YYYY——MM——DD') | mySlice}}</h1><!-- 下面这个打开控制台看元素节点就明白了 --><h3 :x="name | mySlice">DJ</h3></div><script type="text/javascript">// 全局过滤器Vue.filter("mySlice", function (val) {return val.slice(0, 4);});const vm = new Vue({el: "#root",data: {time: 1660472948789,name: "zhangziying",},computed: {formatTime: {get() {return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");},},},methods: {getformatTime() {return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");},},// 局部过滤器filters: {//第一个参数是管道符 | 前边那玩意儿//第二个参数str来个默认值,如果传了str就给,不传就用默认值timeFormater(val, str = "YYYY年MM月DD日 HH:mm:ss") {// console.log(val);return dayjs(this.time).format(str);},mySlice(val) {//这里的val是上一个过滤器的返回值return val.slice(0, 4);},},});</script></body>
</html>

内置指令与自定义指令

1、内置指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染(动态控制节点是否存存在)
v-else : 条件渲染(动态控制节点是否存存在)
v-show : 条件渲染 (动态控制节点是否展示)

v-text指令:
作用:向其所在的节点中渲染文本内容。
与插值语法的区别:v-text会替换掉节点中的所有内容,插值语法{{xx}}则不会。

    <div id="root"><div>{{name}}</div><!-- 使用v-text --><!-- 只会显示potato不会显示你好,因为v-text会替换掉节点中的所有内容,并且不支持结构解析(不可以识别html结构) --><div v-text="name">你好,</div></div><script>new Vue({el: "#root",data: {name: "potato",},});</script>

v-html指令:
作用:向指定节点中渲染包含html结构的内容。
与插值语法的区别:
(1)v-html会替换掉节点中所有的内容,{{xx}}则不会,这点和v-text一样。
(2)v-html可以识别html结构,这点和v-text区别,v-text不能渲染标签。

    <div id="root"><!-- 使用v-html --><!-- v-html会替换掉节点中的所有内容,可以识别html结构 --><div v-html="str">你好,</div></div><script>new Vue({el: "#root",data: {str: "<h2>我是potato</h2>",},});</script>
  • 注意:v-html有安全性问题!
    (1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
    (2)一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

v-cloak指令(没有值):
(1)本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
(2)使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题,先隐藏标签,然后Vue渲染完了之后删除v-cloak,那么就能显示渲染完之后的页面了。

/* 选中所有包含v-cloak属性的标签 */
[v-cloak]{display: none;}
<h2 v-cloak>{{name}}</h2>

v-once指令:
(1)v-once所在节点在初次动态渲染后,就视为静态内容了,也就是只读一次。
(2)以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

    <div id="root"><div>{{name}}</div><!-- 使用v-once --><h2 v-once>初识n值为:{{n}}</h2><h2>当前n值为:{{n}}</h2><button @click="n++">点我n+1</button></div><script>new Vue({el: "#root",data: {n: 1,},});</script>

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

    <div id="root"><!-- 使用v-pre --><h2 v-pre>Vue其实很简单</h2><h2>当前n值为:{{n}}</h2><button @click="n++">点我n+1</button></div><script>new Vue({el: "#root",data: {n: 1,},});</script>

2、自定义指令

定义语法

①局部指令(在实例里面写)

new Vue({							new Vue({
directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
}) 									})

②全局指令

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

注意:

  • 指令定义时不加v-,但使用时要加v-
  • 指令名如果是多个单词要用-分隔,比如使用big-number命名方式,不要用bigNumber命名
  • directives配置对象中所有函数的this都指向window,这个和其他的不同,尤其注意

(1)函数式

函数中有两个参数,第一个参数是指令所在的标签(真实DOM),第二个参数是一个存着指令值的对象,通过对象名.value就能获取当前绑定的值。

何时调用?
1、指令与元素成功绑定时(一上来,没放入页面之前)
2、指令所在的模板被重新解析时

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

    <div id="root"><h2>当前的n值是:<span v-text="n">{{n}}</span></h2><h2>放大的n值是:<span v-big="n">{{n}}</span></h2><button @click="n++">点我n+1</button></div><script>new Vue({el: "#root",data: {n: 1,},directives: {big(element, binding) {element.innerText = binding.value * 10;},},});</script>

(2)对象式

配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时(一上来,没放入页面之前)
(2).inserted:指令所在元素被插入页面时调用(放入页面后)
(3).update:指令所在模板结构被重新解析时调用(有任意data中的东西被改了)。

需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
使用函数调用element.focus()不奏效,因为big函数执行时页面上还没放入input,focus必须在input插入页面后才能有效果。所以这里我们只能用对象式

    <div id="root"><input type="text" v-fbind:value="n" /></div><script>new Vue({el: "#root",data: {n: 1,},directives: {fbind: {bind(element, binding) {element.value = binding.value;},inserted(element, binding) {element.focus();},update(element, binding) {element.value = binding.value;},},},});</script>

本质上二者差不多,你会发现函数式其实就是对象式中的bind和update的合并,如果在某些时候要实现一些特殊的效果,比如获取焦点、操作节点父元素等需要等元素插入页面后才能操作它的这些操作,只能用对象式,靠的就是inserted函数

Vue的生命周期

1、什么是生命周期

生命周期

  1. 又名:生命周期回调函数生命周期函数生命周期钩子

  2. 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数

  3. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。

  4. 生命周期函数中的this指向是vm 或 组件实例对象

2、生命周期中的8个钩子

常用的生命周期钩子:

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

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

关于销毁Vue实例:

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

  2. 销毁后自定义事件会失效,但原生DOM事件依然有效(现在的版本好像也会失效)。(留个疑点,啥是自定义事件?啥是原生DOM事件?答:自定义事件就是定义在组件标签上的事件,是组件通信的一种方式,原生DOM事件就是类似onclick这种的)。销毁后所有的监视也没了

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

   <!-- 准备一个容器 --><div id="hello"><h1>当前n值为:{{n}}</h1><button @click="add">点击n+1</button></div><script>const vm = new Vue({el: '#hello',data: {n: 1},methods: {add() {this.n++;}},beforeCreate() {console.log('beforeCreate');console.log(this);// debugger;},created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeDestroy() {console.log('beforeDestroy');},destryed() {console.log('destryed');}})</script>

3、生命周期图解(重要)

请添加图片描述

4、生命周期案例

<!-- 准备一个容器 -->
<div id="hello"><h1 :style="{opacity: opacity}">欢迎学习Vue</h1><button @click="stop">点击停止闪烁</button>
</div><script>const vm = new Vue({el: '#hello',data: {opacity: 1},methods: {stop() {// clearInterval(this.timer);  vm可以这么写(类比自杀),也可以写在beforeDestroy中(类别他杀)this.$destroy();  //vm自杀}},//挂载意思就是放在页面上//挂载函数,Vue完成模板的解析并把*初始的(只调用一次)*真实DOM放入页面后(完成挂载)调用mountedmounted() {this.timer = setInterval(() => {console.log('计时器调用');this.opacity -= 0.01;if (this.opacity <= 0) this.opacity = 1;  }, 16)},beforeDestroy() {console.log('vm即将被销毁');// 为什么vm的后事需要写在这里,是因为vm很有可能是被别人干掉的clearInterval(this.timer);},})//通过外部的定时器实现(不推荐)// setInterval(() => {//     vm.opacity -= 0.01;//     if (vm.opacity <= 0) vm.opacity = 1; // }, 16);
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37067.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文献综述|NLP领域后门攻击、检测与防御

前言&#xff1a;在信息安全中后门攻击&#xff08;Backdoor Attack&#xff09;是指绕过安全控制而获取对程序或系统访问权的方法。而随着深度学习以及各种神经网络模型的广泛应用&#xff0c;神经网络中存在的后门问题也引起了研究人员的广泛关注。神经网络后门攻击就是使网络…

Android AOSP源码编译——AOSP整编(二)

切换到源码目录下执行下面命令 1、初始化环境 . build/envsetup.sh //清除缓存 make clobber2、选择编译目标 lunchAOSP 预制了很多 Product。这里为了简单我们先不用真机&#xff0c;而是选择模拟器的方式&#xff0c;对于 x86_64 模拟器&#xff0c;我们选择的是 aosp_x86…

深度学习笔记(kaggle课程《Intro to Deep Learning》)

一、什么是深度学习&#xff1f; 深度学习是一种机器学习方法&#xff0c;通过构建和训练深层神经网络来处理和理解数据。它模仿人脑神经系统的工作方式&#xff0c;通过多层次的神经网络结构来学习和提取数据的特征。深度学习在图像识别、语音识别、自然语言处理等领域取得了…

Opencv将数据保存到xml、yaml / 从xml、yaml读取数据

Opencv将数据保存到xml、yaml / 从xml、yaml读取数据 Opencv提供了读写xml、yaml的类实现&#xff1a; 本文重点参考&#xff1a;https://blog.csdn.net/cd_yourheart/article/details/122705776?spm1001.2014.3001.5506&#xff0c;并将给出文件读写的具体使用实例。 1. 官…

C++多线程场景中的变量提前释放导致栈内存异常

多线程场景中的栈内存异常 在子线程中尝试使用当前函数的资源&#xff0c;是非常危险的&#xff0c;但是C支持这么做。因此C这么做可能会造成栈内存异常。 正常代码 #include <iostream> #include <thread> #include <windows.h>// 线程函数&#xff0c;用…

【分布式存储】数据存储和检索~LSM

在数据库领域&#xff0c;B树拥有无可撼动的地位&#xff0c;但是B树的缺点就是在写多读少的场景下&#xff0c;需要进行大量随机的磁盘IO读写&#xff0c;而这个性能是最差的。并且在删除和添加数据的时候&#xff0c;会造成整个树进行递归的合并、分裂&#xff0c;数据在磁盘…

【JVM】类装载的执行过程

文章目录 类装载的执行过程1.加载2.验证3.准备4.解析5.初始化6.使用7.卸载 类装载的执行过程 类装载总共分为7个过程&#xff0c;分别是 加载&#xff0c;验证&#xff0c;准备、解析、初始化、使用、卸载 1.加载 将类的字节码文件加载到内存(元空间&#xff09;中。这一步会…

16.3.1 【Linux】程序的观察

既然程序这么重要&#xff0c;那么我们如何查阅系统上面正在运行当中的程序呢&#xff1f;利用静态的 ps 或者是动态的 top&#xff0c;还能以 pstree 来查阅程序树之间的关系。 ps &#xff1a;将某个时间点的程序运行情况撷取下来 仅观察自己的 bash 相关程序&#xff1a; p…

Keburnetes 存储卷 volumes

K8S 的 存储卷 volumes emptyDir 可实现Pod中的容器之间共享目录数据&#xff0c;但emptyDir存储卷没有持久化数据的能力&#xff0c;存储卷会随着Pod生命周期结束而一起删除 &#xff08;一个pod中创建了docker1 docker2两个容器&#xff0c;他们都挂载这个emptyDir&#xff0…

Gradle依赖管理:编译时和运行时依赖的区别

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

【LeetCode】《LeetCode 101》第十一章:妙用数据结构

文章目录 11.1 C STL11.2 数组448. 找到所有数组中消失的数字&#xff08;简单&#xff09;48. 旋转图像&#xff08;中等&#xff09;74. 搜索二维矩阵&#xff08;中等&#xff09;240. 搜索二维矩阵 II&#xff08;中等&#xff09;769. 最多能完成排序的块&#xff08;中等…

ROSpider机器人评测报告

ROSpider机器人评测报告 最近入手了一款ROSpider六足仿生机器人&#xff0c;ROSpider是一款基于ROS 操作系统开发的智能视觉六足机器人。 外观 外观上ROSpider六足机器人如同名字一样有六只机械腿&#xff0c;整体来看像一只六腿的蜘蛛。腿上的关节处用了明亮的橙黄色很是显…

Redis使用Lua脚本和Redisson来保证库存扣减中的原子性和一致性

文章目录 前言1.使用SpringBoot Redis 原生实现方式2.使用redisson方式实现3. 使用RedisLua脚本实现3.1 lua脚本代码逻辑 3.2 与SpringBoot集成 4. Lua脚本方式和Redisson的方式对比5. 源码地址6. Redis从入门到精通系列文章7. 参考文档 前言 背景&#xff1a;最近有社群技术交…

C++——函数重载及底层原理

函数重载的定义 函数重载&#xff1a; 是函数的一种特殊情况&#xff0c;C允许在同一作用域重声明几个功能类似的同名函数&#xff0c;这些同名函数的形参列表&#xff08;参数个数或者类型&#xff0c;类型的顺序&#xff09;不同&#xff0c;常用来处理实现功能类似数据结构…

春秋云镜 CVE-2021-41947

春秋云镜 CVE-2021-41947 Subrion CMS v4.2.1 存在sql注入 靶标介绍 Subrion CMS v4.2.1 存在sql注入。 启动场景 漏洞利用 exp http://localhost/panel/visual-mode.json?getaccess&typeblocks UNION ALL SELECT username, password FROM sbr421_members -- -&o…

【需求输出】流程图输出

文章目录 1、什么是流程图2、绘制流程图的工具和基本要素3、流程图的分类和应用场景4、如何根据具体场景输出流程图 1、什么是流程图 2、绘制流程图的工具和基本要素 3、流程图的分类和应用场景 4、如何根据具体场景输出流程图

Dubbo1-架构的演变

分布式系统上的相关概念 项目&#xff1a;传统项目、互联网项目 传统项目&#xff1a; 一般为公司内部使用&#xff0c;或者小群体小范围的使用&#xff0c;一般不要求性能&#xff0c;美观&#xff0c;并发等 互联网项目的特点&#xff1a; 1.用户多 2.流量大&#xff0c;并…

用python来爬取某鱼的商品信息(2/2)

目录 上一篇文章 本章内容 设置浏览器为运行结束后不关闭&#xff08;可选&#xff09; 定位到搜索框的xpath地址 执行动作 获取cookie 保存为json文件 修改cookie的sameSite值并且导入cookie 导入cookie&#xff08;出错&#xff09; 导入cookie&#xff08;修改后&…

Android Ble蓝牙App(五)数据操作

Ble蓝牙App&#xff08;五&#xff09;数据操作 前言正文一、操作内容处理二、读取数据① 概念② 实操 三、写入数据① 概念② 实操 四、打开通知一、概念二、实操三、收到数据 五、源码 前言 关于低功耗蓝牙的服务、特性、属性、描述符都已经讲清楚了&#xff0c;而下面就是使…

电脑系统重装日记

重装原因 电脑C盘几乎爆炸故重装系统一清二白 此片原因 记录重装过程&#xff0c;强调一些要注意的点&#xff0c;以防日后重装。 重装过程 1.清空电脑文件后重启&#xff0c;电脑冒蓝光&#xff0c;一直蓝屏反复重启&#xff0c;故只能重装系统以解难题。 2.准备一个U盘&…