首页手记【九月打卡】第2天 Vue3框架

【九月打卡】第2天 Vue3框架

标签：

Vue.js

课程名称：2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节：第2章 Vue 基础语法

主讲老师：Dell

课程内容：

今天学习的内容包括：

应用和组件的基础概念
Vue 中的生命周期函数
生命周期函数的深度分析
编程练习

课程收获：

1、如何创建一个VUE实例？

Vue.createApp({ }), 调用createApp方法创建一个vue应用

2、创建vue应用的时候有哪些参数

数据

模板

传入的这两个参数表示，这个应用最外层的组件该如何展示

3、mount()方法的含义？

app.mount("#app")调用mount方法，将创建好的vue应用挂载到属性值为app的元素下; 返回值就是vue应用的根组件

4、什么是vue面向数据的设计模式？

定义一个数据，定义一个模板，vue自动把数据和模板关联起来，实现我们想要展示的页面效果

5、什么是mvvm设计模式

m model 数据层

v view 视图层

vm 视图连接层

6、如何获取根组件上的数据

data方法前面加一个$实现

生命周期函数：在某一时候会自动执行的函数

beforeCreate：在实例生成之前会自动执行的函数

created：在实例生成之后会自动执行的函数

beforeMount：在模板已经被编程函数之后/组件内容被渲染到页面之前立即执行的函数

mounted：在组件内容被渲染到页面之后自动执行的函数

====================================================================

mounted 自动执行

methods 需要触发执行

编程练习
<!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>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 创建一个Vue的应用实例,存储到app这个变量当中
const app = Vue.createApp({
data() {
return {
message: "hello",
}
},
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeUpdate() {
console.log(document.getElementById('root').innerHTML,"beforeUpdate");
},
updated() {
console.log(document.getElementById('root').innerHTML,"updated");
},
beforeUnmount() {
console.log(document.getElementById('root').innerHTML,"beforeUnmount");
},
unmounted() {
console.log(document.getElementById('root').innerHTML,"unmounted");
},
template: `
<div>{{message}}</div>
`
});
//mount是挂载节点,意思是我的这个Vue的应用只作用于id为root的这个元素上面去
//vm代表的就是Vue的根组件,这个根组件充当了vm层的角色,会自动把视图和模板做好关联
const vm = app.mount('#root');

// Vue是面向数据编程,参考mvvm的设计模式,m -> model 数据,v -> view 视图, vm -> viewModel 视图连接层,
</script>
</html>