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>