Python学习笔记：5.3.3 vue框架

最新推荐文章于 2024-07-26 06:51:32 发布

WinvenChang

最新推荐文章于 2024-07-26 06:51:32 发布

阅读量437

点赞数

分类专栏： Python全栈工程师学习笔记文章标签： vue js数据绑定

本文链接：https://blog.csdn.net/u014257214/article/details/104243109

版权

本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！

一、课程目标

vue.js简介
数据绑定原理

二、详情解读、

2.1.vue.js简介

vue.js是由一位名叫尤雨溪的中国程序员开发的js框架
通过该框架可以在前端实现数据与视图分离，从而提高前端开发效率
在设计模式上属于MVVM模式（Model-View-ViewModel）

1.vue.js官网：https://cn.vuejs.org/
2.vue.js是渐进式框架，可以应用于简单的项目，也可以应用于复杂的项目
3.文档齐全，而且有官方的中文教学视频：https://learning.dcloud.io/#/（vuejs教程可以先学到第11节，后面组件部分有时间再深入）

2.2.vue.js数据绑定原理

在javascript中，对象具有两个内部属性：
1.数据属性 - 数据的可读性
2.访问属性 - setter 与 getter事件
通过这两个属性就可以实现数据的双向绑定

2.2.1.js对象数据性

js的对象的每个属性内部有两个属性：
数据属性与访问器属性

1.数据属性：

属性	说明
Configurable	表示能否删除修改该属性，默认为true
Enumerable	是否允许遍历
Writable	允许写入
Value	值

通过Object.defineProperty(对象，属性名，{内部属性,值})可以重新修改数据属性
修改[[Configurable]]为false，禁止删除该属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">			
			myObj = {
    
				"name": "luxp",
				"age" : 28
			}
			
			// configurable 默认为true，因此可以删除该属性			
			delete myObj.name
			console.log(myObj)			
			 
			/* 
			 通过Object.defineProperty(对象，属性名，{内部属性,值})可以重新修改数据属性
			 修改[[Configurable]]为false，禁止删除该属性			 
			 */			
			Object.defineProperty(myObj, "name",{
    
				'configurable':false
			})
			
			// 由于configurable 被修改为false，所以无法delete
			delete myObj.name
			console.log(myObj)
			
			/* 
			禁止遍历
			默认情况下enumerable为true，遍历时，可以遍历到该属性
			 */			
			for (i in myObj){
    
			 	console.log(i)
			 }