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: ...
随机推荐
- Eclipse错误提示: Symbol 'xxxx' could not be resolved
在eclipse中安装maven(网上资源):https://zhinan.sogou.com/guide/detail/?id=1610049267 项目名 右键->configure-> ...
- vue打开到新页面，并传递参数
打开新页面,有两种方式, 一种是标签式: <router-link tag="a" target="_blank" :to="{path: '/ ...
- centos redis自启动
#!/bin/sh # chkconfig: 2345 90 10 # description: Redis is a persistent key-value database # Simple R ...
- linux获取保留yum源、并获取安装位置
linux使用yum安装之后保留yum源 linux在使用yum安装之后默认会删除rpm包,那么如何保留呢? vim /etc/yum.conf 将这里的0改成1即可 linux安装的yum源在什么地 ...
- 轻松阅读linux内核源码
神器:基于linux4.4版本,含函数和功能注释树 http://www.bricktou.com/ https://lwn.net/ 从0开始写linux,这个无敌牛逼,简单阅读了Introduct ...
- RHEL7网络管理NetworkManager和nmcli指令
1.NetworkManager简介 在 Red Hat Enterprise Linux 7 中,NetworkManager 提供的默认联网服务是一个动态网络控制和配置守护 进程,它尝试在其可用时 ...
- 解决IDEA中springboot整合mybatis中出现的Invalid bound statement(not found)的问题【转】
感谢原博主,原文链接 : https://blog.csdn.net/benben513624/article/details/81076182 最近学习springboot的开发,中间磕磕碰碰也是遇 ...
- Python学习 第一天（一）初始python
1.python的前世今生 想要充分的了解一个人,无外乎首先充分了解他的过去和现在:咱们学习语言也是一样的套路 1.1 python的历史 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈp ...
- httpwatch
https://blog.csdn.net/coderising/article/details/89530016 别人的文章
- winform Combox绑定数据时不触发SelectIndexChanged事件
做了一个仓库选择的联动,选了仓库选其下的货区,选了货区选其下的货架分区.每个combox初始化.绑定数据是都会触发SelectIndexChanged事件,相当头疼. 后来无意中在网上看到了一种方法— ...