Vue.js學習筆記（二）
阿新 • • 發佈：2018-07-03
head 改變 vue ntb con UNC 關註 tle element
Vue.js不支持IE8及以下的版本，因為vue使用了IE8無法模擬的ECMAScript5的特性，它支持所有兼容ECMAScript5的瀏覽器。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible"content="ie=edge"> 8 <title>Hello World</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app">{{content}}</div> 14 <script> 15 //原生js實現hello world 16 // var dom = document.getElementById("app");17 // dom.innerHTML = ‘Hello World!‘; 18 // setTimeout(function() { 19 // dom.innerHTML = ‘bye world‘ 20 // }, 2000); 21 22 //vue實現hello world 23 //使用vue之後不需要關註任何dom的操作，只需把精力集中到數據的管理之上， 24 //數據放的是什麽，頁面展示的就是什麽，數據改變了，頁面就會跟著改變 25 var app = new Vue({ 26el: ‘#app‘, //限制了一個vue實例處理的DOM範圍 27 data: { 28 content: ‘Hello World!‘ //data用於定義一些數據 29 } 30 }); 31 setTimeout(function() { 32 app.$data.content = ‘bye world‘ //兩秒之後content內容變成bye world 33 }, 2000) 34 </script> 35 </body> 36 37 </html>
Vue.js學習筆記（二）