【记录】Vue2学习汇总 1 / 4

本文总结了Vue2中的关键知识点,包括计算属性的工作原理与使用注意事项,watch的深度监视特性,数据监测的Vue.set方法,自定义指令的定义与使用流程,以及组件的生命周期和使用步骤。同时,提到了模板语法、数据绑定、事件处理等基础内容。
摘要由CSDN通过智能技术生成


前言 : 大纲 1 / 4

教程 :尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

把Vue学习分为四个阶段,分别记录个人觉得重要的知识点

1 / 4 Vue2基础:Vue基础知识结构中的重点,及部分基础内容

2 / 4 Vue2学习 : 暂无
3 / 4 Vue2学习 : 暂无
4 / 4 Vue3基础 : 暂无


一、重点知识点

计算属性 computed

原理:底层借助了Objcet.defineproperty方法提供的getter和setter。

执行:(1).初次读取时执行一次 (2).依赖的数据发生改变时会被调用执行
如果计算属性要被修改,那必须写 set 函数去响应修改,且set中要引起计算时依赖的数据发生改变

注意:complete依赖于最终返回值,且无法执行异步操作

官网中vue的set方法: “ 向响应式对象中添加一个property,并确保这个新的property也是响应式的,且触发视图更新 ”


监视属性 watch

原理:调用handler方法,其中可以设置多种参数

写法: (1). new Vue时传入watch配置 (2). 通过vm.$watch监视

深度监视:默认不监测对象内部值的改变(一层),配置deep:true可以监测对象内部值改变(多层)。

注意:watch可以进行异步操作

watch: {
	isHot: {
		immediate:true, //初始化时handler调用一次
		deep:true, //深度监视
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	},
	isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	}
}

数据监测

vue会监视data中所有层次的数据

1、监视对象中的数据: 通过setter实现(是数据对象)

注意:对象中后追加的属性默认不做响应式处理,如需给后添加的属性做响应式,请使用如下API:
Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)

特别注意: Vue.set() 和 vm. $set() 不能给 vm 或 vm的根数据对象(data等) 添加属性!!!

2、监测数组中的数据: 通过包裹数组更新元素的方法

原理:(1). 调用原生对应的方法对数组进行更新 (2). 重新解析模板,进而更新页面

注意:在Vue修改数组中的某个元素要使用这些API才能实现响应式:
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.1、数组使用API调用响应式原理

原型链:构造函数里的显示原型与隐式原型

例:数组中的push方法来自于Arrays中原型对象的push,但vue给继承来的隐式push做了一层封装,所以vue中数组调用的是vue封装(封装,而非重写)过的push,因此vue可以检测/监听到对应的改变,从而实现响应


自定义指令 v - fbind

设置并使用流程如下

1、定义语法:局部指令与全局指令

//局部指令
new Vue({								new Vue({
	directives:{指令名:配置对象}    或  		directives{指令名:回调函数}
}) 										})

