Vue2, Vue3 開發單一html頁面區別
阿新 • • 發佈：2020-12-10
Vue2 使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue 開發單一頁面</title> </head> <body> <div id="wrapper" style="display: block;"> <div>{{ message }}</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var mainDiv = new Vue({ el: '#wrapper', data() { return { message: 'You loaded this page on ' + new Date().toLocaleString() } }, created() { console.log(this) }, mounted() { document.getElementById('wrapper').style.display = 'block'; } }) </script> </body> </html>
Vue3 使用方法
vue3支援script單獨引入js的形式書寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue 開發單一頁面</title> </head> <body> <div id="wrapper"> <div>{{ message }}</div> </div> <script src="https://unpkg.com/vue@next"></script> <script src="./js/index.js"></script> </body> </html>
index.js
var mainDiv = Vue.createApp({
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
},
created() {
console.log(this)
}
})
mainDiv.mount("#wrapper")