vue简介、初始Vue、模板语法、数据绑定、el和data的两种写法、理解MVVM、Object.defineProperty( )方法、理解数据代理、Vue中的数据代理——Vue

嘻嘻哈哈二郎神

已于 2023-03-08 21:43:53 修改

阅读量288

点赞数

分类专栏：李立超 Vue 前端文章标签： vue.js javascript 前端

于 2022-12-03 13:09:12 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128106707

版权

前端同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

李立超

21 篇文章 2 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

七、Object.defineProperty（）方法

八、理解数据代理

九、Vue中的数据代理

一、vue简介

1.vue是什么？

一套用于构建用户界面的渐进式JavaScript框架

渐进式是指 vue 可以自底向上逐层的应用

2.Vue的特点

a.组件化模式，提高代码复用率，且让代码更好维护

b.声明式编码，让编码人员无需直接操作DOM，提高开发效率

之前使用DOM是命令式编码，写一步动一下

c.使用虚拟DOM + 优秀的 Diff算法，尽量复用DOM节点

二、初识Vue

初识vue:

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3. root容器里的代码被称为【Vue模板】

先有容器，然后有 Vue实例，当Vue实例开始工作时，发现配置对象中的配置 el，就将对应的容器拿过来进行解析，扫描有没有Vue设置的语法,如{{name}}，于是用实例中对应的数据内容将其替换掉，然后生成一个全新的容器，再把解析完的容器重新放到页面上替换掉刚才的整个容器。

容器的两个作用：

(1). 为Vue 提供模板

（2). 把Vue 的工作成果让其知道放哪

4. Vue实例和容器是一一对应的；

5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6. {{xxx}}中的xxx要写 js 表达式，且xxx可以自动读取到data中的所有属性；

7. 一旦data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello, {{name}}</h1>
    </div>

    <script type="text/javascript">
        // 创建Vue实例
        new Vue({    //Vue 构造函数创建实例，需要传参，参数是一个配置对象
            el: '#root',  //el用于指定当前Vue实例为哪个容器服务，值通常为 css选择器字符串
                    // 还可以写DOm元素， document.querySelector('#root')
            data: {    //data中用于存储数据，数据供 el所指定的容器去使用
                name: '尚硅谷12',
            }
        })
    </script>

注意区分：js表达式和 js代码（语句）

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，如：

(1). a

(2). a + b

(3). demo(1) 函数调用，会有返回值（没有返回值默认为undefined）

(4). x === y ? 'a' : 'b'

2.js代码（语句）

(1). if ( ){ }

(2). for( ) { }

三、模板语法（插值语法、指令语法）

Vue模板语法有2大类：

1. 插值语法

功能：用于解析标签体内容

写法：{{xxx}}, xxx是js 表达式，且可以直接读取到data 中的所有属性

2. 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）

举例： v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js 表达式

且可以直接读取到data 中的所有属性

使用指令语法后会将属性值的内容当成表达式执行

备注： Vue中有很多的指令，且形式都是： v-????，此处我们只是拿v-bind举个例子

v-bind: 可以简写为：

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<!-- 准备一个容器 -->
	<div id="root">
		<h1>插值语法</h1>
		<h3>你好，{{name}}</h3>
		<hr>
		<!-- 插值语法往往用于标签体内容
		指令语法用于标签属性 -->
		<h1>指令语法</h1>
		<a v-bind:href="school.url">点我去{{school.name}}学习1</a>
		<a :href="school.url">点我去{{school.name}}学习2</a>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false;//阻止Vue 在启动时生成生产提示

		// 创建Vue实例
		new Vue({
			el:'#root',
			data:{//data中用于存储数据，数据供el所指定的容器所使用，值我们暂时先写成一个对象
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'https://www.baidu.com',
				}
				
			}
		})
	</script>
</body>

四、数据绑定（单向绑定、双向绑定）

Vue中有2种数据绑定的方式：

1. 单向绑定（v-bind): 数据只能从data 流向页面；

2. 双向绑定（v-model): 数据不仅能从data流向页面，还可以从页面流向data。

注意：v-model只能应用在表单类元素（输入类元素如input,单选框、多选框）上，他们都有value值

备注：

1.双向绑定一般都应用在表单元素上（如：input,select等）

2.v-model:value 可以简写为 v-model, 因为v-model 默认收集的就是value值

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<!-- 准备一个容器 -->
	<div id="root">
		<!-- 普通写法 -->
		<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br>
		双向数据绑定：<input type="text" v-model:value="name"><br> -->

		<!-- 简写-->
		单向数据绑定：<input type="text" :value="name"><br>
		双向数据绑定：<input type="text" v-model="name"><br>

		<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素如input,单选框、多选框）上 ，他们都有value值-->
		<!-- <h2 v-model:x="name">你好啊</h2> -->
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false;//阻止Vue 在启动时生成生产提示

		// 创建Vue实例
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',

			}
		})
	</script>
</body>

五、el与data的两种写法

1.el 有2种写法

(1). new Vue时候配置el 属性

