Vue 中應用和組件的基礎概念 · vue筆記

[TOC] >[success] # Vue 中應用和組件的基礎概念本章節講解了， **mvvm 設計模式** ，以及如何 **修改外部根組件** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>組件的基礎概念</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // createApp 標識創建一個 Vue 應用，存儲到 app 常量中 // 傳入的參數表示，這個應用最外層的組件，應該如何表示 // mvvm 設計模式 m -> model 數據，v -> view 視圖，vm -> viewModel 視圖數據連接層 const app = Vue.createApp({ data(){ // model 層 return{ message: 'hello world' } }, template: '<div>{{message}}</div>' // view 層 }) // vm 代表的就是 vue 應用的根組件，可以在f12控制臺打印出來 const vm = app.mount('#root') // 如果在f12控制臺修改message數據也會發生變化，因為是雙向數據綁定 // vm.$data.message = '呵呵噠' </script> </html> ~~~ 用 **常量** 保存 **Vue實例** ，通過 **vm.** 的方式既可調用該實例下的 **變量以及方法** 。