这是我学习 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(1);
- ev.cancelBubble = true; //阻止事件冒泡
- },
- show2: function() {
- alert(2);
- }
- }
- });
- };
- </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(1);
- },
- show2: function() {
- alert(2);
- }
- }
- });
- };
- </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(1);
- 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(1);
- }
- }
- });
- };
- </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(2)
- }
- }
- })
- }
- </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>
来源: http://www.cnblogs.com/15fj/p/8047986.html