零基础学习 Vue.JS ——（4） 事件篇

最新推荐文章于 2024-03-04 09:39:17 发布
最新推荐文章于 2024-03-04 09:39:17 发布
阅读量203 收藏 1
点赞数 1
分类专栏： vue 文章标签： web前端 vue js 基础 轻量级框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40678503/article/details/82343645
版权

过滤器

vue.js允许自定义过滤器用来作为一些常见文本的格式化，比如将字母由小写转为大写或者截取某个字符串的一部分。
过滤器可以用在两个地方：插值和v-bind指令。

在vue1.0中有一些过滤器，但是在vue2.0中所有过滤器 都被废弃了，需要用户自定义过滤器。

<p>{{username|uppercase}}</p>

过滤器可以串联

<p>{{username|uppercase|abbr}}</p>

例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <p>{{username|uppercase|abbr}}</p>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        username:"xiaoming"
   },
    filters:{
        uppercase:function (value) {
            return value.toUpperCase();
        },
        abbr:function (value) {
            return value.slice(0,3);
        }
    }

});

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <p>{{tel|hide}}</p>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        tel:"15522228038"
    },
    filters:{
        hide:function (value) {
            return value.slice(0,3)+"****"+value.slice(7,11);
        }
    }

});

v-on指令监听DOM事件来触发javascript回调函数

<input type="button" v-on:click="test()" value="按钮">

事件回调函数可以传入$event这个事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" @keydown="test($event)">
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
   methods:{
        test:function($event){
            if($event.keyCode==13){
                $event.target.blur(); //按键盘的回车键失去焦点
            }
        }
   }

});

事件的修饰符

.stop修饰符用来阻止事件冒泡

div中嵌套了一个input标签，分别都有自己的点击事件。当没有.stop修饰符时，点击input按钮是会先执行input上的事件然后再执行div上的事件。也就是会先弹出B再弹出A
测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div @click="test_1">
        username:<input type="text"> <input type="button" value="检索" @click="test_2">
    </div>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
   methods:{
        test_1:function(){
            alert("A");
        },
        test_2:function(){
            alert("B")
        }
   }

});

如果将这句
username:<input type="text"> <input type="button" value="检索" @click="test_2">
改为
username:<input type="text"> <input type="button" value="检索" @click.stop="test_2">
就会发现此时点击input按钮时只会弹出B，阻止了事件的冒泡。

.prevent修饰符取消事件的默认动作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        username:<input type="text">
    </div>
    <form action="http://www.baidu.com" method="get" @submit.prevent="test_3">
        <input type="submit" value="提交表单">
    </form>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    methods:{
        test_3:function(){
            alert("c");
        }
    }

});

当点击提交表单按钮时，应该先弹出C再跳转到百度的首页，但是加上.prevent修饰符后依然会执行test3弹出C，但是不会跳转到百度的首页，因为.prevent修饰符取消事件的默认动作。

.capture 修饰符捕获冒泡事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div @click.capture="test_1">
        username:<input type="text"> <input type="button" value="检索" @click="test_2">
    </div>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
   methods:{
        test_1:function(){
            alert("A");
        },
        test_2:function(){
            alert("B")
        }
   }

});

在div中加入.capture修饰符后，点击input按钮，同样也只会弹出B。

.self 只在当前控件触发事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div @click.self="test_1">
        username:<input type="text"> <input type="button" value="检索" @click="test_2">
    </div>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
   methods:{
        test_1:function(){
            alert("A");
        },
        test_2:function(){
            alert("B")
        }
   }

});

加上.self修饰符后，当点击div时会弹出A，点击input时只会弹出B，不会产生连带反应。事件只会在当前的控件上被触发。

.once 事件只会执行一次

加上.once修饰符后事件只会执行一次。
<input type="button" value="单击">
第二次点击这个按钮时事件不会被触发。

表单控件绑定

可以用 v-model 指令在表单控件上创建双向数据绑定。

<input type="text" v-model="username" value="文本框"/>

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始
值,因为它会以模型层的数据作为初始值。

data:{username:"Scott" }