//全局指令
```javascript 
Vue.directive(指令名,配置对象)  或   Vue.directive(指令名,回调函数)

2、配置对象中常用的3个回调(钩子函数):
(1). bind:指令与元素成功绑定时调用
(2). inserted:指令所在元素被插入页面时调用
(3). update:指令所在模板结构被重新解析时调用
普通调用中只用到1. 3,因此如果需要详细运用,需要在代码中directives指令块部分详写回调函数

3、注意:
(1). 指令定义时不加 v-,但使用时要加 v-
(2). 指令名如果是多个单词,要使用 kebab-case 命名方式 (带 - ) ,不要用 camelCase 命名。

<span v-big="n"></span>  //span双标签
<input type="text" v-fbind:value="n">  //input单标签

//定义全局指令
Vue.directive('fbind',{
	//指令与元素成功绑定时(一上来)
	bind(element,binding){
		element.value = binding.value
	},
	//指令所在元素被插入页面时
	inserted(element,binding){
		element.focus()
	},
	//指令所在的模板被重新解析时
	update(element,binding){
		element.value = binding.value
	}
}) 

//定义局部指令
new Vue({
	data:{ n:1 },
	//...
	directives:{
		//big函数何时会被调用?1.指令与元素成功绑定时(一上来) 2.指令所在的模板被重新解析时
		big(element,binding){
			console.log('big',this) //注意此处的this是window
		},
		//简写形式,以fbind命名的函数
		fbind:{
			//指令与元素成功绑定时(一上来)
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}
	}
})

生命周期

主要:before之前 与 ed完毕 - 创建create,挂载mount,更新update,销毁destroy
注意:生命周期函数中的this指向是 vm 或 组件实例对象

1、常用生命周期钩子:
mounted挂载完毕: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

2、beforeCreate 和 created:
beforeCreate指的是创建数据检测、数据代理之前
beforeCreate之前生命周期、事件、数据处理还未开始,创建这俩之后,调用created钩子

3、beforeDestroy 和 destroyed:
(1). 销毁后借助Vue开发者工具看不到任何信息
(2). 销毁后自定义事件会失效,但原生DOM事件依然有效
(3). 一般不在beforeDestroy操作数据。因为即便操作数据,也不会再触发更新流程。数据依旧可以访问 / 修改,但vue不会引发任何响应
也就是会出现以下情况:已修改数据,但是vue没有响应更新,所以页面上的数据也没有更新

生命周期流程图


组件 Component

组件中有四大块内容

一、Vue中使用组件的三步骤:

1.1 定义组件 / 创建组件

使用 Vue.extend(options) 创建,其中options和new Vue(options)时传入的options有区别,区别如下:

  • el不要写,为什么?
    :最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器
  • data必须写成函数,为什么?
    :避免组件被复用时,数据存在引用关系

备注:使用template可以配置组件结构

//第一步:创建student组件
const student = Vue.extend({
	template:`
		//...
	`,
	data(){
		return { //... }
	}
})

1.2 注册组件
局部注册:靠 new Vue 的时候传入 components 选项
全局注册:靠 Vue.component ( ‘组件名’ , 组件 )

//第二步:注册组件(全局注册)
Vue.component('hello',hello)
	
//第二步:注册组件(局部注册)
new Vue({
	el:'#root',
	//...
	// 这里就是局部注册
	components:{
		school,
		student
	}
})

1.3 使用组件
编写组件标签

<student> </student>

1.4 组件文件的作用
App.vue 汇总所有的组件
main.js 创建vue实例
index.html 将最后的结果呈现出来,其中包含导入的 < App></ App>

href = “<%= BASE_URL %>” 代表public下的路径,可以理解为 ./ …/ 之类的路径标识

二、几个注意点:

关于组件名:

  • 一个单词组成:
    第一种写法(首字母小写):school
    第二种写法(首字母大写):School

  • 多个单词组成:
    第一种写法 ( kebab-case 命名):my-school
    第二种写法 ( CamelCase 命名):MySchool (需要Vue脚手架支持)

  • 备注:
    (1). 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
    (2). 可以使用 name 配置项指定组件在开发者工具中呈现的名字

关于组件标签:

  • 写法:
    第一种写法:< school> </ school>
    第二种写法:< school />

  • 备注:不用使用脚手架时,会导致后续组件不能渲染。

简写方式:
const school = Vue.extend(options) 可简写为:const school = options

三、关于VueComponent:

组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的

我们只需要写 < school/> 或 < school> </ school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

特别注意: 每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

组件配置中this指向:
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】

new Vue(options)配置中this指向:
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】

四、内置关系:

VueComponent.prototype.__proto__   ===   Vue.prototype

目的:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法

Tips:
显示原型属性 Demo.prototype ,只有函数拥有显示原型属性
隐式原型属性 d.__proto__ ,实例对象身上只有隐式原型,没有显示原型
prototype 和 __proto__本质是指针,指向原型对象

关键字: 原型链、原型链继承
这样写是直接通过隐式原型属性直接去原型对象上找x,而d.x是先在自己本身找x,找不到再通过隐式原型属性接触到原型对象,在原型对象找x,所以两种写法都一样,这就是原型链。

原理:vc是Vue缔造出的VueComponent函数,VueComponent函数的prototype显示原型属性指向 缔造者 原型对象,VueComponent实例对象的__proto__隐式原型属性指向 缔造者 原型对象,此处缔造者为Vue原型对象(缔造者也可以理解为父类)。Vue原型对象的__proto__隐式原型属性指向Object原型对象,Object原型对象中的__proto__为null(Object无父类)

所以就存在有school.prototype.__proto__ = vm.__proto__

内置关系


二、基础知识点

语法

1、插值语法: 用于解析标签体内容
{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

2、指令语法: 用于解析标签(包括:标签属性、标签体内容、绑定事件…)
v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性


el 与 template

el:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标

template:是字符串模板,作为vue实例的标识使用;该模板会替换挂载的元素,挂载元素的内容会被忽略,若模板包含多个顶级元素,或者包含普通文本,实例将会变成一个片段实例

额外:在脚手架中使用render代替template完成对页面模板的创建


数据绑定 v-bind / v-model

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

2、双向绑定(v-model): 数据不仅能从data流向页面,还可以从页面流向data
双向绑定一般应用在表单类元素上,因为v-model默认收集的是value值


事件绑定与事件修饰符 v-on

1、事件绑定: 使用v-on:xxx 或 @xxx 绑定事件
methods中配置的函数(function),this的指向是vm 或 组件实例对象;箭头函数的this不是vm

2、事件修饰符(自行记忆,不记得百度)
prevent 阻止默认事件、stop 阻止事件冒泡、once 事件只触发一次、capture 使用事件的捕获模式

self 只有event.target是当前操作的元素时才触发事件、passive 默认立即执行,无需等待事件回调执行完毕


绑定样式 class style

1、class样式: class=“xxx” xxx可以是字符串、对象、数组
绑定单个样式:(1) 字符串:类名不确定,动态获取
绑定多个样式:(1) 对象:个数不确定,名字不确定 (2) 数组:个数确定,名字确定,但不确定用不用

2、style样式:
:style = “{fontSize: xxx}” 其中xxx是动态值
:style = “[a,b]” 其中a、b是样式 对象(对象)

<div class="basic" :class="classObj">{{name}}</div>  //.basic是已确定的样式
<div class="basic" :style="styleObj">{{name}}</div>

data:{
	//...
	classArr:['atguigu1','atguigu2','样式名'],
	classObj:{ atguigu1:false, atguigu2:false },
	styleObj:{ fontSize: '40px', color:'red' },
	styleObj2:{ backgroundColor:'orange' },
	styleArr:[ { fontSize: '40px', color:'blue' },{ backgroundColor:'gray'} ]
},

条件渲染 v-if / v-show

1、v-if
不展示的DOM元素直接被 移除
写法:v-if = " 表达式 " 、 v-else-if = " 表达式 " 、 v-else = " 表达式 "
注意:结构不能被 “打断 ”

2、v-show
不展示的DOM元素未被移除,仅仅使用样式隐藏掉
写法:v-show=“表达式”


过滤器 filter

对要显示的数据进行特定格式化后再显示(适用于简单逻辑处理)
注册:new Vue{filters:{}}
使用:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

注意:
(1). 过滤器可以接收额外参数、多个过滤器可以串联
(2). 并非改变原本的数据, 而是产生新的对应的数据。所以如需改变原数据,必须接收


内置指令

v-text
功能:向其所在的节点中渲染文本内容
与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会

v-html
功能:向指定节点中渲染包含html结构的内容
与插值语法的区别:
(1). v-html会替换掉节点中所有的内容,{{xx}}则不会
(2). v-html可以识别html结构

严重注意: v-html有安全性问题!!!!
(1). 在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2). 一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

v-cloak(没有值)特殊属性
功能:Vue实例创建完毕并接管容器后,会删掉v-cloak属性
作用:使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once
功能:v-once所在节点在初次动态渲染后,就视为静态内容了
作用:之后数据的改变不会引起v-once所在结构的更新,可以用于优化性能

v-pre
功能:跳过其所在节点的编译过程
功能使用:利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译


总结

此为视频进度 p1 - p60 小结

练习文件路径:E:\vsCode_workplace\vue_first
资料文件与样例代码文件路径:E:\vsCode_workplace\VueStudy\vue_basic

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值