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>
最新文章
- mysql_建立索引的优缺点 #转自Starzm#
- jQuery学习笔记(一)jQuery选择器
- [BZOJ1833][ZJOI2010]count 数字计数
- [译]关于.NET Core1.1的通告
- [TroubleShooting]&;#39;trn\bak&;#39; is incorrectly formed. SQL Server cannot process this media family.
- [Asp.Net Core轻量级Aop解决方案]AspectCore Project 介绍
- time模块整理
- [原创]Cadence Allegro16.6安装
- CentOS 7.5 安装 Python3.7
- 【转】计算机信息系统安全保护等级划分准则(GB 17859-1999)
- mysql建表基本语法
- IDEA抛出No bean named &#39;cacheManager&#39; available解决方法
- windows 10 超级优化,同时解决本地磁盘100%的问题
- swap的实现(没有中间变量)
- PAT A1014 Waiting in Line (30 分)——队列
- (转) JVM——Java类加载机制总结
- Bootstrap学习遇到的role属性--- 无障碍网页应用属性
- Linux系统设置运行级别
- Windows Server 2012 R2 或 2016 无法安装 .Net 3.5.1
- java.text.SimpleDateFormat使用介绍
热门文章
- 【转载】【PAT】PAT甲级题型分类整理
- Java入门总结
- Python 爬虫从入门到进阶之路(四)
- Python 从入门到进阶之路(六)
- aop分层模型——aop是元编程的一种
- Add an Editor to a Detail View 将编辑器添加到详细信息视图
- RDIFramework.NET敏捷开发框架WinForm新增文件中心-实现附件集中管理
- sqlserver查看表空间
- Attaching an entity of type &#39;xxx&#39; failed because another entity of the same type already has the same primary key value.
- Linux-3.14.12内存管理笔记【建立内核页表(2)】-低端内存的建立