【Vue-入门-1】

 1 <!DOCTYPE HTML>
 2 <html lang="zh">
 3 <head>
 4         <meta charset="utf-8" />
 5         <title>Vue</title>
 6         <script src="../../vue.js"></script>
 7 </head>
 8 <body>
 9             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
10             <div id="root" v-bind:title="title + new Date().getHours() + ':' + new Date().getMinutes()">
11             <!-- v-bind 简写模式   ps:(其实就是不写) -->
12             <!-- <div id="root" :title="title + new Date().getHours() + ':' + new Date().getMinutes()"> -->
13             <!-- 模板 -->
14             <!-- 插值表达式 -->
15             <h1>联系方式：{{msg}}</h1>
16             <!-- <h2>{{number}}</h2> -->
17             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
18             <!-- 直接输出 -->
19             <h2 v-text="content"></h2>
20             <!-- 转义输出 -->
21             <h2 v-html="content"></h2>
22             <div v-on:click="tankuang">{{msg}}</div>
23             <!-- 以下是 v-on: 的简写形式 -->
24             <!-- <div @click="tankuang">{{msg}}</div> -->
25             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
26             <!-- v-value 简写 与 v-model 区别 -->
27             <input :value="T1" />
28             <!-- 数据双向绑定 -->
29             <input v-model="T1" />
30             
31             <div>{{T1}}</div>
32             <!-- --------------------------------------Mr丶L----------------------------------------------- -->
33         </div>
34     
35     <script>
36         new Vue({
37             el:"#root",                                        //挂载点
38             //template:'<h1>Hello {{msg}}</h1>',            //实例
39             data:{                                            //数据
40                 msg:"18864645210",
41                 number:123,
42                 content:"<h1>hello</h1>",
43                 title:"当前时间:",
44                 T1: "kiss -kis kis"
45             },
46             methods:{
47                 tankuang:function(){
48                     alert(741741)
49                     this.msg="777777777"                    //重新定义data数据 注意! 所有用到此数据的元素都会发生变化
50                 }
51             }
52         })
53         
54     </script>
55 
56 </body>
57 </html>
猜你喜欢
