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>