Vue的常用指令以及JS的常用事件（Vue，Js学习笔记）

操作DOM元素和使用Vue指令

对比学习是一种比较好的学习方法。最近将Vue基础和JS基础进行对比学习整理出笔记

关于@keyup和onkeyup

Js常用事件中少不了键盘事件例如onkeyup，我们需要操作DOM元素来实现触发事件。例如在input中输入展示并摁回车键能让原本隐藏的div展示出来分别用两种方法来介绍

<!-- 通过操作dom实现 -->
<input type="text" id="input" placeholder="输入展示后出现对应div"/>
<div id="show"></div>


var dom =document.getElementById('input');
dom.onkeyup=function(e){
	if(e.keyCode==13){
		if(dom.value=='展示')
		{
			document.getElementById('show').style.opacity=1;
		}
		else {
			document.getElementById('show').style.opacity=0;
		}
		
	}
}

以上的方法是通过操作dom来实现的，先找到要操作的元素 id为input的input控件，然后通过onkeyup事件进行处理，回车的键值是13因此判断当值为键值为13的时候继续往下判断，如果该元素（input）的value为‘展示’的时候再次操作dom找到对应的元素div，此时是div的style中的opacity属性被操作改变了，也就实现了简单的将隐藏的div展示出来接下来看如果使用vue的指令将如何写。

<!-- 通过操作v-on和v-show实现 -->
<input type="text" placeholder="输入ok后出现对应div" @keyup.enter="display" v-model="play"/>
<div style="width: 50px;height: 50px;background-color:#D5093C;" v-show="Iftrue"></div>

data:{
	Iftrue:false,
	play:""
},

display:function(){
	if(this.play=='ok'){
		this.Iftrue=true
		}
}

以上就是通过vue指令实现功能的关键代码，其他vue配套代码不再赘述。由此可见vue通过指令的方法极大简化了代码。例如@keyup.enter的功能不仅注册了onkeyup事件，还指定了是enter回车键的时候才执行后面的函数。而通过操作dom就稍显冗杂。其他的时间都可以通过举一反三，当然vue的指令配合操作dom元素也是常用的。例如在以上的代码中添加

display:function(){
	if(this.play=='ok'){
		this.Iftrue=true
		document.getElementById('show').style.opacity=1;
		}
}

依旧可以通过精准捕捉dom元素来实现让对应的div显示或是其他。