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 ...
随机推荐
- Python练习1
一.linux,基于文件大小,创建时间,修改时间,文件内容,文件名称等进行查找汇总和输出 2019-01-04 只操作文本文件 #!/usr/bin/env python # -*- coding: ...
- 6、Python-元组
定义 # Python的元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号. aTuple = ('et',77,99.9) print(aTuple) 元组的操作 aTu ...
- spring tool suite处理 maven项目名称红色感叹号的问题
今天构建一个springboot项目时,发现项目有个红色感叹号,但是pom.xml跟Build Path 都没问题. 解决方案: 选择 Windows --> show view --> ...
- js实用代码段（持续更新）
1.得到一个数,在一个有序数组中应该排在的位置序号: function orderInArr(num,arr) { if(num > arr[0]){ return 1 + arguments. ...
- 5. SprigBoot自动配置原理
配置文件到底能写什么?怎么写? 都可以在SpringBoot的官方文档中找到: 配置文件能配置的属性参照 1.自动配置原理: 1).SpringBoot启动的时候加载主配置类,开启了自动配置功 ...
- golang string int int64转换
#string到int int,err:=strconv.Atoi(string) #string到int64 int64, err := strconv.ParseInt(string, 10, 6 ...
- Hadop 基础
HDFS 体系结构 mapreduce 体系结构和算法 haddop 集群 zookeeper 操作:HBase 体系结构Hive /Sqoop 体系结构和基本操作: mapreduce 逻辑处理数据 ...
- dubbo服务使用spring-data-mongodb进行时间查询的bug记录
一.项目情况:spring-boot+mongodb+dubbo. 二.问题:调用dubbo服务并使用spring-data-mongodb的gte,lte时间段比较查询, @Reference(re ...
- 数据库之MySQL ERROR 1698 (28000) 错误：Access denied for user 'root'@'localhost'" error【摘抄】
声明:全文均摘抄于MySQL ERROR 1698 (28000) 错误 //错误起源: ~$ mysql -u root -p Enter password: ERROR 1698 (28000): ...
- Python中crypto模块进行AES加密和解密
#coding: utf8 import sys from Crypto.Cipher import AES from binascii import b2a_hex, a2b_hex class p ...