投稿
  1. 首页
  2. html-js-css

Vue2学习文档

code • 2022-5-16 • html-js-css • 阅读 34

Vue2学习文档,第1张

文章目录 1. Vue简介P1 课程简介P2 Vue技术P3 官网指南P4 开发环境 2. 简单例子P5 Hello 案例P6 分析Hello 3. 数据绑定P7 模板语法P8 数据绑定P9 el和data两写法 4. 数据代理(JS知识补充)P10 MVVMP11 definePropertyP12 数据代理P13 Vue中的数据代理 5. 事件绑定P14 事件处理P15 修饰符P16 键盘事件P17 事件总结 6. 计算属性P18 姓名案例P19 计算属性P20 简写 7. 监视属性P21 天气案例P22 监视属性P23 深度监视P24 简写P25 对比(watch和computed) 8. 样式渲染P26 Class绑定P27 Style绑定P28 条件渲染 9. 列表渲染P29 基本列表P30 Key作用与原理P31 过滤P32 列表顺序 10. 监视原理(JS补充)P33 更新原理P34 Vue监听对象P35 Vue.set()方法P36 Vue监测数据改变的原理_数组P37 总结Vue监视数据 10a.表单例子P38 收集表单数据 11. 过滤器P39 过滤器用法

1. Vue简介 P1 课程简介

空

P2 Vue技术

虚拟dom通过diff算法比较差异实现渲染复用

P3 官网指南

学习-Cookbook

提供编程技巧（让代码更优雅）

资源列表-Awesome Vue

官方推荐认可的Vue第三方库（如能用来制作一个报表）

P4 开发环境

引入Vue.js后，可以在浏览器-console中输入Vue.config查看Vue API(全局配置 )

2. 简单例子 P5 Hello 案例

{{}}：Vue设计的插值语法（获取Vue实例-data里的值）

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

模板解析流程：

先有容器，然后有实例实例拿到对应id容器实例解析（看有没有设计的特殊语法）把解析完后的Dom树导出替换容器 P6 分析Hello

容器和实例是一一对应的

<div  id='root'></div>
new Vue({
	el:'#root',
	……
})
},

‘{{}}’里必须写js表达式

3. 数据绑定 P7 模板语法

插值语法：解析标签体内容

<div>{{xxx}}</div>

指令语法：解析标签属性（属性、内容、事件）V-XXX

<a v-bind :herf='xxx'>点击</a>
P8 数据绑定

v-modal只能应用在表单类元素（输入类元素）上

P9 el和data两写法 el

el:‘#root’ 和v.KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲root')效果相同（mount是vue实例原型构造器的方法）

data 对象式 
data:{
	name:'xxx'
}
函数式(以后用组件时必须用这种，对象式会报错) 
data:function(){
	return{
		name:'xxx'
	}
}
//简写成(不能写箭头函数，不然this指向windows)
data(){
    return{
        name:'xxx'
    }
}
4. 数据代理(JS知识补充) P10 MVVM

如图所示：

代码：Vue实例把Data和View进行连接

data里的数据最终出现在vm上，而模板{{}}或v-xxx可以从vm中获取属性值

<h1>{{$emit}}</h1>
//$emit是vm原型链上所有的属性
P11 defineProperty

为什么console.log()里面的属性不直接显示，原因：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iWiJHTsz-1652602773252)(Images/image-20210816165528539.png)]

给对象添加属性，具体语法如图：

第一个参数是对象名，第二个参数是属性名，然后是在defineProperty对属性的内置 *** 作方法中写表达式

第三个参数中get()：有人读取属性时，放回属性值；set()：有人修改属性时，用改方法设置修改值

P12 数据代理 P13 Vue中的数据代理

vm._data === data

data(){
	return {
		data:'xxx'
	}
}

但为什么vm._data===data呢？这个就不细讲了，只要知道是数据劫持即可

5. 事件绑定 P14 事件处理

''里的模板只能用vm

注：所有vm里的方法有不要写成箭头函数，不然this指向windos

如何保持事件原有参数（用关键词传参）

注：写在methods里的方法不会做数据代理，如果写在data中会多做一次数据代理

P15 修饰符 
<a href='xxx' @click.prevent='showinfo'/>

prevent会组织默认事件，如阻止a的跳转

不常用，具体细节看视频吧

P16 键盘事件

触发分为两种：@keyup和@keydown

有几个按键比较特殊，具体看视频

P17 事件总结

修饰符可以连写，先后同时生效

<a href='xxx'@click.prevent.stop='xxx'/>

@click='xxx' === @click='xxx($event)'

6. 计算属性 P18 姓名案例

每次data改变，都会引起vue的重新渲染

所以如果使用方法替代计算属性的话，每次渲染都会return最新值

P19 计算属性

computed有缓存机制，相对于methods来说更高效，这也是为什么要用计算属性的原因

