Vue笔记（第一篇）

01基本命令

01、v-text

<div id="app">
	<p v-text="message"></p>     //使用方法
</div>
		
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				message:"在此一游"
			}
		})
        
        
/*
v-text使用方法和js中的innerText类似，但是会覆盖该标签里的其他内容
*/

02、v-html

<div id="app">
	<p v-html="message"></p>
</div>
		
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			message:"<h1>巴斯少年在此<h1>"
		}
	})
		</script>



/*
使用方法与innerHTML类似，但其中标签的内容会被完全覆盖
*/

03、v-once

<div id="app">
	<p v-once v-html="message"></p>
	<p v-html="message"></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
		message:"江南皮革厂倒闭了"
		}
	})
    
    
  
    
/*
v-once这个值不用赋值，放在标签中这个标签只会保留初始值，无法再更改其标签的内容
*/

04、v-pre

<div id="app">
	<p v-pre v-text="message">{{message}}</p>
</div>
		
		
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			message:"这里嘎嘎嘎阿嘎嘎嘎"
		}
	})
    
    
   
    
/*
v-pre不用赋值，被这个标签定义了将不会编译其中的代码
*/

05、v-model

<div id="app">
	<input type="text" v-model="message" />
<p>{{message}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			message:"请输入你需要的内容"
		}
})
</script>



/*
v-model可以将input标签的内容与data数据绑定
type类型为text直接使用就可以
type类型为checkbox，当v-model值为数组时，勾选标签会将value中的值添加到数组中，若是字符串，勾选会为true，未勾选为false
type类型为radio，value中的值是什么，v-model绑定的值，就会显示什么
select与option标签（下拉框），因为option不支持v-model标签，所以v-model只能设置在select，选中哪个，就是那个value的值
*/

v-model的修饰符

1、.lazy不是实时改变，而是在失去焦点或按回车时才会更新

<input type="text" v-model.lazy="msg" />

2、.number是尝试将输入的值，转换为数值类型

<input type="text" v-model.number="msg" />

注：在最开头输入的字符串，会转变为字符串类型，但在数字后面输入字符串，会自动清除。在小数后面加“.”也会被清除

3、.trim自动过滤输入值中首尾的空格

<input type="text" v-model.trim="msg" />

所有修饰符可以并联使用

<input type="text" v-model.lazy.trim="msg" />

06、v-show

根据表达式的真假，切换元素display css属性
js六大假值:false、0、NaN、""、null、undefined

为假就会不显示该元素display:none


<div id="app">
   <h3 v-show="msg">这标签拥有v-show属性</h3>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
   var vue = new Vue({
   	el:"#app",
   	data:{
   		msg:""
   	}
   })
</script>

07、v-if,v-else-if,v-else

<!--
	v-else-if只能跟在v-if或v-else-if后面，若跟在v-else后，将会不起作用
-->

<div id="app">
	<p v-if="flag>=0 && flag<18">未成年</p>
	<p v-else-if="flag>=18 && flag<=40">青年</p>
	<p v-else>老年</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			flag:18
		}
	})
</script>

v-if和v-show的区别
1、v-if是让元素隐藏的时候，是直接把dom元素删除，v-show在dom元素上添加一个样式display，把内容隐藏起来
2、v-show不占页面位置，但是占dom节点位置

频繁切换：使用v-show较好
运行条件较少改变：使用v-if较好

08、v-for

①、遍历字符串和自己定义n循环数字

遍历字符串时，会自动把每个字符串单个遍历出来
<div id="app">
	<p v-for="v in msg">{{v}}</p>   //第一行是“刘”，第二行是“帅”
    <p v-for="n in 10">{{n}}</p>    //输出1-10
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			msg:"刘帅"
		}
	})
</script>

②、遍历数组

<!--
	   v-for遍历循环数组  
	   item:数组的值
	   index:数组的下标
	   arr:数组
	   in:遍历数组（与of相同，都可以写）
-->

<div id="app">
	<p v-for="item,index in arr">{{item}}------{{index}}</p>      
	<p v-for="m,i in arr">{{m}}-----{{i}}</p>
    <p v-for="m,i of arr">{{m}}-----{{i}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			arr:["刘帅","阿强","小平头"]
		}
	})
</script>

③、遍历对象

<!--
	v-for遍历循环对象
	u,k,i（值，键，下标）
	obj.name  也可以遍历对象中的属性
-->

<div id="app">
	<p v-for="u,k,i in obj">{{u}}---{{k}}----{{i}}</p>
    							<!--
									宅男---name----0
									18---age----1
									家里蹲---company
								-->
    
    
	<p v-for="u in obj.name">{{u}}</p>          
    							<!-- sc:
									宅
									男
								-->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			obj:{
				name:"宅男",
				age:18,
				company:"家里蹲"
			}
		}
	})
