Vue中v-on的指令以及一些其他指令
1.v-on的基本使用
<div id="app">
<!-- 使用事件绑定的简写形式 -->
<input type="button" value="按钮" v-on:click="btn">
</div>
<script>
var vm = new Vue({
el: '#app',
//methods是用来专门存放vue的处理方法的
methods: {
btn: function () {
alert('123');
}
}
});
</script>
我们在的的时侯v-on是可以缩写成@的，例如上边的可以缩写成:@:chick="btn"。
在Vue中，其他的事件都可以用v-on绑定
2.事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
使用修饰符 阻止浏览器的默认行为
<div id="app">
<a href="http://www.qq.com" v-on:click.prevent="btn">腾讯</a>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
btn: function () {
alert('123');
}
}
});
</script>
使用修饰符绑定一次性事件
<div id="app">
<a href="http://www.qq.com" v-on:click.once="btn($event)">腾讯</a>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
btn: function (ev) {
ev.preventDefault();
alert('123');
}
}
});
</script>
$event是原始的DOM事件：有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
按键修饰符:绑定键盘抬起事件，但是只有enter 键能触发此事件
<div id="app">
<input type="text" v-on:keyup.enter="keyup">
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
keyup:function(){
console.log('111')
}
}
});
</script>
鼠标修饰符:鼠标左键触发事件
<div id="app">
<input type="button" value="按钮" v-on:click.left="btn">
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
btn:()=>{
console.log('111')
}
}
});
</script>
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
3.v-show的指令：
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="change">
<p v-show="is_show">秀儿，是你吗</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
is_show: false,
},
methods: {
change: function () {
this.is_show = !this.is_show;
}
}
}); </script>
4.v-if的指令：
<body>
<div id="app">
<input type="text" id="" v-model="type">
<div v-if="type === 'A'">我是A</div>
<div v-else-if="type === 'B'">我是B</div>
<div v-else-if="type === 'C'">我是C</div>
<div v-else-if="type === 'D'">我是D</div>
<div v-else>我什么也不是</div>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
type:''
}
}); </script>
5.v-for的指令：
<body>
<div id="app">
<!-- 数组 -->
<ul>
<!-- v-for 循环的语法规则可以参考 js 的 for in 循环 -->
<li v-for="(v,key) in arr">{{v}}---{{key}}</li>
</ul>
<!-- 对象 -->
<ul>
<li v-for="(v,k) in oop">{{v}}----{{k}}</li>
</ul> </div>
</body>
<script>
// for(cc in arr)
var app = new Vue({
el:'#app',
data:{
arr:['ff','hh','jj','gg','ll'], oop:{name:'张三',age:30,sex:'男'}
}
});
</script>
6.v-once:的指令：
<body>
<div id="app">
<!-- 只渲染一次数据 不再是数据单项绑定 这是单次绑定 -->
<p v-once>{{msg}}</p>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'123'
}
}); </script>
Vue中v-on的指令以及一些其他指令的更多相关文章
- vue中常见的指令
1,差值表达式{{}} <p >{{ msg }}</p> 2.v-cloak解决差值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> ...
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue中的指令v-model
Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀:都有着对应的官网介绍:https://cn.vuejs.org/v2/guide/forms.html v-model:数 ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- Vue中的指令（听博主说总结的很好）
指令[重点] 作用:简化Dom操作 参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 特点: 1.都是以v-开头 2.除了插值表达式,其它都写在标签 ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
- Vue中插槽指令
08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
随机推荐
- 查看Linux服务器CPU总核数
下面介绍查看Linux服务器CPU总核数的方法. 通过/proc/cpuinfo可查看CPU个数及总核数. [root@kevin ~]# grep processor /proc/cpuinfo | ...
- 100本Python机器学习、深度学习电子书，免费送！
此套电子书收集于网络,如有侵权请联系删除!!! 此套电子书仅用于个人学习,请勿用于商业获利,造成后果自负!!! 这套电子书包括:机器学习.深度学习.数据科学入门.神经网络等 获取资源地址:链接: ht ...
- windows平台多网卡设置路由
添加路由命令: route add 192.168.4.0 mask 255.255.255.0 192.168.4.1 metric 20 if 11 -p 其中192.168.4.0 是网络目标, ...
- ASP.NET MVC IOC依赖注入之Autofac系列（二）- WebForm当中应用
上一章主要介绍了Autofac在MVC当中的具体应用,本章将继续简单的介绍下Autofac在普通的WebForm当中的使用. PS:目前本人还不知道WebForm页面的构造函数要如何注入,以下在Web ...
- 50行Python代码实现视频中物体颜色识别和跟踪
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 机器学习与统计学 PS:如有需要Python学习资料的小伙伴可以加 ...
- Can not find the tag library descriptor for “http://java.sun.com/jstl/core"
此文原博文地址:https://blog.csdn.net/kolamemo/article/details/51407467 按照查到的资料,JSTL taglib需要jstl.jar来支持.在1. ...
- jQuery从零开始(二)
1.css类的操作 -----addClass() 向被选元素添加一个或者多个类 -----removeClass() 删除被选元素的类 -----toggleClass() 取反 -----css( ...
- ListenAndServe源码剖析
使用goland追踪阅读ListenAndServe源码,剖析服务器启动流程 ListenAndServe阅读 func ListenAndServe(addr string, handler Han ...
- 11.JavaCC官方入门指南-例6
例6:计算器--添加括号.一元运算符和历史记录 1.calculator3.jj 我们只需要再添加一些特色,就可以得到一个可用的四则运算计算器.在这一版的修改中 ,我们将使得程序可以接收括号.负值 ...
- Linux-3.14.12内存管理笔记【构建内存管理框架（5）】
前面已经分析了内存管理框架的构建实现过程,有部分内容未完全呈现出来,这里主要做个补充. 如下图,这是前面已经看到过的linux物理内存管理框架的层次关系. 现着重分析一下各个管理结构体的成员功能作用. ...