自学Vue.js第四天

最新推荐文章于 2023-09-30 20:26:27 发布

Ocean_yyy

最新推荐文章于 2023-09-30 20:26:27 发布

阅读量117

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_43664684/article/details/106534214

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

正课：

指令
双向绑定
绑定class和style属性
计算属性
自定义指令一一了解
过滤器

指令：

绑定内容：

原始HTML片段：{{}}

问题：不能用{{}}绑定，因为{{}}会爆出HTML片段原样显示

解决：用v-html="模型变量"代替{{}},可让绑定的HTML片段被浏览器解析为正文

总结：只要绑定HTML片段，都用v-html

纯文本内容：可使用 v-text 或 {{}}
纯文本内容：
表单元素的值
v-cloak:

何时：如果希望当new Vue加载慢时，也不让用户看到{{}}语法，就用v-cloak临时i隐藏页面元素

如何使用：

1.在页面的

双向绑定：

问题：普通的绑定“：属性”，只能将内存中的模型变量单向绑定到界面，无法将界面的更改，自动更新更新会模型变量中

解决：v-model代替:value

什么时双向绑定：既可以将内存中的数据绑定带界面上，同时又能将界面的修改，反向更新回模型变量中

(M-V,V-M)

何时：如果希望绑定表单元素的值时，都用双向绑定

如何：<表单元素 v-modle:value=“模型变量”

:value可省略

原理：Vue用一个死循环，反复扫描虚拟DOM树中的每个节点一一监视

如果希望只要界面发生变化，就立刻执行操作时：

new Vue({
	...,
	data:{ kwords:""},
	...,
	watch:{}
		//在kwords发生改变时，自动执行
		kwords(){

		}
})

示例：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--1：引入vue.js-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!--2.定义界面View-->
		<div id="app">
			<!--只要双向绑定表单元素的值，都用v-modle.@keyup是键盘的按键抬起后(13为回车键)-->
			<input v-model:vaule="kwords" @keyon.13="search()"><button @click="search()">搜索</button>
		</div>
			<script>
			//3.定义数据模型和控制器对象vue
			var vm=new Vue({
				el:"#app",
				data:{
					//数据模型
					kwords:" "
				},
				methods:{
					search(){
						console.log(`查找 "${this.kwords}" 相关的商品`);
					}
				},
				watch:{//监视
                    //监视kwords的函数：只要kwords改变，就立刻自动触发
					kwords(){
						this.search();
					}
				}
			})
			</script>
	</body>
</html>

各种表单元素的双向绑定：

文本框:和文本域：都是绑定vulue

v-model 自动绑定value属性
单选按钮：

分组使用：M-V ：如果模型变量的值等于value，则当前radio选中，否则不选中

V-M : 将当前选中的radio的value值自动更新回模型变量

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--1：引入vue.js-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!--2.定义界面View-->
		<div id="app">
			性别:	<label><input name="sex" type="radio" value="1" v-model="sex">男</label>
				<label><input name="sex" type="radio" value="0" v-model="sex">女</label>
		</div>
			<script>
			//3.定义数据模型和控制器对象vue
			var vm=new Vue({
				el:"#app",
				data:{
					//数据模型
					sex:1
				}
			})
			</script>
	</body>
</html>

3.多选框：
< input type=“checkbox” v-model=“模型变量”>
单用：绑定的是checked属性
4.select:

<select v-model="模型变量">
    <option value="值1">
	<option value="值2">
	。。。。。。
</select>

M-V:用模型变量的值和每个option的vaule做比较。如果某个option的vue等于模型变量的值，则该option被选中

V-M:当选中项发生改变时，自动将选中项的value，更新到模型变量中

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--1：引入vue.js-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!--2.定义界面View-->
		<div id="app">
			<select v-model="status">
				<option value="10">未付款</option>
				<option value="20">已付款</option>
				<option value="30">已发货</option>
				<option value="40">已签收</option>
			</select>
			<h1>当前订单状态:{{
				status==10?"未付款":
				status==20?"已付款":
				status==30?"已发货":
				            "已签收"
			}}</h1>
		</div>
			<script>
			//3.定义数据模型和控制器对象vue
			var vm=new Vue({
				el:"#app",
				data:{
					//数据模型
					//10-未付款；20-已付款；30-已发货；40-已签收
					status:20
				}
			})
			</script>
	</body>
</html>

绑定 class 和 style

绑定style：2种

1.将style当做普通字符串绑定：不直观，繁琐

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--1：引入vue.js-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!--2.定义界面View-->
		<div id="app">
			<input v-model="phone" @focus="getFocus()" @blur="myBlur()"><span :style="spanStyle">{{text}}</span></br>
		</div>
			<script>
			//3.定义数据模型和控制器对象vue
			var vm=new Vue({
				el:"#app",
				data:{
					//数据模型
					phone:"",
					spanStyle:{
						background:"",
						color:""
					},
					text:"",
				},
				methods:{
					getFocus(){//当获得焦点时自动触发
					//qingk span 的内容和样式
					this.text="";
					this.spanStyle.background="";
					this.spanStyle.color="";						
					},
					myBlur(){
						//当失去焦点时自动触发
						//验证文本框的内容
						//如果验证通过
						if(/^1[3-8]\d{9}$/.test(this.phone)){
							//修改span的内容和样式为正确的样式
							this.text="手机号格式正确";
							this.spanStyle.background="green";
							this.spanStyle.color="lightGreen";							
						}else{
							//修改span的内容和样式为正确的样式
							this.text="手机号格式不正确";
							this.spanStyle.background="red";
							this.spanStyle.color="lightGreen";	
						}
							
						//否则
							//修改span的内容和样式为错误的样式					
					}
				}
			})
			</script>
	</body>