此时文本框中默认显示的是Scott，而不是文本框。

v-model 指令可以用来绑定复选框。

<input type="checkbox" v-model="sport" value="足球"/>足球 
<input type="checkbox" v-model="sport" value="篮球"/>篮球 
<input type="checkbox" v-model="sport" value="羽毛球"/>羽毛球 
<input type="checkbox" v-model="sport" value="游泳"/>游泳 
<p>{{sport}}</p>

data:{
	sport:[]
 }

选中哪个复选框时，值就会显示在网页中。如果想要设置默认值

data:{sport:["足球"] }

此时就设置了默认值是足球。

单选按钮的绑定 v-model 指令可以用来绑定单选按钮。
和复选框基本一样，只是因为是单选框所以data中保存的是一个字符而不是数组。

<input type="radio" v-model="sex" value="男">男 
<input type="radio" v-model="sex" value="女">女
<input type="radio" v-model="sex" value="保密">保密 
 <p>{{sex}}</p>

data:{
	sex:"保密" 
}

此时默认的选项是保密。

v-model 指令可以用来绑定下拉列表。

<select v-model="nation">
	<option value="汉族">汉族</option> 
	<option value="藏族">藏族</option> 
	<option value="蒙古族">蒙古族</option> 
	<option value="回族">回族</option> 
	<option value="朝鲜族">朝鲜族</option>
</select> 
<p>{{nation}}</p>

data:{
	nation:"汉族"
     }

此时默认选项为汉族。

lazy 修饰符
v-model 在 input 事件中同步输入框的数据 ,但可以添加一个 lazy 修饰 符,从而转变为在 change 事件中同步。

<input type="text" v-model.lazy="username"/> 
<p>{{username}}</p>

如果想自动将用户的输入值转为 Number 类型,可以添加一个 number 修饰符。

<input type="text" v-model.number="salary"/> 
<p>{{salary}}</p>

因为文本框中输入的内容默认为字符串的格式，所以此时我们需要用到.number修饰符来将字符串转化为数字。

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入，忽略空格。

