1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>v-cloak</title> 7 <script src="js/vue.js"></script> 8 <style> 9 [v-cloak]{ 10 display: none; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="app"> 16 <!--使用v-cloak 能够解决插值表达式闪烁的问题--> 17 <p>{{msg}}</p> 18 <!-- 默认 v-text 是没有闪烁的问题 --> 19 <h4 v-text="msg"></h4> 20 <!-- v-text 会覆盖元素中原本的内容,但是 插值表达式,只会替换自己的这个占位符 21 不会把,整个元素的内容清空 --> 22 <div>{{msg1}}</div> 23 <div v-html="msg1"></div> 24 <!-- v-bind :是vue 中,提供的用于绑定属性的指令 --> 25 <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" > --> 26 <!-- v-bind 指令可以被简写 :要绑定的属性 --> 27 <!-- v-bind 中 ,可以写合法的js 表达式 --> 28 <input type="button" value="按钮" :title="mytitle + '123'" > 29 <!-- vue 中提供了 v-on :事件绑定机制 --> 30 <input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show" > 31 </div> 32 <script> 33 var vm =new Vue({ 34 el:'#app', 35 data:{ 36 msg:'我是一只猫', 37 msg1:'<h1>白龙马,第二草席</h1>', 38 mytitle:'我是一只猫' 39 }, 40 methods:{ 41 show:function(){ 42 alert('我们的歌谣') 43 } 44 45 } 46 47 }) 48 /*1.如何定义一个基本的vue代码结构 49 2. 插值表达式 和 v-text 50 3. v-cloak 解决闪烁问题 51 4. v-html 52 5. v-bind vue提供属性的绑定机制 缩写是: : 53 6. v-on Vue提供的事件绑定机制 缩写是: @ 54 55 */ 56 </script> 57 </body> 58 </html>