Vue_(基础)Vue中的事件
Vue.js中文文档 传送门
Vue@事件绑定
v-show：通过切换元素的display CSS属性实现显示隐藏；
v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建；
v-else：与v-if配对使用；
v-elseif：与v-if配对使用；
v-bind：属性绑定；
v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕，也就是隐藏{{}}；
Learn
一、event事件
二、v-show和v-if指令
三、键盘事件
四、v-bind指令
项目结构
【每个demo下方都存有html源码】
一、event事件 传送门
Vue的事件：获取事件对象$event；
button上绑定show()方法获得Vue上的event事件
show(e){
console.log("show");
//获得Vue事件
console.log(e);
}
<button @click="show($event)">click show!</button><br />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script> window.onload = () =>{
new Vue({
el:'#Gary',
data:{
result:0
},
methods:{
//无参
show(e){
console.log("show");
//获得Vue事件
console.log(e);
},
//带参
add(a,b){
console.log("add");
this.result+=a+b;
}
}
});
} </script>
</head> <body>
<div id="Gary">
<button @click="show($event)">click show!</button><br />
<!--鼠标点击-->
<button @click="add(1,2)">click add!</button>{{result}}
<!--鼠标进入,使用修饰符once只触发一次-->
<button @mouseenter.once="add(10,20)">enter add!</button>{{result}}
</div> </body>
</html>
event的事件冒泡：事件会向上传播
methods:{
//无参
show(e){
console.log("show");
},
showA(){
console.log("showA");
},
showB(){
console.log("showB");
}
}
<div @click="showA()">
<div @click="showB()">
<button @click="show($event)">click A!</button>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script> window.onload = () =>{
new Vue({
el:'#Gary',
data:{
result:0
},
methods:{
//无参
show(e){
console.log("show");
},
showA(){
console.log("showA");
},
showB(){
console.log("showB");
}
}
});
} </script>
</head> <body>
<div id="Gary">
<!--<button @click="show($event)">click show!</button><br />-->
<!--鼠标点击-->
<!--<button @click="add(1,2)">click add!</button>{{result}}-->
<!--鼠标进入,使用修饰符once只触发一次-->
<!--<button @mouseenter.once="add(10,20)">enter add!</button>{{result}}--> <!--事件冒泡-->
<div @click="showA()">
<div @click="showB()">
<button @click="show($event)">click A!</button>
</div>
</div>
</div> </body>
</html>
Gary_event.html
事件冒泡：即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点
原生js阻止事件冒泡，需要先获取事件对象，再调用stopPropagation()方法；
vue事件修饰符stop，例@clikc.stop；
show(e){
console.log("show");
e.stopPropagation();
}
<button @click.stop="show($event)">click A!</button>
事件默认行为：网页元素，都有自己的默认行为，例如，单击超链接会跳转...
原生js方式需要获取事件对象，再调用preventDefault()方法；
在vue中则使用修饰符prevent，例@clikc.prevent
showLink(e){
e.preventDefault();
}
<a href="Gary_event.html" @click.prevent="showLink($event)">click link!</a>
二、v-show和v-if指令 传送门
v-show：通过切换元素的display CSS属性实现显示隐藏；
v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建；
new Vue({
el:'#Gary',
data:{
flag:true
}
});
<button @click="flag = !flag">click</button>
<h1 v-show="flag">Hello Gary!</h1>
<h1 v-if="flag">Hello Gary!</h1>
v-show是显示与隐藏，v-if是创建与销毁!!!
v-if、v-else、v-else-if控制流程语句
data:{
flag:true,
num:0
}
<button @click="num=1">--1--</button>
<button @click="num=2">--2--</button>
<button @click="num=3">--3--</button>
<h2 v-if="num=== 1">语文课</h2>
<h2 v-else-if="num=== 2">数学课</h2>
<h2 v-else>英语课</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script> window.onload = () =>{
new Vue({
el:'#Gary',
data:{
flag:true,
num:0
}
});
} </script>
</head> <body>
<div id="Gary">
<button @click="flag = !flag">click</button>
<h1 v-show="flag">Hello Gary!</h1>
<h1 v-if="flag">Hello Gary!</h1> <button @click="num=1">--1--</button>
<button @click="num=2">--2--</button>
<button @click="num=3">--3--</button>
<h2 v-if="num=== 1">语文课</h2>
<h2 v-else-if="num=== 2">数学课</h2>
<h2 v-else>英语课</h2> </div>
</body>
</html>
Gary_v-show.html
三、键盘事件
Vue的键盘事件：@keydown：按下、@keypress：按住、@keyup：抬起
以下分别是几种不同的键盘按键提交方式
methods:{
onEnter(e){
if(e.keyCode==13){
console.log("原生js-按下回车");
}
},
newOnEnter(){
console.log("Vue-按下回车")
},
onKeyAUp(){
console.log("抬起了按键A")
}
}
<!--原生js方式-->
<input type="text" placeholder="onEnter" @keydown="onEnter($event)"/> <br />
<!--vue提供方式-->
<input type="text" placeholder="newOnEnter 13" @keydown.13="newOnEnter($event)"/> <br />
<!--vue提供内置按键别名方式-->
<input type="text" placeholder="newOnEnter enter" @keydown.enter="newOnEnter($event)"/><br />
<!--其它按键别名-->
<input type="text" placeholder="keyup onKeyAUp" @keyup.a="onKeyAUp"/><br />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script> window.onload = () =>{
new Vue({
el:'#Gary',
data:{ },
methods:{
onEnter(e){
if(e.keyCode==13){
console.log("原生js-按下回车");
}
},
newOnEnter(){
console.log("Vue-按下回车")
},
onKeyAUp(){
console.log("抬起了按键A")
}
}
});
} </script>
</head> <body>
<div id="Gary"> <!--原生js方式-->
<input type="text" placeholder="onEnter" @keydown="onEnter($event)"/> <br />
<!--vue提供方式-->
<input type="text" placeholder="newOnEnter 13" @keydown.13="newOnEnter($event)"/> <br />
<!--vue提供内置按键别名方式-->
<input type="text" placeholder="newOnEnter enter" @keydown.enter="newOnEnter($event)"/><br />
<!--其它按键别名-->
<input type="text" placeholder="keyup onKeyAUp" @keyup.a="onKeyAUp"/><br />
</div>
</body>
</html>
Gary_event-keyboard.html
四、v-bind指令 传送门
v-bind：属性绑定，动态地绑定一个或多个特性，或一个组件 prop 到表达式
将Vue官网logo图片地址存放到Vue的data数据域中
data:{
imgUrl:"https://cn.vuejs.org/images/logo.png",
Mywidth:"200px",
Myheight:"200px"
},
<!--错误写法-->
<img src="imgUrl" width="Mywidth" :height="Myheight" /><hr />
<img v-bind:src="imgUrl" v-bind:width="Mywidth" v-bind:height="Myheight" /><hr />
<!--简写-->
<img :src="imgUrl" :width="Mywidth" :height="Myheight"/><hr />
使用错误的语法会取不到Vue数据域中图片src的地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script> window.onload = () =>{
new Vue({
el:'#Gary',
data:{
imgUrl:"https://cn.vuejs.org/images/logo.png",
Mywidth:"200px",
Myheight:"200px"
},
methods:{ }
});
} </script>
</head> <body>
<div id="Gary">
<!--错误写法-->
<img src="imgUrl" width="Mywidth" :height="Myheight" /><hr />
<img v-bind:src="imgUrl" v-bind:width="Mywidth" v-bind:height="Myheight" /><hr />
<!--简写-->
<img :src="imgUrl" :width="Mywidth" :height="Myheight"/><hr />
</div> </body>
</html>
Gary_v-bind.html
v-bind处理class与style样式
<!--普通的CSS引入-->
一<h3 class="myColor">Vue</h3><hr /> <!--变量引入-->
二<h3 :class="fontColor">Vue</h3><hr /> <!--以数组的形式 引入多个-->
三<h3 :class="[fontColor, fontBackgroundColor]">Vue</h3><hr />
<!--使用json 方式-->
四<h3 :class="{myColor : flag, myBackgounrdColor : !flag}">Vue</h3><hr /> <!--数组 + json-->
五<h3 :class="[fontSize, {myColor : flag, myBackgounrdColor : flag}]">Vue</h3><hr /> <!--绑定style-->
六<h3 :style="[colorA, colorB]">Vue</h3>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind_1</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '#Gary',
data : {
fontColor : 'myColor',
fontBackgroundColor : 'myBackgounrdColor',
flag : true,
fontSize : 'myFontSize',
colorA : {color : 'rgb(53, 73, 93)'},
colorB : {backgroundColor : 'rgb(65, 184, 131)'}
},
methods : { }
});
}
</script>
<style type="text/css">
.myColor{
color: rgb(53, 73, 93);
text-align: center;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 20px;
}
</style>
</head>
<body>
<div id="Gary">
<!--普通的CSS引入-->
一<h3 class="myColor">Vue</h3><hr /> <!--变量引入-->
二<h3 :class="fontColor">Vue</h3><hr /> <!--以数组的形式 引入多个-->
三<h3 :class="[fontColor, fontBackgroundColor]">Vue</h3><hr />
<!--使用json 方式-->
四<h3 :class="{myColor : flag, myBackgounrdColor : !flag}">Vue</h3><hr /> <!--数组 + json-->
五<h3 :class="[fontSize, {myColor : flag, myBackgounrdColor : flag}]">Vue</h3><hr /> <!--绑定style-->
六<h3 :style="[colorA, colorB]">Vue</h3>
</div>
</body>
</html>
Gary_v-bind_2.html
Vue_(基础)Vue中的事件的更多相关文章
- Vue_(基础)Vue中的指令
Vue.js中文文档 传送门 Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀 Vue指令: v-model:数据双向绑定: v-text:以纯文本方式显示数据: v- ...
- Vue中的事件与常见的问题处理
Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue中键盘事件
Vue中监听 键盘事件及修饰符 键盘事件: keyCode 实际值 48到57 0 - 9 65到90 a - z ( A-Z ) 112到135 F1 - F ...
- vue中滚动事件绑定的函数无法调用问题
问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...
- （二）咋使用VUE中的事件修饰符
1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...
- vue中的事件监听之——v-on vs .$on
跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...
- vue 中scroll事件不触发问题
在vue项目中需要监听滚动条滚动的位置,结果写了scroll监听事件就是不生效,最后查资料发现是页面有样式设置了over-flow:scroll,去掉之后完美解决.(页面样式中存在over-flow: ...
随机推荐
- 大数据测试类型&大数据测试步骤
一.什么是大数据? 大数据是一个大的数据集合,通过传统的计算技术无法进行处理.这些数据集的测试需要使用各种工具.技术和框架进行处理.大数据涉及数据创建.存储.检索.分析,而且它在数量.多样性.速度方法 ...
- springMVC基础框架搭建
1.导入springMVC相关jar包: 2.添加Web.xml配置文件中关于SpringMVC的配置 <servlet> <servlet-name>springmvc< ...
- 【ExtJs】获取grid选中的records
var records = me.grid.getSelectionModel().getSelection(); //获取所有选中的行 var record =records[0]; //获取选中行 ...
- 文件存储Mongo DB后前端对于文件操作的处理方式
以下是关于后端对于附件从存储服务器改为存储到Mongo DB后,前端对于一些常见需求处理方式的修改:包括文件上传下载和富文本编辑中的贴图实现. 一.文件上传(记录关于fetch中post请求Conte ...
- 实现div可以调整高度（div实现resize）
实现div可以调整高度(div实现resize) 一.div 实现resize(类似textarea) 代码如下: <!DOCTYPE html> <html> <hea ...
- shell脚本视频学习2
一.函数 1.函数格式 2.函数传入参数 3.手动输入函数中的参数 4.函数返回值 成功返回0,失败返回1 5.输入一个目录,判断目录是否存在,如果不存在则给出提示,如果存在则提示输入要创建的文件名, ...
- css样式小结（持续更新...）
1.手写table的border,显示空白间隔,而不是想要的样式,需要添加下面的样式处理 table{ border-collapse:collapse; } 2.移动端输入框效果,去掉高亮边框, i ...
- Java 访问 C++ 方法：JavaCPP
JavaCPP提供了在Java中高效访问本地C++的方法.采用JNI技术实现,支持所有Java实现包括Android系统,Avian 和 RoboVM. JavaCPP提供了一系列的Annotatio ...
- 一篇文章让你彻底明白__getattr__、__getattribute__、__getitem__的用法与执行原理
__getattr__ 在Python中,当我们试图访问一个不存在的属性的时候,会报出一个AttributeError.但是如何才能避免这一点呢?于是__getattr__便闪亮登场了 当访问一个不存 ...
- IoU-Net论文笔记
原论文标题:Acquisition of Localization Confidence for Accurate Object Detection 1. 前言 Megvii在ECCV 2018上的一 ...