本地应用vue指令

本地应用vue指令

1.内容绑定,事件绑定

1-1 v-text设置标签文本值

<div id ="app">
	//会替换全部内容
	<h2 v-text="message"></h2>
	//差值表达式{{}}可替换部分内容
	<h2>深圳{{message +"!"}}</h2>
</div>

var app =new Vue({
​	el:"#app",
​	data:{
​		message:"设置标签内容"
​	}
})

//设置标签内容
//深圳设置标签内容！

1-2 v-html设置元素的innerHTML

<div id ="app">
	//内容中有html会被解析成标签 
	<p v-html="content"></p>
	//v-text会将内容解析成文本
	<p v-text="content"></p>
</div>

var app =new Vue({
​	el:"#app",
​	data:{
​		content:"<a href="https://www.baidu.com">百度</a>
​	}
})

1-3 v-on为元素绑定事件

<div id="app">
    <input type="button" value="事件绑定" v-on:cilck="方法">
    <input type="button" value="事件绑定" v-on:monseenter="dolt">
    <input type="button" value="事件绑定" v-on:dblcilck="dolt"> 
    <input type="button" value="事件绑定" @dblcilck="dolt"> 
	<input @click="changeFood">{{food}}</h2>
</div>

var app = new Vue({
	el:"#app",
	data：{
		food:"西蓝花炒蛋"
	},
	methods:{
		dolt:function(){
		alert("做it");
		},
		changeFood:function(){
			this.food+="好好吃！"
		}
	},
})

1-4应用案例–计数器

<div id="app">
	<div id="input-num">
		<button @click="sub">-</button>
		<span>{{num}}</span>
		<button @click="add">+</button>
	</div>
</div>

var app = new Vue({
	el:"#app",
	data:{
	num:1
	},
	methods:{
		add:function(){
			if(this.num<10){
				this.num++;
			}else{
				alert("最多可加购10件");
			}
		},
		sub:function(){
			if(this.num>0){
				this.num--;
			}else{
				alert("当前为最少购买数量");
			}
		}
	},
})

1-5 案例小节：

• 创建vue实例时：el设置挂载点；data设置数据；methods设置方法
• v-on指令的作用是绑定事件，简写为@
• 方法中通过this关键字获取data中的数据
• v-text指令的作用是设置元素的文本值，简写为{{}}

2.显示切换，属性绑定

2-1 v-show根据表达式真假，切换元素显示状态

• 原理是修改元素的display,实现显示隐藏
• 指令后面的内容，被解析为布尔值
• 职位true显示，值为false隐藏
• 数据改变之后，对应元素的显示状态会同步更新

<div id="app">
	  <input type = "button" value = "切换显示状态" @click="changeIsShow">
      <img src="图片地址" v-show="isShow">
      <input type = "button" value ="累加年龄" @click= "addAge">
      //当为true图片显示，为false图片隐藏
      <img src="图片地址" v-show="age >= 18"> 
</div>

 var app  = new Vue({
​	el:"app",
​	data:{
​		isShow:false,  //元素隐藏
​		//isShow:false,
​		age:16
​	},
	methods:{
		changeIsShow:function(){
			this.isShow = !this.isShow;
		},
		addAge:function(){
			this.age++;
		}
	}
})

2-2 v-if根据表达式真假，切换元素的显示状态（直接操纵dom元素）

• 本质是通过操纵dom元素来切换显示状态
• 表达式的值为true，元素存在dom树中；
• 表达式的值为false，元素中dom树中移除；
• 频繁切换使用v-show,反之使用v-if

<div id = "app">
	<input type ="button" @click ="toggleIsShow">
	//v-if,对dom树进行操作，直接把文本从dom树中移除
	<p v-if="isShow">我是一段v-if测试文本</P>
	//v-isShow,通过display改变元素样式，显示block,隐藏none
	<p v-isShow="isShow">我是一段v-isShow测试文本</P>
</div>

var app = new Vue({
	el:"#app",
	data:{
		isShow:false
	},
	methods:{
		toggleIsShow:function(){
			this.isShow = !this.isShow;
		}
	}
})

2-3 v-bind设置元素属性（比如src,title,class)

<style>
	.active{
		border:1px solid red;
	}
</style>
<div id="app">
		<img v-bind:src="imgSrc">
		<img v-bind:title="imgTitle+'!!!'"  >
		//三元表达式方式
		<img v-bind:class="isActive?'active':''" @click="toggleActive">
		//对象的形式
		<img v-bind:class="{active:isActive}">