(2). 先创建Vue实例并使用常量vm去接，随后再通过vm.$mount('#root')指定el 的值

这种写法更灵活，如可以使用定时器控制

        // 创建Vue实例
        const v = new Vue({
            data: {
                name: '尚硅谷'
            }
        })
        setTimeout(() => {
            v.$mount('#root')  //使用定时器让其过1 秒再渲染
        },1000)

2. data有2种写法

(1). 对象式

(2). 函数式，函数里面必须要返回一个对象，且不要使用箭头函数，该函数是由 Vue实例调用的

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错

3. 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<!-- 准备一个容器 -->
	<div id="root">
		<h1>你好，{{name}}</h1>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false;//阻止Vue 在启动时生成生产提示

		// 创建Vue实例
		// el的两种写法
	/* 	const v = new Vue({
			// el:'#root',//第一种写法
			data:{
				name:'尚硅谷',

			}
		})
		v.$mount('#root')//第二种写法 */
		
		// data的两种写法
		new Vue({
			el:"#root",
			// data的第一种写法：对象式
			// data:{
			// 	name:'尚硅谷',
			// }

			// data的第二种写法：函数式，注意不要将其写为箭头函数，因为箭头函数没有this
			data:function(){//可以写成data(){}形式，：function可省略
				console.log('@@@',this);//此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}
		})
	</script>
</body>

六、理解MVVM

MVVM （Model-view-viewmodel）是一种软件架构模式

1.M 模型（Model): 对应data中的数据

2.V 视图（View): 模板

3. VM 视图模型（ViewModel): Vue实例对象（相当于数据和页面的连接桥梁）

经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例

观察发现：

1.data中所有的属性，最后都出现在了vm 身上；

2. Vue实例vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<!-- 准备一个容器 -->
	<div id="root">
		<h1>学校名称：{{name}}</h1>
		<h1>学校地址：{{address}}</h1>
		<!-- <h1>测试一下1：{{1+1}}</h1>
		<h1>测试一下2：{{$options}}</h1> -->
	</div>

</body>
<script type="text/javascript">
	Vue.config.productionTip = false;//阻止Vue 在启动时生成生产提示

	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',
			address:'北京',
		}
	})
	console.log(vm);
</script>

七、Object.defineProperty（）方法

参数(三个参数)

1. 添加属性的对象

2. 添加的属性名

3. 属性的配置项

value：xxx 属性值

enumerable:true, 控制属性是否可以枚举，默认是false, 如当不可枚举时使用 Object.keys( )获取不到该属性名，同样 for in也获取不到

writable:true, 控制属性是否可以被修改，默认是false

configurable:true 控制属性是否可以被删除，默认是false

get( ){ return xxx}

当有人读取xxx对象的xxx属性时，get函数(getter)就会被调用，且返回值就是该属性的值

set(value){ }

当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值

Object.defineProperty（）方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象和 get读取/set修改

<script type="text/javascript">
	let number = 19
	let person = {
		name:'张三',
		sex:'男',	
	}
// 会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象和get读取/set修改
	Object.defineProperty(person,'age',{
		// value:18,
		// enumerable:true,//控制属性是否可以枚举，默认是false
		// writable:true,//控制属性是否可以被修改，默认是false
		// configurable:true//控制属性是否可以被删除，默认是false

		// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
		get:function(){//可以简写为get(){}
			console.log('有人读取age属性了');
			return number
		},


		// 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
		set(value){
			console.log('有人修改age了,且值是',value);
			number = value
		}
	})
	person.age =30 //修改age值

	// console.log(Object.keys(person));//遍历对象中属性值
	console.log(person);
</script>

八、理解数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<script type="text/javascript">
//obj2 代理 objd的属性x 的操作
	let obj = {x:100}
	let obj2 = {y:200}

	Object.defineProperty(obj2,'x',{
		get(){
			return obj.x
		},

		set(value){
			obj.x = value
		}
	})
</script>

九、Vue中的数据代理

1. Vue 中的数据代理：

通过vm 对象来代理data 对象中属性的操作（读写）

2. Vue中数据代理的好处：

更加方便的操作data 中的数据

3. 基本原理：

通过Object.defineProperty( ) 把data 对象中所有属性添加到vm上

为每一个添加到vm上的属性，都指定一个getter/setter

在getter/setter 内部去操作（读/写）data中对应的属性

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm =new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',
			address:'宏福科技园'
		}
	})
	// vm中的属性name和address，都是通过defineProperty加上去的，
	// 当有人访问 vm中的name时，getter开始工作，读的是data中的name
	// 当修改name时，setter开始工作
</script>

嘻嘻哈哈二郎神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简介、初始Vue、模板语法、数据绑定、el和data的两种写法、理解MVVM、Object.defineProperty( )方法、理解数据代理、Vue中的数据代理——Vue

vue简介、初始Vue、模板语法、数据绑定、el和data的两种写法、理解MVVM、Object.defineProperty( )方法、理解数据代理、Vue中的数据代理
复制链接

扫一扫

专栏目录