Vue.js Hello world
一個 Vue.js Hello world 範例
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>
執行結果為
也等於以下寫法
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var vm = new Vue({ data: { message: 'Hello Vue!' } }).$mount('#app'); </script> </body> </html>
說明：
1、一個 Vue() 物件會帶有一個物件參數，當宣告帶有物件參數的 Vue() 物件，
就已經可以對 html 結構做變動了。
2、el 屬性的指定，表示要對哪個 DOM 做處理。
3、data 屬性的指定，表示在 Html 結構裡的 Vue.js 語法中「{{}}」可用於呈現的資料。
4、當對 Vue instance 裡的 data 操作時，可使用
vm.message = "Hi";
或
vm.$data.message = "Hi";
參考資料：