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 ...
随机推荐
- diff目录或文件比较
转载 2014年12月16日 19:16:54 1937 [功能] 以行的方式比较文本文件的异同处 若要比较目录,则会比较相同文件名的文件[参数] -b 忽略空格数目 ...
- 五个免费UML建模工具
UML工具很多是商用的,价格不菲:而免费的UML建模工具,功能完善的很少.以下推荐的是五个免费的UML建模工具,相对而言还算功能比较不错. 免费UML建模工具推荐:JUDE – community 如 ...
- Prometheus+grafana搭建
一.简介 1.1 Prometheus Prometheus是一套开源的监控系统,它将所有信息都存储为时间序列数据:因此实现一种Profiling监控方式,实时分析系统运行的状态.执行时间.调用次数等 ...
- Spring_bean的实例化时机
前言:创建Java对象 public class User { private String name; private Integer age; public User() { System.out ...
- 使用htpasswd实现Nginx验证访问
Nginx是一个高性能的WEB服务器,越来越多的用户使用,如果您的某个站点不希望对外公开(比如PHPMyAdmin),可以使用htpasswd实现Nginx验证访问. 安装htpasswd htpas ...
- Premiere导入视频之后音频轨没有内容
我用手机录的视频,在导入premiere新建序列之后呢并没有声音啊,音频轨没有内容.去贴吧里面问啊什么的都不靠谱,热心回答的人也不多.想学到东西,在这个年代如果你不愿意掏钱的话就只能靠一个办法:搜索. ...
- Unity PC端发布失败解决办法
Unity的PC端有时候发布的时候报错.原因可能是你的游戏里面使用了NGUI的label,而且字体选择的是unity自带的字体.因为支持中文.在选择unity自带的字体时最好都选一样的字体.如果一个l ...
- IDEA中导入多个包自动合并为星号
IDEA中导入同一个包下的几个class会自动合并为星号,如下图.可以通过设置让其不自动合并为星号. 1.选择File→Settings→Editor→Code style→Java,再点击右边的Im ...
- vue自学入门-3（vue第一个例子）
1.安装后打开8080端口,http://localhost:8080/#/ 2.进入项目目录 2.默认路由 3.修改文件index.js 将Import HelloWorld一句修改为 import ...
- Hibernate or 的用法
转自baidu estrictions.or(Restrictions.like(),Restrictions.or(Restrictions.like,........))里面的or可以无限加的.还 ...