这篇主要对 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 就是面向数据编程.