vue3 基础-应用app和组件基本概念

这篇主要对 vue 最基础的应用程序 Application 和组件 Components 进行一个简要和直观的认知, 具体要分析的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>app和组件基本概念</title>
  <script src="./js/vue@3.2.23.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // createApp 表示创建一个 Vue 应用, 存储到 app变量中
  // 传入的参数表示, 该应用最外层的组件, 应该如何展示
  // mvvm 设计模式, m->model; v->view视图
  // mv: 数据和视图; vm: 视图和数据
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `<div>{{message}}</div>`
  })

  // vm 代表的就是 vue 应用的根组件
  const vm = app.mount('#root')
</script>
</html>

首先是这一段:

Vue 创建了一个名为 app 的应用 (存储在app这边变量), 并将这个 app 挂载到 ID 为 'root' 的 DOM 元素上进行管理.

const app = Vue.createApp({});
app.mount('#root')

然后传入的对象参数 data () 和 template 表示这个 app 应用最外层的组件应该怎样展示. 组件之前说过就是页面的一部分, 那这些组件的根组件其实就是 app.mount('#root').

// vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');

const app = Vue.createApp({
    data () {
        return {
            message: 'hello, ziyin'
        }
    },
    template: `<div>{{message}}</div>`
});
app.mount('#root')

因此从这里就可以感受到 vue 的操作是一种面向数据的编程. 我们定义了数据 message, 也定义了模板 template 后, vue 就会自动将数据和模板关联管理起来, 渲染成我们想要的页面效果. 我们也将这种设计方式成为 mvvm 的设计模式.

  • m: 代表了 model 即数据

  • v: 代表了 view 即可视图

  • vm: 代表了 viewModel 即视图和数据的连接层

上例 m, v 都是我们自己定义的, 但如何关联起来就是 vue 的 vm 组件连接层帮我们自动做的啦.

那如果通过根组件 vm 来获取其他组件或者数据呢, 以这里的 message 为例, 可以这样去获取:

vm.$data.message = 'world'

此时页面就会自动变成 "hello, world" 啦. 就数据和视图是响应式变化的, 即 vue 就是面向数据编程.

posted @ 2022-08-24 23:27  致于数据科学家的小陈  阅读(378)  评论(0)  编辑  收藏  举报