第一段代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>
插值表达式闪烁解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <p v-cloak>{{message}}</p> </div> <script type="text/javascript" src="vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>
使用vue实现简单的钟表功能（练习）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #id1{ color: red; } #id2{ color: blue; } </style> </head> <body> <script src="vue.js"></script> <script> var i = new Vue({ data: { a : 1 }, created: function(){ console.log('a:' + this.a) } }) </script> <div id="div1"> <p v-bind:id="color">111</p> <p id="id2">222</p> </div> <div id="time1"> <p>{{time}}</p> </div> <script> var time = new Vue({ el: '#time1', data:{ time: new Date().toTimeString() } }) // while(true){ // var cd = new Date().toTimeString(); // time.time = cd; // }//这种做法不可取，因为刷新次数太过急了，new的Date对象数量过多。 var timerID = setInterval( updateTime, 1000); function updateTime(){ var cd = new Date().toTimeString(); time.time = cd; } </script> <script> var app2 = new Vue({ el: '#div1', data: { color: black } }) </script> </body> </html>