<input type="text" v-model.trim="address"/> 
<p>{{address}}</p>
不认输的西瓜
关注
专栏目录
vue（二）
wx254418276的博客
10-30 195
事件修饰符： @click.stop = "fn()" 用来阻止事件冒泡，到这个地方就结束。 @click.once = "fn()" 只能执行一次， 单次事件 @click.prevent = "fn()" 阻止默认事件，例如表单提交 @click.captrue = "fn()" 如果在冒泡事件中，就会优先处理外层事件，后处理内部的点击事件 (处理捕获事件) @cli...
VUE的事件修饰符，once,prevent,stop，capture,self,passive
要啥名字
04-12 388
once，只执行一次 <div v-on:click.once='alert("1")'></div> 1 只有在第一次点击时会执行，再次点击不会起作用 2. prevent 阻止默认程序，比如form表单中的summit提交按钮，会自己提交， <form v-on:submit="alert('who')" action="first_submit" ...
Vue组件点击事件不触发的问题，添加事件修饰符native解决
最新发布
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
03-04 8327
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
vue2.0那些坑之使用elementUI后v-on:click事件不生效问题
热门推荐
卡卡罗特的博客
05-30 1万+
最近学习使用vue2.0,的过程中遇到了大大小小不少坑，这里讲一下v-on指令，我在项目中引入了elementUI,进行布局，代码如下：但是再出发外层盒子，点击事件时，但是没效果，检查代码，没错也没报错，就是没有点击效果，这里需要对click进行调整了换成@click.native=""所以在使用elementUI时，小伙伴们要注意一下。...
v-once的使用
FGGIT的博客
01-29 147
v-once的使用
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
谈谈Vue.js——vue-resource全攻略
10-20
Vue.js是目前非常流行的前端JavaScript框架，它采用数据驱动的方式构建用户界面，让用户可以更加专注于构建交互式的界面而不需要直接操作DOM。Vue.js的扩展性很强，拥有大量的插件，其中vue-resource是一个非常实用...
vue的input事件与点击事件冲突，先失焦点
duruo0的博客
03-22 2457
在开发app时，自己做了个搜索筛选，结果每次输入字符后，想在回显的列表中选数据时遇到了问题，点第一次没反应，得点击第二次才会触发事件。打印发现在第一次点击事件时，只触发了input的blur事件，第二次才会触发点击事件，遂解决问题。，将按钮click事件替换为 mousedown 事件，优先于blur事件执行，最终实现了正确效果，感恩！搜索发现，是因为input中blur失去焦点事件与点击事件冲突，参考。
vue点击事件失效
maowencai的博客
08-24 6131
vue点击事件失效
vue click阻止冒泡_【微服务】138：Vue之各种指令的使用
weixin_39638526的博客
01-31 461
今天是刘小爱自学Java的第138天。感谢你的观看，谢谢你。学习计划安排如下：昨天初步接触了2个指令，继续学其它指令。这个指令数量有点多，有的一个指令还有多种用法，一次性全记下来显然不太现实，只能说随着今后不断地使用而加深记忆。一、v-on:click指令v-on指令用于给页面元素绑定事件。事件是有很多种的，这里以非常常见的点击事件为例做一个说明：①v-on:click这个写法对应的也就...
vue 子组件/父组件的生命周期只被执行一次的问题及再次进入页面静态数据不会初始化的问题
树上骑个猴的博客
09-22 2691
1.试试activated的生命周期，如果每次进入页面都会触发该生命周期而不会触发其他生命周期，则说明使用了keep-alive <template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view :key="ke
Vue点击事件失效
m0_56800567的博客
09-20 8570
Vue点击事件失效 ,在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true;导致子组件的点击事件失效。1. div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，2. 还有一种可能被默认事件阻止了，我们加个这个就能解决，
【Vue2】事件处理(点击、按键)
weixin_45707229的博客
08-19 6292
Vue的按键点击事件@click="函数名" 或者 @click="函数名($event,参数...)"，$event是点击事件的对象。
vue——@click的事件命令以及修饰符
chunchun1230的博客
09-29 1万+
1、@click.stop 阻止事件冒泡 //只弹出“noclick” <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", .
vue使用once修饰符，使事件只能触发一次
weixin_41201496的博客
03-04 2505
使用once修饰符，使事件只能触发一次 多个修饰符可以同步使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <!--定义vue的操作对象--> <div id="app"> ...
vue生成uuid唯一标识
qq_40678503的博客
05-08 1万+
最近在写代码的时候，需要向后端传一个唯一字段作为标识，当多次提交内容不变的时候，标识不改，如果有内容改变，则标识改变，借鉴了一位大佬的uuid代码，但是太不好意思忘记是谁了，vue 使用watch监听对象的变化，如果变了调用一遍uuid的函数并且存在一个字段里就可以了。 uuid() { var s = []; var hexDigits = '0123456789abcdef'; for (var i = 0;
iframe页面向父页面传值——postMessage用法
qq_40678503的博客
06-11 2809
最近在做系统的迁移，需要将老的系统作为iframe嵌入到新系统中，其中某些信息需要通过iframe的页面传到父页面中，调用contentWindow，因为新系统和老的系统域名不一样，会报跨域问题，最后选择了postMessage这种方法。 用法： iframe的页面中： window.parent.postMessage(你要传递的值,传递到那个域名); 如: window.parent.postMessage('变量a','http://xxx.com'); 我是使用的vue，所以在create中监听
Element UI 菜单高亮设置
qq_40678503的博客
10-22 2801
其实这个功能在element ui官方文档中有写 其实主要是这两个属性 <el-menu :default-active="$route.path" router> <el-submenu index="1"> <template slot="title"> <span>菜单栏</span
"掌握Vue.js核心知识——VUE面试题集与解析
Vue.js是一种流行的JavaScript前端框架，用于构建用户界面。它被设计为一种轻量级框架，可以与现有项目很好地集成。Vue.js的主要优点包括易用性、灵活性和性能。首先，Vue.js非常易于学习和上手，新手可以很快上手并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值