vue1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue' } }); }; </script> </head> <body> <div id="box1"> <input type="text" v-model="msg"> <input type="text" v-model="msg"> <!-- js里面的没有动态改变,双向数据绑定 --> <br> {{msg}} </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'body', //选择器 data:{ msg:'welcome vue' } }); }; </script> </head> <body> <div> <input type="text" v-model="msg"> <input type="text" v-model="msg"> <br> {{msg}} </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ msg:'welcome vue', msg2:12, msg3:true, arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} } }); }; </script> </head> <body> <input type="text" v-model="msg"> <input type="text" v-model="msg"> <br> {{msg}} <br> {{msg2}} <br> {{msg3}} <br> {{arr}} //apple,banana,orange,pear <br> {{json}} //[object Object] </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} } }); }; </script> </head> <body> <div id="box"> <ul> <li v-for="value in arr"> 循环li {{value}} {{$index}} apple 0 banana 1 orange 2 pear 3 </li> </ul> <hr> <ul> <li v-for="value in json"> {{value}} {{$index}} {{$key}} apple 0 a banana 1 b orange 2 c </li> </ul> <hr> <ul> <li v-for="(k,v) in json"> {{k}} {{v}} {{$index}} {{$key}} a apple 0 a b banana 1 b c orange 2 c </li> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} }, methods:{ add:function(){ this.arr.push('tomato');//数据更新模版自动更新 }, show:function(){ alert(1); } } }); }; </script> </head> <body> <div id="box"> <input type="button" value="按钮1" v-on:click="show()"> <input type="button" value="按钮2" v-on:dblclick="add()"> <input type="button" value="按钮3" v-on:mouseover="add()"> <br> <ul> <li v-for="value in arr"> {{value}} </li> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'}, a:true }, methods:{ add:function(){ this.arr.push('tomato'); } } }); }; </script> </head> <body> <div id="box"> <div style="width:100px; height:100px; background: red" v-show="false"> </div> <input type="button" value="按钮" v-on:click="a=!a"> <div style="width:100px; height:100px; background: red" v-show="a"> </div> </div> </body> </html>
