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命令】磁盘分区，格式化，挂载命令，创建交换分区（fdisk，mkfs，mount，umount）
友情链接 磁盘分区,格式化,挂载,创建交换分区:https://www.cnblogs.com/HeiDi-BoKe/p/11936998.html RAID工作级别:https://www.cnbl ...
- ASP.NET Repeater与Button 以及viewState 和 hyperLink
例如Repeater重复项 我们要在一个表里作删除以及修改 我们可以在Repeater中添加button控件前台代码:button有属性commandName 以及commandArgument 我们 ...
- 【HNOI 2017】礼物
Problem Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手环,一个留给自己,一个送给她.每个手环上各有 \(n\) 个装饰物,并且每个装饰物 ...
- Selenium(十一)：设置元素等待、上传文件、下载文件
1. 设置元素等待 前面我们接触了几个元素等待方法,sleep.implicitly_wait方法,这一章我们就来整体学一下. 现在大多数Web应用程序使用的都是AJAX技术.当浏览器加载页面时,页面 ...
- 使用adb命令操控Android手机（adb命令）
1) 手机连接电脑之前 首先,查看安卓手机是否已经连接上电脑 adb devices 让adb一直查找安卓设备,找到后才停止 adb wait-for-device 2) 手机连接电脑后的操作 2.0 ...
- Servlet 使用介绍(1)
说明 本篇介绍java web中比较重要的一个技术:servlet.servlet是一种对用户请求动态响应的一个技术,是java web的核心一环.对于一般服务性质的纯后台服务应用而言,或许整个应用是 ...
- android studio节省C盘空间的配置方法
近期发现C盘空闲空间剩余不多了,经过检查发现在C:\Users\<电脑用户名>\的目录下,有这两个文件夹空间比较大,这两文件夹分别是 .AndroidStudioPreview3.2(不同 ...
- Spring Boot 2 + jpa + mysql例子
Spring Data框架为数据访问提供了一个通用的模型,无论访问哪种数据库,都可以使用同样的方式,主要有以下几个功能:(1)提供数据与对象映射的抽象层,同一个对象,可以被映射为不同数据库的数据:(2 ...
- Docker-核心笔记(含Dockerfile,Compose)
Docker-核心笔记(含Dockerfile,Compose) 2017/03 Chenxin 参考 https://yeasy.gitbooks.io/docker_practice Docker ...
- [Linux] 常见的并发模型
进程&线程(Apache) C10K问题异步非阻塞(Nginx,Libevent,NodeJS) 开发时复杂度高协程 (Golang Erlang lua) goroutine channel ...