</div>

var app = new Vue({
	el:"#app",
	data:{
		imgSrc:"图片地址",
		imgTitle:"里昂同学",
		isActive:false,
	},
	methods:{
		toggleActive:function(){
			this.isActive = !this.isActive;
		}
	}
})

2-4 应用案例-图片切换

案例分析：
定义图片地址（数组方式）
添加图片索引
图片切换逻辑
显示状态切换

<div id="app">
	<img:src="imgArr[index]" />
	<a href="javaScript:void(0)" @click="prev" v-show="index!=0">上一张</a>
	<a href="javaScript:void(0)" @click="prev" v-show="index < index.length - 1">下一张</a>
</div>

var app = new Vue(){
	el:"#app",
	data:{
		imgArr:[],
		index:0,
		imgSrc:	
	},
	methods:{
		prev:function(){
			if(this.index > 0){
				this.index--;
			}else{
				this.index = this.index +1;	
			}
		},
		next:function(){
			if(this.index < 10){
				this.index++;
			}else{
				this.index = this.index -1;	
			}
		}
}

3.列表循环，表单元素绑定

3-1 v-for根据数据生成列表结构

• 数据经常和v-for结合使用
• （item,index） in 数据
• item和index可以结合其他指令一起使用
• 数组长度的更新会同步到页面上

<div id="app">
	<input type="button" value="添加数据" @click="add">
	<input type="button" value="移除数据" @click="remove">
    <ul>
		<li v-for = " (item,index) in arr">{{index + 1}}里昂去：{{item}}</li>
	</ul>
	<h2 v-for ="item in vegetables">{{item.name}}</h2>
</div>

var app=new Vue({
	el:"app",
	methods:{
		arr:["深圳","广州","上海","北京"],
		vegetables:[
			{name:"西蓝花"},
			{name："辣子鸡"}	
		]
	},
	methods:{
		add:function(){
			this.vegetables.push({name："小酥肉"});	
		},
		remove:function(){
			this.vegetables.shift();
		}	
	},
})

​

3-2 v-on结合修饰符

• 事件绑定的方法写成调用的函数形式，可以传入自定义参数
• 定义方法时需要定义形参来接收传入的参数的实参
• 事件后面跟上.修饰符可以对事件进行限制
• .enter可以限制触发的按键是回车

<div id="app">
    <input type="button" value ="点击" @click="doIt(666,'老铁')"/>
    <input type="text" @keyup.enter="sayHi">
</div>

var app=new Vue({
	el:"#app",
	methods:{
		doIt:function(p1,p2){
			console.log("p1");
			console.log("p2");
		},
		sayHi:function(){
			alert("干饭啦！")
		}
	}
})

3-3 v-model指令获取和设置表单元素的值（双向数据绑定）

• 绑定数据会和表单元素相值关联

<div id = "app">
	<input type ="text" v-model ="message" @keyup="getM">
	<input type ="button" v-model ="修改message" @keyup="setM">
	<h2>{{message}}</h2>
</div>

var app = new Vue(){
	el:"#app",
	data:{
		message:"里昂同学";	
	},
	methods:{
		getM:function(){
			alert(this.message);	
		},
		setM:function(){
			this.message="里昂同学晚上好"	
		}
	}
}

3-4 应用案例-小黑记事本

新增
生成列表结构 v-for
获取用户输入v-model
回车新增数据v-on
删除
点击删除指定内容 v-on splice
统计
统计个数 v-text length
清空
点击清除所有信息 v-on 清空数组

隐藏 v-show

<div id="app">
	<div id="">
		<input type = "text"  v-model="inputValue">
	</div>
	<div id="">
		<ul>
			<li  v-for="(item,index) in arr">{{index}}item</li>
			<div class = "view">
				<span>{{index + 1}}</span>	
				<label>{{item}}</label>
				<button @click = "remove(index)"></button>
			</div>
		</ul>	
		<input type="text" v-model="message" @keyup.enter = "add">
	</div>
	<footer>	
		<span v-if="arr.length != 0">
			<strong>{{arr.length}}</strong>
				
		</span>
		<button @ click = "clear">Clear</button>
	</footer>
</div>

var app = new Vue(){
	el:"#app",
	data:{
		arr:[];
		inputValue:"";
		
	},
	methods:{
		add:function(){
			this.arr.push(this.inputValue)	
		},
		remove:function(index){
			console.log(index);
			this.list.splice(index,1);
		},
		clear:function(){
			this.arr = [];	
		
		}
					
		}
	}
}