vue.js事件，属性，以及交互
这是我学习vue的第二天，今天主要学习了如何利用vue阻止事件冒泡，阻止事件的默认行为，键盘事件以及如何添加class、style这些属性，以及如何利用vue来进行数据交互，利用百度的一个API来写一个百度下拉列表，今天学习完之后，感触最深的就是vue主要是逻辑上的应用，减少了DOM的操作，并且vue还用到了原生的方法，所以学好js高程很有必要。
一、如何利用vue阻止事件冒泡以及阻止事件的默认行为和了解什么是事件对象
在介绍事件冒泡之前，我们来了解一下事件，在上篇博客中我们知道事件的一般形式为v-on:click/mouseover，但是在vue中我们更加推荐@click/mouseover这种简写的方式
1、事件对象：@click="show($event)"
事件对象
2、阻止事件冒泡：
方法有两种
a). ev.cancelBubble=true; 来自于原生的方法
b). @click.stop 推荐
方法一：利用ev.cancelBubble=true阻止事件冒泡，当我们点击按钮只会弹出1，而不会弹出2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert();
ev.cancelBubble=true; //阻止事件冒泡
},
show2:function(){
alert();
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click="show($event)">
</div>
</div>
</body>
</html>
方法二：利用@click.stop阻止事件冒泡，只会弹出1，不会弹出2
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert();
},
show2:function(){
alert();
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show()"> //阻止事件冒泡
</div>
</div>
</body>
</html>
3、阻止事件的默认行为
方法有两种：
a). ev.preventDefault(); //来自原生
b). @contextmenu.prevent 推荐
方法一：利用ev.preventDefault()阻止事件的默认行为
右键点击按钮只会弹出1，不会出现其他的默认行为
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert();
ev.preventDefault();
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)">
</div>
</body>
</html>
方法二：利用@事件.prevent阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert();
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu.prevent="show()">
</div>
</body>
</html>
4、键盘事件
键盘:
@keydown $event ev.keyCode
@keyup 常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件深入</title>
<script src="2016-9-13/vue.js"></script>
<script>
window.onload=function () {
new Vue({
el:"#box",
data:{ },
methods:{
show:function (ev) {
alert(ev.keyCode); },
show2:function () {
alert()
}
} })
}
</script>
</head>
<body>
<div id="box">
<!--当键按下去的时候弹出键码-->
<!--<input type="text" @keydown="show($event)">-->
<!--当键起来的时候弹出键码-->
<!--<input type="text" @keyup="show($event)">-->
<!--按enter键才能弹出2-->
<!--<input type="text" @keyup.enter="show2($event)">-->
<!--按上下左右键弹出2-->
<input type="text" @keyup.up="show2($event)">
<input type="text" @keyup.down="show2($event)">
<input type="text" @keyup.left="show2($event)">
<input type="text" @keyup.right="show2($event)">
</div> </body>
</html>
二、属性
属性是通过v-bind:属性 的形式来绑定属性的，简写方式为：属性='',更加推荐简写方式
1、src属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
url:'https://www.baidu.com/img/bd_logo1.png'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<!--<img src="{{url}}" alt="">--> //效果可以出来但是会报一个404错误
<img v-bind:src="url" alt=""> //效果可以出来但是不会报404错误
</div>
</body>
</html>
2、class属性
` 有以下几种形式
:class="[red]" red是数据
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
以下几个例子中：文字....这几个字都会变成红色背景为蓝色
:class="[red]"形式 其中red是数据 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
red:'red'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="[red]">文字...</strong>
</div>
</body>
</html>
:class="[red,b,c,d]"形式 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
red:'red',
b:'blue'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="[red,b]">文字...</strong>
</div>
</body>
</html>
:class="{red:a, blue:false}"形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:true,
b:false
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="{red:a,blue:b}">文字...</strong>
</div>
</body>
</html>
:class="json"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
json:{
red:true,
blue:true
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="json">文字...</strong>
</div>
</body>
</html>
3、style属性
有以下几种形式：跟class的形式一样
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"
//常见用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="{color:'red'}">文字...</strong>
</div>
</body>
</html>
//:style="[c]"形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c]">文字...</strong>
</div>
</body>
</html>
//:style="[c,d]"形式 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'},
b:{backgroundColor:'blue'}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c,b]">文字...</strong>
</div>
</body>
</html>
//:style="json"形式：接收的是json数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:{
color:'red',
backgroundColor:'gray'
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="a">文字...</strong>
</div>
</body>
</html>
三、交互：想要用vue来进行交互，我们在html页面要引入一个叫做vue-resouce.js的文件，这个文件提供了get,post，jsonp等方法来获取提交数据 1、get方法进行交互
1.1获取普通文本：其中a.txt就是同级目录下的一个普通文本文件，点击按钮能够弹出a.txt的文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.data);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
1.2、向服务器发送数据：将数据传给后台，进行计算，并且弹出计算结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
get.php文件：实现2个数的相加运算
<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a+$b;
?>
2、post方法进行交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
post.php文件：实现数字相减
<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a-$b;
?>
3、jsonp进行交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
word:'a'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"，API是什么就写什么
}).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); };
</script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
四、百度下拉列表实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.gray{
background: #ccc;
}
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(ev){
if(ev.keyCode==38 || ev.keyCode==40)return; //因为再按上下键的时候input标签的值会发生变化，会再一次进行jsonp请求，所以要阻止上下键返回值 if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1); //按enter键的时候跳转到当前页面
this.t1='';
} this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ //从接口获取数据，并将数据用myData存起来
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){ });
},
changeDown:function(){ //按下键实现++运算
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.t1=this.myData[this.now];
},
changeUp:function(){ //按上键实现--运算
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.t1=this.myData[this.now];
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="value in myData" :class="{gray:$index==now}"> //给当前添加高亮
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>
vue.js事件，属性，以及交互的更多相关文章
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 记一下vue.js事件的修饰等问题
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是 ...
- vue.js计算属性 vs methods
计算属性:Vue.js 模板内的表达式非常便利,但是缺点就是只能用于简单的运算,如果模板中有太多的逻辑运算会让模板不堪重负且难以维护.恰恰计算属性可以处理复杂的逻辑运算,也就是说对于任何复杂逻辑你都应 ...
- Vue.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- vue.js 三（数据交互）isomorphic-fetch
至于fetch的介绍,在这里就不多说了,官方和网络上的说明不少 之前使用jquery的Ajax朋友,可以尝试一下使用一下这个新的api 推荐使用isomorphic-fetch,兼容Node.js和浏 ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
- vue.js事件传值之子组件传向父组件以及$emit的使用
在项目开发中,有时候会遇到一种需求比如是:在子组件中,通过一个事件,比如点击事件,去改变父组件中的某个值,下面来看看是怎么个流程 还是先截图目录结构 父组件为app.vue,components中的文 ...
随机推荐
- vue2.0实现在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- SSH框架的多表查询和增删查改 （方法一）上
原创作品,允许转载,转载时请务必标明作者信息和声明本文章==> http://www.cnblogs.com/zhu520/p/7772823.html 因为最近在做Android 练习的 ...
- sublime中配置Java 环境
1.线安装jdk,并配置好环境变量2.创建批处理或Bash Shell脚本文件打开任意的文本编辑器,输入下面的内容,并保存为runJava.bat文件,然后把runJava.bat批处理文件移动到JD ...
- 关于viewports 设备像素比 密度
首先追溯到像素,第一个麻烦事像素的总量问题,同样的大小的屏幕像素可以差很远,像素大小更小的导致内容也变小 在小屏幕上如果展示巨大的桌面网页,诺基亚的做法是首先载入完整的桌面网页,然后缩放至设备屏幕 ...
- Problem E: 分数类的输出
Problem E: 分数类的输出 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 2699 Solved: 1227[Submit][Status][ ...
- JS中有关数组Array的常用方法函数
Array对象的方法主要有如下几种(我所知道的): concat()连接两个或多个数组,并返回结果,但是值得注意的是该方法并不改变数组本身,而仅仅返回一个数组连接的副本. push()在数组后面添加一 ...
- Visual Studio 2017开发环境的安装
Visual Studio 2017是微软为了配合.NET战略推出的IDE开发环境,同时也是目前开发C#程序最新的工具,本节以Visual Studio 2017社区版的安装为例讲解具体的安装步骤. ...
- Python的classmethod和staticmethod区别
静态方法(staticmethod) 类方法(classmethod) 静态方法和类方法都可以通过类名.方法名或者实例.方法访问. #-*- coding:utf8 -*- class A(objec ...
- tcprstat
tcprstat http://www.percona.com/docs/wiki/tcprstat:start 监控网络流量情况,计算请求的响应时间(the delay between reques ...
- 基于 nodejs 的 webSockt （socket.io）
基于 nodejs 的 webSockt (socket.io) 理解 本文的业务基础是在基于 nodejs 的 socket.io 的直播间聊天室(IM)应用来的. 项目中具体的 框架如下 expr ...