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

本文主要是介绍【九月打卡】第2天 Vue3框架，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

课程名称：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>

servlet的生命周期

init() 方法

init() 方法是在创建 Servlet 对象时被调用，而且只能被调用一次，用于 Servlet 对象在整个生命周期内的唯一一次初始化。只有在 init() 方法调用成功后，Servlet 才会处于服务状态，才能够去处理客户端的请求。

service() 方法

service() 方法是 Servlet 工作的核心方法。当客户端请求访问 Servlet 时，Servlet 容器就会调用 service() 方法去处理来自客户端的请求，并把处理后的响应返回给客户端。

destroy() 方法

destory() 方法是 Servlet 容器回收 Servlet 对象之前调用的，且只会调用一次，而此时的服务器处于停止状态或者访问资源已经被移除。

今天学习了Vue的生命周期函数,所谓的vue的生命周期就是vue的实列从创建到销毁的整个过程，每个过程都有不同的钩子函数，利用这些不同的钩子函数来做不同的事情从而提高开发效率,也可以理解成生命的开始到结束.今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!

这篇关于【九月打卡】第2天 Vue3框架的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript