<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js/vue.js"></script> </head> <body> <h1>the first my vue project </h1> <div id="app"> {{message}} </div> <div id="app-2"> <span v-bind:title="message"> 动态绑定数据 </span> </div> <div id="app-3"> {{a}} </div> <script> //声明渲染 var app=new Vue({ el:'#app',//元素 data:{ message:"my first vue project" }//data保存数据，进行数据初始化赋值 }); //v-bind var app2=new Vue({ el:"#app-2", data:{ message:"页面加载中"+new Date().toLocaleString() } }); //数据与方法 var data={a:"the"}; var vm=new Vue({ el:"#app-3", data:data }); //$watch变量改变获取 vm.$watch('a',function(newVal,oldVal){ console.log(newVal,oldVal) }) vm.$data.a="test~" </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js/vue.js"></script> <script src="../vue.js/vue.min.js"></script> </head> <body> <!--模板语法--> <!--插值--> <!--数据绑定时使用文本插值--> <div id="the"> <span>Message:{{msg}}</span> <!--v-once值不变，为第一次赋值--> <span v-once>值不变：{{msg}}</span> <!--v-html输出真正的html代码--> <p>Using mustaches:{{rawHtml}}</p> <!--<p>Using v-html directive:<span v-html="rawHtml"><h1>1234</h1></span></p> 由v-html将rewHtml输出为真正的HTML代码在span中--> <p>Using v-html directive:<span v-html="rawHtml"></span></p> <a v-bind:href="url">v-bind绑定元素属性</a> <a :href="url">v-bind缩写</a> <p v-on:click="dosomething">v-on监听事件</p> <p @click="theclick">点击v-on缩写</p> </div> <div id="apend"> <p><label>姓：</label> <input type="text" v-model="user.first"> </p> <p> <label>名:</label> <input type="text" v-model="user.last"> </p> <p>欢迎您！{{user.first+user.last}}{{user.sex?"男":"女"}}</p> </div> <!--vue列表渲染--> <div id="appthe" style="margin: 20px; 600px;"> <table> <tr v-for="item in items" :key="item.id"> <td>{{item}}</td> </tr> </table> <!--加序号--> <table> <tr v-for="(item , index) in items" > <td>{{index}} . {{item}}</td> </tr> </table> <!--添加标题--> <table> <tr v-for="(item , name , index) in title" > <td>{{index}} . {{name}} . {{item}}</td> </tr> </table> </div> <script> //列表v-for渲染 var app=new Vue({ el:"#appthe", data:{ items:["一个","er","sav","si","wu"], title:{标题:"笔译",标题2:"biy",标题3:"nouo"} } }); var user = { first: "", last: "", sex: false } var name = new Vue({ el: "#apend", data: { user } }); var vm=new Vue({ el:"#the", data:{msg:"yiduo",rawHtml:"<h1>1234</h1>",url:"https://cn.vuejs.org/"}, methods:{ dosomething: function() { alert("弹弹") },theclick:function(){ alert("第二") } } }); vm.msg="div" </script> </body> </html>