get()只有当初始化和依赖数据发生改变时执行

computed不会像data和methods一样，直接绑定到vm上,所以{{fullName.get()}}会报错，Vue做了内部处理，{{fullName}}能默认调用get()

vm.fullname=xxx 则会调用fullname{}里的set()

P20 简写

只需要读取时可以使用简写

7. 监视属性 P21 天气案例

注：如果页面内容没变，vm数据变了，开发者工具不一定更新（实际上是变了）

P22 监视属性

watch语法如下：

key为被监控dataName，计算属性也能被监视，并提供一系列方法

也可以直接调用vm.$watch（），效果相同

P23 深度监视 监视多级结构的某个属性（完整写法.）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dtE6RBzD-1652602773254)(Images/image-20210817141421438.png)]

监视多级结构的所有属性(设置deep值)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rS5fImuP-1652602773254)(Images/image-20210817141514247.png)]

P24 简写

和methods相同,只有"单纯" *** 作时,才能简写(不可添加deep等配置)

两种写法如下(和methods相似)

构造 实例 P25 对比(watch和computed)

一般来说能用computed的就用计算,不能的再用watch(因为官方也推荐计算,代码量少呀)

然后计算属性因为只依靠return返回值,所以不能进行一些异步 *** 作(setTimeout),加了异步就return不到计算属性函数上

详细区别如下:

8. 样式渲染 P26 Class绑定

code


{{name}} 

{{name}}
{{name}} 
	{{name}} 
	

{{name}} 
	{{name}}

p:实际上这两节的内容并不实用，因为很多情况下的业务是条件渲染样式，这里实际上是各种动态指定样式变量

old

三种写法(字符串\数组\对象)

https://www.cnblogs.com/guangzhou11/p/11116378.html

实例博客

P27 Style绑定

code

 
	 
{{name}} 
	 
{{name}}
	……

p:个人感觉这样写不优雅

实战

  //指定对象变量
 //指定对象的属性变量
computed: {
  //根据当前菜单状态动态设置菜单高度
  meunHeight() {
    let meunHeight;
    switch (this.$store.state.nowMeun) {
      case "PathSelect":
        meunHeight = "340rpx";
        break;
      case "StartNav":
        meunHeight = "126rpx";
        break;
    }
    return meunHeight; 
  },
  //根据当前菜单高度   
  styleObject() {
    let obj;
    obj = {  //这里和上面的data-styleObj差不多，只不过用computed来动态设置对象的属性
      height: `calc(100vh - ${this.meunHeight} - var(--window-bottom))`,
      fontSize: "13px",
    };
    return obj;
  },
},

old

有两种(对象和数组)

注:{}要写样式对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Stmd0S01-1652602773255)(Images/image-20210817153938296.png)]

ps:class和style总结

P28 条件渲染

如图所示(v-show\v-if\v-else-if\template)

v-show控制的是dispaly，所以是高频率合适，这里写反了

9. 列表渲染 P29 基本列表

数组\对象

其他:字符串\指定次数(用的少)

P30 Key作用与原理

具体分析见视频

文字总结:

ps:如果没写key,Vue会自动帮我们使用:key=‘index’(所以只要不会破坏结构,就不用写key,减少代码量hh)

P31 过滤

Key: watch:{}中可以添加immediate:true属性使组件初始化时就调用一次监听

watch:{
	keyWorud:{
		immediate:true, //初始化调用
		handler(val){
			return xxx
		}
	}
}

这里时列表过滤的最优解-computed(通过输入框搜索展示列表内容)

具体还是看视频吧

P32 列表顺序

如图,强大的计算属性功能哈

10. 监视原理(JS补充) P33 更新原理

下图的修改会失效,原因是内存变量确实改了,但是vue没监听到吼

P34 Vue监听对象

这节是对对象的监视的分析，而不是基本类型

错误写法

自己尝试写一个监视，但是会报错，说栈溢出（陷入死循环了）

原因：上图如果有人读取name，则调用get()，但是get()中return 的是data.name，读取data.name有需要get(),所以会陷入嵌套死循环

模拟Vue底层写法 现在简单重现下vue底层方法实现（使用了一个构造函数）

构造函数就是通过defineproperty属性传入参数data，’拷贝‘data中所有属性，而且修改和读取时不会发生循环

所以上面的构造函数实例obs，console.log出来就是一个带有data所有属性的方法实例 准备一个vm对象 ，复制obs 但是data还没变,然后来个连等（这样_data、data和obs就一样了）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2egK0uLA-1652602773256)(Images/image-20210818151646108.png)]

然后再defineproperty.set(){xxx}中添加 *** 作就可以实现监听渲染了（不会像“错误写法”那样出现死循环）

PS:肯定又疑惑了，为什么构造的就不会像错误的那样出现死循环呢？

⭐️个人感觉是构造的get()读取和set()的内容不是同一个东西（地址）