</html>

2.可用对象方式绑定style：

<ANY:style="模型变量"
new Vue({
	...,
	data:{
		模型变量：{
			css属性:值，
			...:...
		}
	}
})

问题：用style修改多个css属性，代码会很繁琐

解决：

绑定class：2种：

1.将class当做普通字符串属性绑定：

<ANY class="不变的 class 列表“ :class=”模型变量“
new Vue({
	...,
	data:{
		模型变量：“可能变化的class列表”
	}
})

例子：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
		content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible"content="ie=edge">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--1：引入vue.js-->
		<script src="vue.js"></script>
		<style>
			.fade{
				display: none
			}
			.vali_success,.vali_fail{
				font-size:12px;
				padding: 5px 10px;
				display:inline-block;
			}
			.vali_success{
				backgound:green;
				color:lightGreen;
			}
			.vali_fail{
				background:red;
				color:pink;
			}
		</style>
	</head>
	<body>
		<!--2.定义界面View-->
		<div id="app">
			<input  v-model="phone" @focus="getFous()" @blur="myBlur()">
			<span class="fade" :class="spanClass">{{text}}</span><br/>
		</div>
			<script>
			//3.定义数据模型和控制器对象vue
			var vm=new Vue({
				el:"#app",
				data:{
					//数据模型
					phone:"",
					spanClass:"",
					text:"",
				},
				methods:{
					getFous(){//获得焦点时自动触发
					//清空span的内容和样式
					this.text="";
					this.spanClass="";
					},
					myBlur(){
						//当失去焦点时自动触发
						//验证文本框中的内容
						//如果通过
						if(/^1[3-8]\d{9}$/.test(this.phone))
						{
							//修改span的内容和样式为正确的样式
							this.text="手机号格式正确"
							this.spanClass="vali_success"
						}else{
							//否则
							//修改span的内容和样式为错误的样式
							this.text="手机号格式不正确";
							this.spanClass="vali_fail";
						}
					}
				}
			})
			</script>
	</body>
</html>

2.将class当做对象绑定：

<ANY class="不变的 class 列表“ :class=”模型变量“
new Vue({
	...,
	data:{
		模型变量:{
			class名:true/false,
			class名:trus/false
		}
	}
})

例子：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
		content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible"content="ie=edge">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--1：引入vue.js-->
		<script src="vue.js"></script>
		<style>
			.fade{
				display: none
			}
			.vali_success,.vali_fail{
				font-size:12px;
				padding: 5px 10px;
				display:inline-block;
			}
			.vali_success{
				backgound:green;
				color:lightGreen;
			}
			.vali_fail{
				background:red;
				color:pink;
			}
		</style>
	</head>
	<body>
		<!--2.定义界面View-->
		<div id="app">
			<input  v-model="phone" @focus="getFcous()" @blur="myBlur()">
			<span class="fade" :class="spanClass">{{text}}</span><br/>
		</div>
			<script>
			//3.定义数据模型和控制器对象vue
			var vm=new Vue({
				el:"#app",
				data:{
					//数据模型
					phone:"",
					spanClass:{
						vali_success:false,
						vali_fail:false
					},
					text:"",
				},
				methods:{
					getFcous(){//获得焦点时自动触发
					//清空span的内容和样式
					this.text="";
					this.spanClass.vali_success=false;
					this.spanClass.vali_fail=false;
					},
					myBlur(){
						//当失去焦点时自动触发
						//验证文本框中的内容
						//如果通过
						if(/^1[3-8]\d{9}$/.test(this.phone))
						{
							//修改span的内容和样式为正确的样式
							this.text="手机号格式正确";
							this.spanClass.vali_success=true;
							this.spanClass.vali_fail=false;
						}else{
							//否则
							//修改span的内容和样式为错误的样式
							this.text="手机号格式不正确";
							this.spanClass.vali_success=false;
							this.spanClass.vali_fail=true;
						}
					}
				}
			})
			</script>
	</body>
</html>

未完待续：

Ocean_yyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学Vue.js第四天

正课：指令双向绑定绑定class和style属性计算属性自定义指令一一了解过滤器指令：绑定内容：原始HTML片段：{{}} 问题：不能用{{}}绑定，因为{{}}会爆出HTML片段原样显示解决：用v-html="模型变量"代替{{}},可让绑定的HTML片段被浏览器解析为正文总结：只要绑定HTML片段，都用v-html 纯文本内容：可使用 v-text 或 {{}}纯文本内容：表单元素的值v-cloak: 何时：如果希望当new Vu
复制链接

扫一扫