Vue中v-on的指令以及一些其他指令
2019-05-18 07:08:10来源:博客园 阅读 ()
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
把它传入方法:
按键修饰符:
<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>
你可能注意到这种事件监听的方式违背了关注点分离 (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>
原文链接:https://www.cnblogs.com/shineguang/p/10884324.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:JavaScript 语句
下一篇:手写call,apply方法实现
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash