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