Vue2复习1 模板语法 插值 指令 数据绑定 数据劫持 Object.defineProperty

最新推荐文章于 2024-02-03 13:34:08 发布
最新推荐文章于 2024-02-03 13:34:08 发布
阅读量133 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40746230/article/details/125347413
版权

Vue特点：

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

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

使用虚拟DOM DIFF算法尽可能去复用DOM 节点  

DIFF算法 新的虚拟DOM 跟旧的虚拟DOM比较 原来的复用新的添加

搭建VUE开发环境

<!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>vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

		<!-- 准备好一个容器 -->
    <div id="root">
          <h1>HELLO,{{name}}</h1>
          <h1>我的年龄:{{age}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip=false //设置为 false 以阻止 vue 在启动时生成生产提示。

        //创建Vue实列
       const x= new Vue({
        el:'#root',  //el用于指定Vue市里为哪个容器服务,值为cSS选择器字符串.
        data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。组件会写成一个函数
            name:'zt',
            age:27

        }

       })

    </script>
    
</body>
</html>

Vue实列与容器只能一一对应 可以存在多个
            初识Vue：
                1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
                2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
                3.root容器里的代码被称为【Vue模板】；
                4.Vue实例和容器是一一对应的；
                5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
                6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
                7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

                注意区分：js表达式 和 js代码(语句)
                        1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                                    (1). a
                                    (2). a+b
                                    (3). demo(1)
                                    (4). x === y ? 'a' : 'b'

                        2.js代码(语句)
                                    (1). if(){}
                                    (2). for(){}
 

2模板语法 ：插值语法 指令语法

Vue模板语法有2大类：
    1.插值语法：
      功能：用于解析标签体内容。
      写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
      2.指令语法：
      功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
      举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
     且可以直接读取到data中的所有属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'zt',
				school:{
					name:'zt',
					url:'http://www.baidu.com',
				}
			}
		})
	</script>
</html>

 

3.数据绑定   v-model         

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

  1.单向绑定(v-bind)：数据只能从data流向页面。

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

   备注：

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/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只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>
</html>

 4.el与data的两种写法

  data与el的2种写法

  1.el有2种写法

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

   (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

   2.data有2种写法

    (1).对象式 

     data:{}   

     (2).函数式

data(){
 return{ }
       }

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

  3.一个重要的原则：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

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

		//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'zt'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			/* data:{
				name:''
			} */

			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:''
				}
			}
		})
	</script>
</html>

5：理解MVVM

            MVVM模型

            1. M：模型(Model) ：data中的数据

            2. V：视图(View) ：模板代码

            3. VM：视图模型(ViewModel)：Vue实例

            观察发现：

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

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

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			<h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1>
		</div>
	</body>

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

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

 6：Object.defineProperty

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顾Object.defineproperty方法</title>
	</head>
	<body>
		<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}
            //defineProperty age 不可枚举  不能遍历  需要设置 
            //Object.defineProperty  对person中age进行高级限制
			Object.defineProperty(person,'age',{
			// value:18,
			// enumerable:true, //控制属性是否可以枚举，默认值是false
			// writable:true, //控制属性是否可以被修改，默认值是false
			// configurable:true //控制属性是否可以被删除，默认值是false
			//当有人读取person的age属性时，get函数(getter)就会被调用，

             //且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

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

			})

			// console.log(Object.keys(person))

			console.log(person)
		</script>
	</body>
</html>
数据代理

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

Vue数据代理应用

 1.Vue中的数据代理：

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

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

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

  3.基本原理：

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中的数据代理：
							通过vm对象来代理data对象中属性的操作（读/写）
				2.Vue中数据代理的好处：
							更加方便的操作data中的数据
				3.基本原理：
							通过Object.defineProperty()把data对象中所有属性添加到vm上。
							为每一个添加到vm上的属性，都指定一个getter/setter。
							在getter/setter内部去操作（读/写）data中对应的属性。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'zt',
				address:'科技园'
			}
		})
	</script>
</html>

