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: ...
随机推荐
- java中的接口和php的接口的区别
php: 规范: 接口是一种特殊的抽象类,这种抽象类中只包含抽象方法和静态常量. 在接口中的抽象方法只能是public的,默认也是public权限. abstract和final修饰符也不能修饰接口中 ...
- NPOI_winfrom导出Excel表格（一）（合并单元格、规定范围加外边框、存储路径弹框选择）
1.导出 private void btn_print_Click(object sender, EventArgs e) { DataTable dtNew = new DataTable(); d ...
- C#绘图、画笔相关
dg.SmoothingMode = SmoothingMode.HighSpeed; //高质量 dg.PixelOffsetMode = PixelOffsetMode.HighSpeed; // ...
- C# 文件过滤器
首先说明一个示例,分析一下Filter属性的构成:“ Excel文件|*.xls ”,前面的“Excel文件”成为标签,是一个可读的字符串,可以自定定义,“|*.xls”是筛选器,表示筛选文件夹中后缀 ...
- Express bodyParser中间件使用方式
bodyParser中间件用来解析http请求体,是express默认使用的中间件之一. 1.这个模块提供以下解析器 (1) JSON body parser (2) Raw body parser ...
- fetch的文件流下载及下载进度获取
下载过程中,获取进度,fetch API并没有提供类似xhr和ajax的 progress所以用 getReader()来循环读取大小 let size = 0; fetch( URL() + `/s ...
- fastadmin 列表展示时字段值截取
{field: '字段名', title: __('lang中的语言名'),formatter:function(value,row,index){ value=value?value:''; var ...
- unix/linux共享库（动态库）简介
一.创建共享库: 1.写源程序 xxx1.c xxx2.c.../*.c(通配符方式) 2.编译源程序,加-fpic生成.o文件 gcc -c -fpic xxx1.c xxx2.c.../*.c(通 ...
- 基础数据类型(int,str,bool)
一 python 中的基础数据类型 1.int 数字类型(整数类型) 主要用来数学计算 2.str 字符串 可以保存少量数据进行操作 3.bool 布尔值 判断真假 True Fa ...
- [APIO2010] 算法竞赛竞赛经典 巡逻
原题链接 题目描述 在一个地区有 n 个村庄,编号为1,2,-,n. 有 n-1 条道路连接着这些村庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到达其他任一个村庄. 每条道路的长度 ...