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 ...
随机推荐
- context configure and clock schedule
每个窗口都有自己的context,这里演示怎么配置context以及如何实现定时器...... #-*- coding:gbk -*- import pyglet platform=pyglet.wi ...
- vue2.0 之标签属性
标签属性v-bind <template> <div> <ul> <li v-for="item in list"> {{ item ...
- Scala进阶之路-尾递归优化
Scala进阶之路-尾递归优化 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 递归调用有时候能被转换成循环,这样能节约栈空间.在函数式编程中,这是很重要的,我们通常会使用递归方法来 ...
- Junit测试private方法
package com.bill99.junit; public class ACase { private String echoRequest(String request) { return & ...
- SQL语句（三）数据表的修改
数据表的修改 1. 创建实验表people people CREATE TABLE people ( name ), gender ), birthday ) ) 2.修改表 ALTER TABLE ...
- ubuntu上zip格式解压乱码解决
在windows上压缩的文件,是以系统默认编码中文来压缩文件.由于zip文件中没有声明其编码,所以linux上的unzip一般以默认编码解压,中文文件名会出现乱码. 虽然2005年就有人把这报告为bu ...
- 小程序Promise不支持finally解决方案
小程序Promise不支持finally解决方案 代码片段 点击链接即可在微信开发者工具中查看代码wechatide://minicode/t2eidemj7P3X git地址 基本思路 小程序的Pr ...
- java程序在windows后台执行的办法
1.新建run.txt文件 2.在文件中输入一下内容: @echo off start javaw -jar xx.jar exit 3.保存,修改文件名为run.bat4.双击即可 5.删除wind ...
- 20155117王震宇 2016-2017-2 《Java程序设计》第六周学习总结
教材学习内容总结 IO流的分类: 根据流的数据对象来分: 高端流:所有的内存中的流都是高端流,比如:InputStreamReader 低端流:所有的外界设备中的流都是低端流,比如InputStrea ...
- TypeError: Only valid with DatetimeIndex, TimedeltaIndex or PeriodIndex, but got an instance of 'Index'
这个问题说的很清楚,就是类型不对,需要转化类型,首先讲一下这个问题是在使用pandas的resample函数激发的,官方文档解释的较为清楚,如下: Convenience method for fre ...