第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

Z时代
2024-01-10
分类：综合

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提供的属性绑定机制 它的缩写是 :
-->