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.** 的方式既可调用该实例下的 **变量以及方法** 。