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>