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基础系列目录 < ...
随机推荐
- vs 2019 自带 反编译 与 Reflector 反编译工具比较
都是一样的 但是要看自己写的 反编译代码 还是得去 Reflector
- Java方法之参数传递机制
目录 Java方法之参数传递机制 基本数据类型 引用数据类型 综合练习 总结 Java方法之参数传递机制 Java方法中如果声明了形参,在调用方法时就必须给这些形参指定参数值,实际传进去的这个值就叫做 ...
- Kafka基本知识整理
首先Kafka是一个分布式消息队列中间件,Apache顶级项目,https://kafka.apache.org/ 高性能.持久化.多副本备份.横向扩展. 生产者Producer往队列里发送消息, ...
- Thinkphp <= 5.0.10 缓存getshell复现
目录 Thinkphp <= 5.0.10 缓存getshell复现 0x01 poc 0x02 跟踪源码 0x03 审计思路 0x04 补丁 0x05 参考 Thinkphp <= 5. ...
- 我来告诉你：VS2019开发ASP.NET Core 3.0 Web项目，修改视图后，刷新浏览器看不到修改后的效果怎么处理
VisualStudio2019下一个2.2另一个3.0页面修改如下,但是3.0刷新没有任何变化,难道VS以后不能做前端开发了?大家可能没有看官方文档 根据文章所说你需要: 1.安装 Microsof ...
- C#_.NetFramework_Web项目_EXCEL数据导出
[推荐阅读我的最新的Core版文章,是最全的介绍:C#_.NetCore_Web项目_EXCEL数据导出] 项目需引用NPOI的NuGet包: A-2:EXCEL数据导出--Web项目--C#代码导出 ...
- python文件夹遍历,文件操作,获取文件修改创建时间
在Python中,文件操作主要来自os模块,主要方法如下: os.listdir(dirname):列出dirname下的目录和文件os.getcwd():获得当前工作目录os.curdir:返回当前 ...
- 怎样使用element-starter快速搭建ElementUI项目
场景 为了能快速搭建起一个ElementUI项目,我们可以使用element-starter这个模板进行快速搭建. element-starter的Github https://github.com/ ...
- Kafka与RabbitMQ对比
Infi-chu: http://www.cnblogs.com/Infi-chu/ Kafka是LinkedIn在2012年发布的开源的消息发布订阅系统,他主要用于处理活跃的流式数据.大数据量的数据 ...
- ArcGIS api for JavaScript 3.27 按需显示需要的图层
实例:现有一图层服务,现需要动态显示该图层中的一部分内容:点击一个图例,只显示这个图例的内容,再点击别的图例,原来的内容不消失,再次点击已被点击的图例才会消失. 思路:setLayerDefiniti ...