1 <!DOCTYPE html>
2 <html >
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 >
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 <input type="button" value="按钮" :title="mytitle+'123' ">
31 </div>
32
33 <script src="./lib/vue-2.6.10.js"></script>
34
35 <script>
36 var vm = new Vue({
37 el:'#app',
38 data:{
39 msg:'123',
40 msg2:'<h1>哈哈，我是h1</h1>',
41 mytitle:'这是一个自己定义的title'
42 }
43 })
44 </script>
45 </body>
46 </html>