vue修饰符学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修饰符</title>
<style>
*{margin: 0;padding: 0;}
body{padding-left: 10px;}
h1{color: red}
h4{color: #000000}
p{margin-top: 10px}
</style>
<script src='vue.js'></script>
</head>
<body>
<div id='app'>
<h1>一、v-model的修饰符</h1>
<h4>.lazy</h4>
<input type="text" v-model.lazy='input_lazy'>
<br>
<p>input_lazy:{{input_lazy}}</p>
<p>.lazy 当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化<br>
而当焦点离开文本框时，属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。<br>即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。
</p>
<h4>.number</h4>
该修饰符用来将输入内容自动转换成数值。<br>
<input type="text" v-model.number='input_number'>
<p>input_number:{{input_number}}</p>
<p>.number 当开始输入数字时，属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符，属性值将不再变化。<br>
而当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值，所以属性值将实时更新成相同的字符串。<br>
即使后面输入数字，也将被视作字符串。</p>
<h4>.trim</h4>
该修饰符用来自动过滤字符串前后的空字符。<br>
<input type="text" v-model.trim='input_trim'>
<p>input_trim:{{input_trim}}</p>
<p>.trim Vue会自动过滤掉前后的多个空格，最终属性值是前后没有空字符的字符串。</p>
<h1>二、v-on的修饰符</h1>
绑定的事件修饰符可以改变事件的触发方式。<br>
<h4>.stop</h4>
<p>该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法</p>
<div @click.stop='div_click'>
<button @click.stop='stop_click'>StopPropagation</button>
</div>
<p>.stop: <span >{{xsf}}</span></p>
<p>.stop 按照事件冒泡原理，点击按钮时，从当前触发的元素开始，沿着它的父元素一直到根元素，都会依次触发 click 事件。<br>但是应用了 .stop 修饰符后，将只会触发当前元素的 click 事件，并阻止事件向上冒泡。</p>
<h4>.prevent</h4>
该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法<br>
<form @submit.prevent='form_submit'>
<button type="submit">preventDefault</button>
</form>
<p>.prevent: <span v-html='xsf1'></span></p>
<p>.prevent 当点击提交按钮时，会触发绑定的事件，并且阻止表单提交并刷新当前页面的默认行为。</p>
<h4>.self</h4>
该指令只当事件是从事件绑定的元素本身触发时才触发回调 只当事件在该元素本身（而不是子元素）触发时触发回调<br>
<div @click.self='div_click' style="display:inline-block; width: 80px; background-color:red;">
<button @click='stop_click'>self</button>
</div>
<p>.self: <span>{{xsf}}</span></p>
<p>因为 div_click 事件被修饰符绑定，只有在直接点击到父元素 div ，即红色区域内，事件才会被触发。<br>
即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。</p>
<h4>.once</h4>
该修饰符表示绑定的事件只会被触发一次<br>
<button @click.once='once_click'>once</button>
<p>once: <span>{{xsf2}}</span></p>
<p>.once 多次点击按钮。只有在第一次点击时，事件才会触发。</p>
<h1>键值修饰符</h1>
该修饰符可以用来监听键盘事件<br>
通过 keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听<br>
<input type="text" @keyup.enter="enter_click" />
<p>keygen: <span>{{xsf3}}</span></p>
也可以自定义按键名称<br>
<input type="text" @keyup.ent='ent_click' />
<p>自定义按键名称：<span>{{ xsf4 }}</span></p>
</div>
<script>
Vue.config.keyCodes.ent = 13;
var vm = new Vue({
el: "#app",
data: {
input_lazy : "",
input_number : "",
input_trim: "",
xsf: "",
xsf1: "",
xsf2: 0,
xsf3: "",
xsf4: "",
},
methods: {
div_click: function(){
this.xsf = 'div_click'
},
stop_click: function(){
this.xsf = 'stop_click'
},
form_submit: function(){
this.xsf1 = "阻止默认行为成功"
},
once_click: function(){
this.xsf2+=1
},
enter_click: function (ev) {
this.xsf3 = "你按的是回车"
},
ent_click: function(){
this.xsf4 = '你按的是自定义按键'
}
}
})
</script>
</body>
</html>
vue修饰符学习的更多相关文章
- 理解vue 修饰符sync
也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...
- Vue 修饰符once的方法使用
once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...
- 深入理解vue 修饰符sync
[ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...
- 事件&vue修饰符
JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- vue 修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点(.) ...
- Vue修饰符
为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...
- vue 修饰符（转载）
大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...
- vue 修饰符 整理
事件修饰符 .stop <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> .preven ...
随机推荐
- C# 实现子窗体控制父窗体的方法
我们来实现这样一个功能:当父窗体打开一个子窗体时隐藏父窗体的Panel,而当子窗体关闭时让Panel显示.实现的主要思路是创建一个子窗体的父类并在类中声明一个委托,当父窗体调用子窗体时绑定显示P ...
- Harbor镜像迁移
目录 背景说明 方案实现 背景说明 在早期生产环境尝试使用docker的时候,虽然使用了harbor作为镜像仓库,但是并没有做好相关存储规划,所有的镜像都直接存储到了harbor本地.随着业务发展,本 ...
- python自动化运维之路~DAY4
python自动化运维之路~DAY4 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块导入方式详解. 关于Python有几种导入模块的方式,请参考我的另外一篇博客(第20 ...
- 使用cpanm安装perl相关模块
cpanm是安装Perl模块的最方便的方法.自动下载安装依赖包.使用CPAN shell或下载源码包安装模块,遇到大量依赖关系,非常头痛.下面就是一例: 1. 安装cpanmcpanm其实是一个可执行 ...
- centos7环境下开启指定端口
参考原博:https://www.cnblogs.com/eaglezb/p/6073739.html 查看已经开放的端口: firewall-cmd --list-ports 开启端口 firewa ...
- jenkins在windows平台自动化构建代码
jenkins服务端:centos6.8 客户端:windows server2012 windows10 工具:cwRsync 注:复制为jenkins工作目录到网站目录,无需服务端. 1.安装je ...
- Runnable Callable及Future
https://www.cnblogs.com/MOBIN/p/6185387.html
- DotNetBar SuperTabStrip带图标时调整为指定字号的最小宽度
SuperTabStrip带图标时很占空间,需要调整1.整体设置 2.单个Tab设置
- linux4.10.8 内核移植（四）---字符设备驱动_led驱动程序
一.字符设备驱动程序介绍 app里面用 open.read.write等等函数出来操作底层硬件.驱动程序中也有对应的xxx_open等函数.怎么找到驱动程序中的函数依赖于驱动程序框架. 二.搭建驱动程 ...
- Java——集合
Java的集合类是一种非常有用的工具类,用于存储多个对象.它是一个容器,可以把多个对象放到里面. Java集合分三种情况: Set:无序.不可重复 List:有序.可重复 Map:具有映射关系 Col ...