web前端的学习日志（3）

最新推荐文章于 2022-10-20 15:18:38 发布

a18291880905

最新推荐文章于 2022-10-20 15:18:38 发布

阅读量479

点赞数

本文链接：https://blog.csdn.net/a18291880905/article/details/87994936

版权

Vue.js的学习过程

第三天的学习

1、传统的MVP设计模式和MVVP设计模式的区别

MVP
在这里插入图片描述
model：数据层 presenter：呈现层（业务逻辑相关的控制层） view：视图层
MVP中P层是最核心的层，大量代码都在P层，都在做dom的操作（如jquery）。

MVVP
在这里插入图片描述
MVVM由Model层，View层，ViewModel层构成，没有Presenter层，编码时不需要关注VM层，因为VM层是vue内置的，只需关注V层和M层就足够了。

MVP模式下是面向dom进行开发，
MVVM模式下是面向数据进行开发，代码量可以得到显著的减少。

2、Vue实例生命周期函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue实例生命周期函数</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		
	</div>

	<script>
	// 生命周期函数就是vue实例在某一个时间点会自动执行的函数
	var vm = new Vue({
		el: "#app",
		template: "<div>{{test}}</div>",
		data: {
			test: "hello world"
		},
		beforeCreate () {
			console.log("beforeCreate");
		},
		Created () {
			console.log("Created");
		},
		beforeMount () {
			console.log(this.$el);
			console.log("beforeMount");
		},
		mounted () {
			console.log(this.$el);
			console.log("mounted");
		},
		beforeDestroy () {
			console.log("beforeDestroy");
		},
		destroyed () {
			console.log("destroyed");
		},
		beforeUpdate () {
			console.log("beforeUpdate");
		},
		updated () {
			console.log("updated");
		}
	})
	</script>
</body>
</html>

3、计算属性的setter和getter

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性的setter和getter</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
	</div>
	<script>
	var vm = new Vue({
		el: "#app",
		data: {
			firstName: "Leo",
			lastName: "Chan"
		},
		computed: {
			fullName: {
				get () {
					return this.firstName + " " + this.lastName
				},
				set (value) {
					var arr = value.split(" ");      //splite(' ')将字符串按某个字符或者其他分割，返回数组
					this.firstName = arr[0];
					this.lastName = arr[1];
				}
			}
		}
	})
	</script>
</body>
</html>