vue基础一：认识vue、数据绑定（v-bind\v-model）、Object.defineproperty()数据代理

冷凝娇

已于 2023-03-17 14:39:03 修改

阅读量601

点赞数

分类专栏： # vue 文章标签： pycharm ide python

于 2021-11-17 16:05:35 首次发布

本文链接：https://blog.csdn.net/ak739105231/article/details/121379664

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vue基础一：认识vue、数据绑定（v-bind\v-model）、数据代理

一、js及vue开发基本了解

 0.node.js的安装为初始条件，再安装Vue的devtools(进行百度)；
 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
 2.容器里面的代码依然要符合html规范，只不过要混入一些Vue特殊语法；
 3.容器里面的代码被称为【Vue模板】；
 4.容器和vue对象是一一对应关系，即：1.不可能出现多个对象指定一个容器，2.一个对象指定多个容器；
 5.真实的开发中只有一个Vue实例，并且会配合着组件一起使用；
 6.{{xxx}}中xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
 7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

二、初识Vue：MVVM模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>MVVM模型</title>
		<script src="../status/js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>名称：{{name}}</h1>
			<h1>地址：{{address}}</h1>
			<h1>{{$children}}</h1>
		</div>
	</body>
	<script type="text/javascript">
	//MVVM：第一个M表示：data数据
	//		第一个V表示：View:视图，即：DOM-->页面		
	//      最后，VM指的就是Vue实例，作用是连接数据data与页面DOM，经常利用vm作为Vue实例对象的代名词，因为：Vue实例对象就是MVVM中的VM；
	// vm中的属性都可以在dom中使用{{}}直接使用：如：<h1>{{$children}}</h1>
		const vm = new Vue({
			data:function(){
				return {
					'name':'环球中心',
					'address':'成都环球中心'
				}
			}
		})
		vm.$mount('#app');
		console.log(vm);
	</script>
</html>

三、模板语法

Vue模板语法有2大类：
	1.插值语法：
		功能：用于解析标签体内容
	2.指令语法：
		功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）。
		举例：v-bind:href="xxx" 或者 简写为  :href = "xxx",xxx同样要写js表达式。且可以直接读取到data中的所有属性。
		备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举例；

		<div id="root" :key="name">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<!-- 指令语法，指定attrs,两种写法： -->
			<a :href="school.url">{{school.name}}一下</a>
			<a v-bind:href="url" :v = "hello">{{name}}一下</a>	
		</div>

四、数据绑定：单向、双向

Vue中有2种数据绑定的方式：
1.单向绑定（v-bind）:数据只能从data流向页面
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

<div id="app">
			单向数据绑定：<input type="text" name="" id="" v-bind:value="name" /><br />
			双向数据绑定：<input type="text" name="" id="" v-model:value="name" />
			<!-- v-model:value 可以简写为v-model，因为v-model默认收集的就是value值 -->
			简写：双向数据绑定：<input type="text" name="" id="" v-model="name" />
		</div>
		<!-- 如下一句代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
		<h2 v-model:xx="name">大家好</h2>

五、el与data的两种写法

data与el的两种写法：
1.el的两种写法：
	（1）new Vue时配置el属性
	（2）先创建Vue实例，随后再通过vm.$mount("#root")指定el的值
2.data有两种写法：
	（1）对象式
	（2）函数式，可以简写省略:function
	如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
3.一个重要的原则：
	由Vue管理的函数，一定不用写箭头函数，一旦写了箭头函数，this就不再是Vue实例了；

<script type="text/javascript">
	// el元素的第一种写法：
		new Vue({
			el:'#app',
			data:{}
		})
	// el元素的第二种写法：
	const v = new Vue({
		data:{}
	})
	v.$mount('#app')
	// 第二种要灵活一点，下面举例：等待1s钟，才关联元素显示对象数据
	const v = new Vue({
		data:{}
	})
	setTimeout(()=>{
			v.$mount('#app')
	},1000)
	</script>

<script type="text/javascript">
	// data的第一种写法：对象式
		new Vue({
			el:'#app',
			data:{}//data需要对象，就执行在后面写一个对象
		})
	// data的第二种写法：函数式，写组件时必须使用第二种
	const v = new Vue({
		//细节：Vue实例帮忙调用这个function,返回对象
		data:function() {//data需要对象，就写一个函数返回一个对象
			console.log(this)//这里的this就是Vue实例对象
			return{
				name:{}
			}
		}
	})
	v.$mount('#app')
	//第二种方式的简写，（一般在对象中写function都可以简写）
	const v = new Vue({
		//细节：Vue实例帮忙调用这个function,返回对象
		data() {//data需要对象，就写一个函数返回一个对象
			console.log(this)//这里的this就是Vue实例对象
			return{
				name:{}
			}
		}
	})
	v.$mount('#app')
	</script>

六、Vue数据代理原理：Object.defineproperty()

6.1 Object.defineproperty()的使用：

Object.defineProperty(person,'age',{
			value:18
		})

6.2 Object.defineproperty()基本配置项：

let num = 18
let person = {
	name:'张三',
	sex:'男'
}
Object.defineProperty(person,'age1',{
			value:18,
			enumerable:true,//控制属性是否可以枚举，默认false
			writable:true,//控制属性是否可以被修改,默认false
			configurable:true,//控制属性是否可以被删除，默认false
			//上面4项是普通的配置项，下面是高级配置项
			
		})

6.3 Object.defineproperty()高级配置项（重要）：get、set

let num = 18
let person = {
	name:'张三',
	sex:'男'
}
Object.defineProperty(person,'age1',{
			// value:18,
			// enumerable:true,//控制属性是否可以枚举，默认false
			// writable:true,//控制属性是否可以被修改,默认false
			// configurable:true,//控制属性是否可以被删除，默认false
			//上面4项是普通的配置项，下面是高级配置项:当有人读取关联对象person的age1属性时，get函数（getter）就会被调用，且返回值是age1的值；
			get:function(){
				return num
			},
			//当有人修改关联对象person的age1属性时，set函数（setter）就会被调用，且会收到是age1的被修改的具体值 即：value；
			set:function(value){
				num = value
			}
		})

6.4 数据代理-定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象 代理对另一个对象中的数据的操作（读/写） -->
		<script type="text/javascript">
			let obj = {x:100}
			let obj22 = {y:300}
			Object.defineProperty(obj22,'x',{
				//有人获取obj22的x属性的数据，返回obj.x
				get:function(){
					return obj.x
				},
				//有人修改obj22的x属性的数据，使得obj.x跟随所修改的值value变化，从而带动obj22也变化（get获取就是即时获取）
				set:function(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

6.5 Vue实现数据代理：了解vue实例中的属性

在这里插入图片描述

冷凝娇

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础一：认识vue、数据绑定（v-bind\v-model）、Object.defineproperty()数据代理

vue基础一：认识vue、数据绑定（v-bind\v-model）、数据代理一、js及vue开发基本了解二、初识Vue：MVVM模式三、模板语法四、数据绑定：单向、双向五、el与data的两种写法六、Vue数据代理原理：Object.defineproperty()6.1 Object.defineproperty()的使用：6.2 Object.defineproperty()基本配置项：6.3 Object.defineproperty()高级配置项（重要）：get、set6.4 数据代理-定义6.5
复制链接

扫一扫