</script>

④、遍历数组对象

<!--
	v,i（v代表数组值，i代表下标）
-->


<div id="app">
	<p v-for="v,i in user">{{v.name}}---{{v.sex}}---{{v.hobby}}---{{i}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	<!-- 创建vue实例 -->
	var vm=new Vue({
		el:"#app",
		data:{
			user:[
				{
					name:"刘帅",
					sex:"男",
					hobby:"象棋"
				},{
					name:"友谊",
					sex:"男",
					hobby:"敲代码"
				},{
					name:"周生生",
					sex:"男",
					hobby:"学习"
				},
			]
		}
	})
</script>

09、v-bind

①、a标签与img标签的动态绑定

<div id="app">
	<a v-bind:href="uhref">			<!--  可以简写为   :href=""  -->
		<img v-bind:src="uimg" >     <!--  可以简写为   :img=""  -->
	</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			uhref:"http://www.baidu.com",
			uimg:"https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"
		}
	})
</script>

②、动态绑定class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red{
				color:red;
			}
			.bgc{
				background-color: pink;
			}
			.bor{
				border: 1px solid #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 class="red bgc">普通class</h2>
			<!-- 使用数组这里，是直接引用上面的style里的样式，与classobj无关,v-bind:可以简写为: -->
			<h2 v-bind:class="['red','bgc']">使用数组</h2>
            
			<!-- 数组中使用三元运算符 -->
			<h2 :class="[flag ? 'red':'bgc']">使用三元运算符</h2>
			
            <!-- 使用下面的对象，true显示，false不显示 -->
			<h2 :class="classobj">使用对象</h2>
			
            <!-- 普通class与v-bind:class可以共存 -->
			<h2 class="bor" :class="{bgc:true,red:flag}">class与:class可以共存</h2>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					flag:true,
					classobj:{
						red:true,
						bgc:false
					}
				}
			})
		</script>
	</body>
</html>

③、动态绑定stlye

<div id="app">
    <!-- 记得直接引用是用"{···}" 和css非常相似，其实就是他就是一个javascript对象-->
	<h2 :style="{color:'red'}">对象绑定style</h2>
			
    <!-- 将写好的对象样式放在data中，用数组引用 -->
	<h2 :style=[obj1,obj2]>数组绑定style</h2>
			
    <!-- 直接引用于在data数据中联合使用，实现内联 -->
	<h2 :style="{color:'red',fontSize:fz+'px'}">对象内联</h2>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			flag:true,
			obj1:{
				color:"pink"
			},
			obj2:{
				"font-size":"50px"       //这里font-size不加引号可以写为fontSize
			},
			fz:10
		}
	})
</script>

10、v-on基本使用

基础使用

		<div id="app">
			<p id="">点击的次数是{{msg}}</p>
			<button type="button" v-on:click="msg++">+1</button>
			<button type="button" v-on:dblclick="msg+=2">双击</button>   <!-- dblclick双击 -->
            
            <!-- v-on:可以简写为"@" -->
			<button type="button" @click="clicktwo()">只能+1两次</button>
			<p>{{str}}</p>
            			<!-- 不传参数可以省略括号() -->
			<button type="button" @click="rString">反转</button>
            
            <!-- 直接使用{{}}调用函数也是可以的 -->
            <p>{{methods()}}</p>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					msg:0,
					str:"abcdefg"
				},
				methods:{         // methods中是用来存放函数，这里面的函数会自动成为vue实例的方法
					clicktwo:function(){
						this.msg++;
						if(this.msg>=2){
							this.msg=2;
						}
					},
					rString(){         // rString:function(){}可以简写为rString()
                        				//分割，反转，拼接
						this.str=this.str.split("").reverse().join("")
					}
				}
			})
		</script>

函数传入参数

		<div id="app">
			<button type="button" @click="test">没加括号</button>      <!-- MouseEvent {isTrusted: true, screenX: 20, screenY: 115, clientX: 20, clientY: 12, …} -->
			<button type="button" @click="test()">加了括号</button>		<!-- undefined -->
			<button type="button" @click="test(123)">传了参数</button>	<!-- 123 -->
			
			<button type="button" @click="rev($event,'手动传递事件')">手动传递事件</button>   <!-- $event是MousEvent {isTrusted: true, screenX: 20, screenY: 115, clientX: 20, clientY: 12, …} -->
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					msg:0,
					str:"abcdefg"
				},
				methods:{
					test(ev){
						console.log(ev);
					},
					rev(ev,str){
					console.log(str);
					console.log("ev",ev)
					}
				}
			})
		</script>

绑定多个事件

		<div id="app">
			<button type="button" v-on="{click:clicktwo,dblclick:dbl}">多个事件绑定</button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					clicktwo(){
						console.log("clicktwo成功");
					},
					dbl(){
						console.log("双击也成功");
					}
				}
			})
		</script>