vue.js动态数据绑定学习笔记
12-11
Compile 是Vue的模板编译器，它负责解析模板中的指令（如`{{}}`插值表达式），找到需要绑定的数据，并为每个绑定创建 Watcher 实例。Compile 完成解析后，会在 DOM 中添加必要的事件监听器和更新逻辑，以便在数据...
Vue学习笔记（8）
jc15274630894的博客
03-08 482
Vue学习笔记（8）
看完还不懂,我就吃x系列，Vue全家桶
oschina_41559824的博客
07-19 595
目录 第一章、Vue基础 1.1. Vue 简介 1.1.1. 官网 1.1.2. 介绍与描述 1.1.3. Vue 的特点 1.1.4. 与其它 JS 框架的关联 1.1.5. Vue 周边库 1.2. 初识 Vue 1.3. 模板语法 1.4. 数据绑定 1.5. MVVM 模型 1.5.1.el与data的两种写法 1.5.2.Vue中的MVVM 1.5.3.回顾Object.defineProperty方法 ​ 1.5.4.何为数据代理 1.5.5.Vue中的数据.
Vue学习笔记|UI组件库
笔记|思路|总结
01-02 88
UI组件库
vue3基本使用笔记（汇集精华版）
weixin_66721210的博客
03-16 558
vue3基本使用笔记（汇集精华版）
前端学习 笔记（含示例代码）代码整合分享 第四期
最新发布
2403_82766622的博客
02-03 703
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。HTML元素一般分为块元素和行内元素两种类型。元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签行内元素一行只能放一个行内元素不可以直接设置宽度高度它本身内容的宽度容器文本或则其他行内元素行内块元素。
模拟VUE2.0的模板渲染+双向数据绑定
05-23
1. 数据观察者：Vue通过`Object.defineProperty`对数据进行劫持，监听数据的变化。当数据被访问或修改时，会触发setter，从而更新视图。在迷你Vue中，我们需要创建一个Observer类，用于监听并响应数据变化。 2. ...
vue.js 实现v-model与{{}}指令方法
10-17
总的来说，Vue.js 的 `v-model` 和 `{{}}` 指令是其响应式系统的重要组成部分，它们通过数据劫持、依赖收集和发布订阅模式实现了数据和视图的双向绑定。理解和实现这些机制有助于我们更好地掌握Vue的原理，从而在...
Vue实现双向绑定的方法
08-31
1. **Observer**：这是一个数据监听器，它利用JavaScript的`Object.defineProperty()`方法，为数据对象的每个属性设置getter和setter。当数据属性被访问或修改时，getter和setter会被触发，这样就可以在数据变化时...
【VUE 笔记】基础内容
JT61100的博客
04-14 379
文章目录01 初识 Vue1.1 简介1.1.1 官网1.1.2 介绍与描述1.1.3 Vue 的特点1.1.4 与其他 JS 框架的关联1.1.5 Vue周边库1.2 初识 Vue1.2.1 前置工作1.1.2 初始Vue02 Vue 模板语法2.1 插值语法2.2 指令语法03 Vue 数据绑定3.1 Vue 中有2种数据绑定的方式3.2 备注04 el 与 data 的两种写法4.1 el 有两种写法4.2 data 有两种写法4.3 注意05 MVVM 模型
vue使用心得笔记--自己总结使用
giveMe_Five的博客
12-31 1270
写在前面 vue的写法和逻辑和微信小程序的使用很相似,自己写项目过程中一些小点总结一下,方便查阅,如果对他人有些许帮助那就更好了 1.vue做if判断的时候 , 由于使用了v-for循环 做个别标签判断的时候 使用了 v-if="{{item.code}}==1" 报错了,检查发现,在v-if中不能用插值表达式 , 可以直接写 v-if="item.code==1" 然后成功实现...
20231018-黑马Vue学习笔记-第三天
qq_44887198的博客
10-20 166
20231018-黑马Vue学习笔记-第三天
vue.js学习笔记
weixin_60634477的博客
04-17 711
vue笔记
2021-10-24发布（25修改） Vue学习笔记
qq_43630839的博客
10-24 2440
Vue学习笔记 书写Vue基本模板 修改vue中data的值 页面变化 状态变化=> 视图变化 数据响应式 再也不会关心DOM的更新 只关心数据 - 1. 首先要在头部导入Vue的js文件 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> - 2. 在body里面写一个模板div，id为app，或者其它的名字 <body> <div id=
Vue学习笔记——麻麻再也不用担心我的Vue！
| 早上好 |
08-11 1066
基于B站蔡蔡小趴菜的教学视频做的学习笔记
Vue最全笔记
Tacit_zfy99的博客
08-14 1134
https://www.bilibili.com/video/BV1Zy4y1K7SH B站2021最新版vue教学，尚硅谷前端 讲的极好，这里把笔记copy一份，以便查阅。 一、vue基础 1 初识Vue： ​ 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； ​ 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； ​ 3.root容器里的代码被称为【Vue模板】； ​ 4.Vue实例和容器是一一.
学习vue项目部署笔记
m0_47659279的博客
10-23 2963
1.准备vue项目打开终端，输入vue create hello命令来创建一个名为hello的vue项目用于部署cd hello来对hello项目进行打包，打包后会生成一个dist文件夹2.下载nginx，版本选择最新的稳定版即可下载并解压后进入nginx文件夹下的conf文件夹，找到nginx.conf文件并打开将更改为：其中root后面的内容更改为项目打包后生成的dist文件夹的路径，需要根据自身实际情况做修改。
vue笔记日渐整理（每天更新）
chengyou_的博客
05-23 1617
vue 什么是vue 是前端的一个框架 是一个渐进式框架 基于mvvm的框架 渐进式：不强求一次性使用和接受他的所有功能。如果你想用其中的一个或者多个再引用相对应的功能就好了。 mvvm： m：数据对象。 v：前端展示页面。 vm：双向绑定数据。vue的实例。数据改变视图，自动刷新。 vue开发特点 开发模式： 声明式开发：程序告诉机器我要干什么，怎么我不管。 组件化开发 自定义开发 将标签成为组件 虚拟dom 命令式开发：应用程序 业务逻辑 开发将每一步实现步骤都需要代码实现。 vm 啥呀？答：
vue学习笔记--vue认识+安装
aspxgod10的专栏
03-01 421
目录 一.Vue定义 二.vue的特点 一.Vue定义 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 渐进式意味着： 1.简单页面可以引用一个轻巧的核心库，将Vue作为你应用的一 部分嵌入中。 2.复杂的应用可以引入vue的各种插件。 二.vue的特点 采用组件化模式，提高代码复用率，让代码更好维护； 声明式编码，无需直接操作DOM，提高开发效率； 使用虚拟DOM+优秀的D..
Vue模板响应式数据依赖收集与处理分析
1. 数据响应式原理：Vue.js使用了数据劫持结合发布订阅模式的方式实现了数据响应式。当Vue实例创建时，Vue会遍历data对象，使用Object.defineProperty()方法为每个属性添加getter和setter。这样，当属性被访问时可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值