第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
Posted songsongblue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 [v-cloak] 10 display: none; 11 12 </style> 13 14 </head> 15 16 <body> 17 <div id="app"> 18 <!-- 使用v-cloak能够解决插值表达式闪烁的问题 --> 19 <p v-cloak>msg</p> 20 <h4 v-text="msg"></h4> 21 <!-- 默认v-text是没有闪烁问题的 --> 22 <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个 占位符，不会把整个元素内容清空 --> 23 <div>msg2</div> 24 <div v-text="msg2"></div> 25 <div v-html="msg2"></div> 26 <!-- v-bind：是Vue中，提供用于绑定属性的指令 --> 27 <!-- <input type="button" value="按钮" v-bind:title="mytitle+‘123‘ "> --> 28 <!-- 注意：v-bind: 指令可以被简写为：要绑定的属性 --> 29 <!-- v-bind 中，可以写合法的js表达式 --> 30 31 <!-- Vue 中提供了v-on:事件绑定机制 --> 32 <!-- <input type="button" value="按钮" :title="mytitle+‘123‘ " v-on:click="alert(‘hello‘)"> --> 33 34 <input type="button" value="按钮" v-on:click="show"> 35 <!-- 鼠标覆盖事件 --> 36 <input type="button" value="按钮" v-on:mouseover="show"> 37 </div> 38 39 <script src="./lib/vue-2.6.10.js"></script> 40 41 <script> 42 var vm = new Vue( 43 el:‘#app‘, 44 data: 45 msg:‘123‘, 46 msg2:‘<h1>哈哈，我是h1</h1>‘, 47 mytitle:‘这是一个自己定义的title‘ 48 , 49 methods://这个 methods属性中定义了当前Vue实例所有可用的方法 50 show:function() 51 alert(‘Hello‘) 52 53 54 ) 55 </script> 56 </body> 57 </html>
<!--v-on: Vue提供的事件绑定机制 它的缩写是 @ 所以 v-on:click="alert(‘hello‘) 可以写成 @click="alert(‘hello‘)
v-bind: Vue提供的属性绑定机制 它的缩写是 :
-->
以上是关于第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件的主要内容，如果未能解决你的问题，请参考以下文章