按键修饰符

		<div id="app">
			<p>键盘事件@keyup</p>         
			<input type="text" @keyup="show($event)"/>    <!-- 键盘抬起来时触发 -->
			<p>键盘事件@keydown</p>
			<input type="text" @keydown="show($event)"/>	<!-- 键盘按下时触发 -->
			<p>.enter</p>
			<input type="text" @keydown.enter="show($event)"/>  <!-- 按下回车时才会触发 -->
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					show(e){
						console.log(e.keyCode)
						console.log(e)
					}
				}
			})
		</script>

vue中所有鼠标事件
@click//单击
@mousedown//按下
@mouseup//抬起
@dblclick//双击
@mousemove//移动
@mouseleave//离开
@mouseout //移出
@mouseenter//进入
@mouseover//在

11、使用key

v-for为什么要加key
无key：key属性，状态默认绑定的是位置（index 下标）,有key时状态根据key属性绑定到的相应数组元素
绑定到的元素，建议用id （唯一标识）

加key主要是为了高效的更新虚拟dom

		<div id="app">
			<ul>
				<li v-for="item in msg"><input type="checkbox">{{item}}</li>
				<button type="button" @click="add">添加</button>
			</ul>
			
			<ul>
				<li v-for="item in msg" v-bind:key="item"><input type="checkbox">{{item}}</li>
				<button type="button" @click="add">添加</button>
			</ul>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue =new Vue({
				el:"#app",
				data:{
					msg:["a","b","c","d","e"]
				},
				methods:{
					add(){
						this.msg.splice(2,0,"f")
					}
				}
			})
		</script>

12、数组方法-响应式

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

方法	描述
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
pop()	删除并返回数组的最后一个元素
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
splice()	删除元素，并向数组添加新元素。
sort()	对数组的元素进行排序
reverse()	颠倒数组中元素的顺序。

	<div id="app">
			<ul>
				<li v-for=" u in users" :key="u">{{u}}</li>
				<button type="button" @click="add()">添加</button>
			</ul>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					users:["追梦","友谊","张寒"]
				},
				methods:{
					add(){
						// push()	向末尾添加元素
						// this.users.push("aaa","aa","bb")	
						
						//pop 
						// this.users.pop()
						
						// shift 删除数组中的第一个元素
						// this.users.shift()
						
						// unshift 从前面添加一个或多个元素
						// this.users.unshift("周周","多多")
						
						/* 
								splice : 删除元素、插入元素、替换元素
						 */
						
						// 删除元素  下标，删除几个元素（如果没有传递，就删除后面所有的元素）
						// this.users.splice(1,2)
						
						// 插入元素 下标，0，要插入的元素
						// this.users.splice(1,0,"周周","郎朗")
						// 替换  
						// this.users.splice(1,2,"周周","郎朗")
						
						// 注意通过索引值修改数组中的元素，视图是不会更新。
						// this.users[1]="郎朗"
						
						// vue中的set方法
						// 全局 set方法
						// Vue.set(this.users,1,"郎朗")
						// 当前实例的 set的别名 (实例)
						this.$set(this.users,1,"郎朗")   //替换users里下标为1的改为郎朗
					}
				}
			})
		</script>

通过之前所学所写案例,结合了Bootstrap

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
	</head>
	<body>
		<div id="app" class="container">
			<table class="table table-bordered table-hover">
				<caption class="h1 text-center text-info" colspan="5">用户信息表</caption>
				<tr>
					<th class="text-center text-danger" v-for="ths in arr">{{ths}}</th>
				</tr>
				<tr class="text-center" v-for="u,i in user" :key="u.id">
					<td>{{i+1}}</td>
					<td>
					<input class="text-center" type="text" v-show="u.mod==false" v-model="u.name" style="width:50px;"/>
					<span v-show="u.mod">{{u.name}}</span>
					</td>
					<td>
					<input class="text-center" type="text" v-show="u.mod==false" v-model="u.sex" style="width:50px"/>
					<span v-show="u.mod">{{u.sex}}</span>
					</td>
					<td>
					<input class="text-center" type="text" v-show="u.mod==false" v-model.number="u.age" style="width:50px"/>
					<span v-show="u.mod">{{u.age}}</span>
					</td>
					<td>
					<button type="button" class="btn btn-success btn-sm" v-show="u.mod==false" @click="rep(i)">确定</button>
					<button type="button" class="btn btn-default btn-sm" v-show="u.mod==false" @click="def1(i)">取消</button>
					<button type="button" class="btn btn-primary btn-sm" @click="modify(i)" v-if="u.flag" v-show="u.mod" :disabled="dis">修改</button>
					<button type="button" class="btn btn-warning btn-sm"  v-show="u.flag==false" @click="del(i)">确定</button>
					<button type="button" class="btn btn-default btn-sm"  v-show="u.flag==false" @click="def2(i)">取消</button>
					<button type="button" class="btn btn-danger btn-sm" @click="judge(i)" v-if="u.flag" v-show="u.mod" :disabled="dis">删除</button>
					</td>
				</tr>
				<tr>
					<td class="text-center" colspan="5" v-show="user.length==0">暂无数据....</td>
				</tr>
			</table>
			
			<form style="width:500px;margin:0 auto;border:2px solid gainsboro;padding:15px;">
			  <div class="form-group">
			    <label for="exampleInputEmail1">用户名：</label>
			    <input type="text" class="form-control" v-model="newUser.name" placeholder="请输入用户名">
			  </div>
			  
			  <div class="form-group">
			    <label for="exampleInputEmail1">性别：</label>
			    <input type="text" class="form-control" v-model="newUser.sex" placeholder="请输入性别">
			  </div>
			  
			  <div class="form-group">
			    <label for="exampleInputEmail1">年龄：</label>
			    <input type="text" class="form-control" v-model.number="newUser.age" placeholder="请输入年龄">
			  </div>
			  
			  <div class="form-group">
			  	<button type="button" class="btn btn-primary" @click="add">添加</button>
				<button type="button" class="btn btn-danger" @click="newUser={}">重置</button>
			  </div>
			  
			</form>
			
			
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					dis:false,
					name1:"",
					sex1:"",
					age1:"",
					arr:["序号","姓名","性别","年龄","操作"],
					user:[
						{id:1,name:"花花",sex:"男",age:18,flag:true,mod:true},
						{id:2,name:"贾玲",sex:"女",age:35,flag:true,mod:true},
						{id:3,name:"沈腾",sex:"男",age:48,flag:true,mod:true},
					],
					newUser:{
						id:0,
						name:"",
						sex:"",
						age:'',
						flag:true,
						mod:true
					}
				},
				methods:{
					add(){
						//用户名不能为空
						if(this.newUser.name===""){
							alert("请输入用户名");
							return;
						}
						//性别只能为“男”或“女”
						if(!(this.newUser.sex==="男") && !(this.newUser.sex==="女")){
							alert("请输入男或女");
							return;
						}
						//年龄不能小于0岁且不能超过120岁
						var ifage = parseInt(this.newUser.age);
						var strage = ifage.toString();
						// console.log(ifage);
						// console.log(strage);
						if(strage==="NaN"){
							alert("请输入正确的年龄类型");
							return;
						}
						if(this.newUser.age<0 || this.newUser.age>120){
							alert("请输入正确的年龄");
							return;
						}
						//key值绑定id号
						var idnum = 0;
						for(var i=0;i<this.user.length;i++){
							if(idnum<this.user[i].id){
								idnum=this.user[i].id
							}
						}
						this.newUser.id=idnum+1;
						this.user.push(this.newUser);
						this.newUser={};
						
						//用户名小bug的解决
						this.newUser.name="";
						//默认为修改和删除显示
						this.newUser.flag=true;
						//默认修改样式不显示
						this.newUser.mod=true;
					},
					modify(i){
						this.name1="";
						this.sex1="";
						this.age1="";
						this.name1=this.user[i].name;
						this.sex1=this.user[i].sex;
						this.age1=this.user[i].age;
						this.user[i].mod=false;
						this.dis=true;
						console.log(i);
					},
					rep(i){
						//修改时内容的判断
						if(this.user[i].name===""){
							alert("请输入用户名");
							return;
						}
						if(!(this.user[i].sex==="男") && !(this.user[i].sex==="女")){
							alert("请输入男或女");
							return;
						}
						var ifage = parseInt(this.user[i].age);
						var strage = ifage.toString();
						if(strage==="NaN"){
							alert("请输入正确的年龄类型");
							return;
						}
						if(this.user[i].age<0 || this.user[i].age>120){
							alert("请输入正确的年龄");
							return;
						}
						this.user[i].mod=true;
						this.dis=false;
					},
					def1(i){
						this.user[i].name=this.name1;
						this.user[i].sex=this.sex1;
						this.user[i].age=parseInt(this.age1);
						this.user[i].mod=true;
						this.dis=false;
					},
					judge(i){
						this.dis=true;
						this.user[i].flag=false;
						console.log(i);
						console.log(this.user[i].flag);
						// this.user[i].flag1=false;
						// this.user[i].flag2=true;
						// this.user.splice(i,1);
					},
					def2(i){
						this.user[i].flag=true;
						this.dis=false;
						// this.user[i].flag1=true;
						// this.user[i].flag2=false;
					},
					del(i){
						this.user.splice(i,1);
						this.dis=false;
					}
					
				}
				
			})
		</script>

	</body>
</html>