这里的this指的是构造函数Obeserver(obj)地址;

而obj是指传入的对象地址

如上图是错误的，因为return 后面的内容会再次触发读取（主要就是看绿色是否是同一个对象属性）

Vue真实底层

我们没有做到的内容：修改更便捷（数据代理）、多层设置

1.2.

P35 Vue.set()方法

常见错误

直接赋值student.sex不可行，原因如图-没有相关方法

正文

<h2 v-if="student.sex">性别：{{student.sex}}</h2>
<h2 >姓名：{{student.name}}</h2>
	data:{
			student:{
				name:'tom', //没有sex属性
			}
	},			
    
   	methods: {
				addSex(){
					// Vue.set(this.student,'sex','男') //Vue.set和this.$set都可以
					this.$set(this.student,'sex','男')
				}
			}

官方文档

注意:对象不能是 Vue 实例，或者 Vue 实例的根数据对象-data。

补充

关于属性不存在报错问题

<h2 >性别：{{student.sex}}</h2> 
//这里不报错，因为如果属性为空的话是返回undefined，undefined在页面不显示

student:{
	name:'tom',
   	//sex:'男'
}
P36 Vue监测数据改变的原理_数组

直接修改数组不可行

如图数组里是没有set()和get()

直接改不可行

vue对常见的数组方法封装,实现数组监听

如下图,两个方法不相同

使用set()也可以-但是一般都直接用方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aXxFNrTX-1652602773257)(Images/image-20220113181824064.png)]

简写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hm2mspAM-1652602773258)(Images/image-20220113163442213.png)]

相关官方文档

P37 总结Vue监视数据

Vue监视数据的原理：

​ 1. vue会监视data中所有层次的数据。

​ 2. 如何监测对象中的数据？

​ 通过setter实现监视，且要在new Vue时就传入要监测的数据。

​ (1).对象中后追加的属性，Vue默认不做响应式处理

​ (2).如需给后添加的属性做响应式，请使用如下API：

​ Vue.set(target，propertyName/index，value) 或

​ vm.$set(target，propertyName/index，value)

​ 3. 如何监测数组中的数据？

​ 通过包裹数组更新元素的方法实现，本质就是做了两件事

​ (1).调用原生对应的方法对数组进行更新

​ (2).重新解析模板，进而更新页面

​ 4.在Vue修改数组中的某个元素一定要用如下方法：

​ 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

​ 2.Vue.set() 或 vm.$set()

​ 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

//dom
学生信息
 

 

 

 

 

 

 

 

姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好：

//data
student:{
	name:'tom',
	age:18,
	hobby:['抽烟','喝酒','烫头'],
	friends:[
		{name:'jerry',age:35},
		{name:'tony',age:36}
	]
}

//以下就是对于监视原理这章的总结
addSex(){
	// Vue.set(this.student,'sex','男')
	this.$set(this.student,'sex','男')
},
addFriend(){
	this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
	this.student.friends[0].name = '张三'
},
addHobby(){
	this.student.hobby.push('学习')
},
updateHobby(){
	// this.student.hobby.splice(0,1,'开车')
	// Vue.set(this.student.hobby,0,'开车')
	this.$set(this.student.hobby,0,'开车')
},
removeSmoke(){
	this.student.hobby = this.student.hobby.filter((h)=>{
		return h !== '抽烟'
	})
}
10a.表单例子 P38 收集表单数据

收集表单数据：

​ 若：，则v-model收集的是value值，用户输入的就是value值。

​ 若：，则v-model收集的是value值，且要给标签配置value值

​ 若：

​ 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

​ 2.配置input的value属性

​ (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

​ (2)v-model的初始值是数组，那么收集的的就是value组成的数

​ 备注：v-model的三个修饰符：

​ lazy：失去焦点再收集数据

​ number：输入字符串转为有效的数字

​ trim：输入首尾空格过滤


    
data:{
	userInfo:{
		account:'',
		password:'',
		age:18,
		sex:'female',
		hobby:[],
		city:'beijing',
		other:'',
		agree:''
	}
},
methods: {
	demo(){
		console.log(JSON.stringify(this.userInfo)) //转换成json，发送请求
	}
}
11. 过滤器 P39 过滤器用法

如图

全局（组件公用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5C6pRPQn-1652602773258)(Images/image-20210818163835397.png)]

userInfo.other">


阅读并接受《用户协议》
提交

data:{
userInfo:{
account:‘’,
password:‘’,
age:18,
sex:‘female’,
hobby:[],
city:‘beijing’,
other:‘’,
agree:‘’
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo)) //转换成json，发送请求
}
}


## 11. 过滤器

### P39 过滤器用法

 如图







全局（组件公用）

[外链图片转存中...(img-5C6pRPQn-1652602773258)]

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/924768.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-16
下一篇 2022-05-16

发表评论

登录后才能评论

评论列表（0条）

保存