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 <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>