Vue2基础-Vue对象介绍

轩不丢

已于 2024-03-18 08:56:50 修改

阅读量408

点赞数 4

分类专栏：前端框架文章标签： vue.js 前端 javascript 前端框架 vue

于 2023-11-08 09:46:06 首次发布

本文链接：https://blog.csdn.net/ning_xiao_xuan/article/details/134185084

版权

前端框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、概念

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

1、特点

采用组件化模式，提高代码复用率、且让代码更好维护。
一个组件就是一个.vue文件，.vue文件内部包括html,css和javascript三个部分
在这里插入图片描述
声明式编码，让编码人员无需直接操作DOM,提高开发效率。

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

虚拟DOM可以在内存中对页面的状态进行修改和比对，然后批量更新到真实DOM中，从而减少了直接对真实DOM频繁操作带来的性能损耗。Vue通过Diff算法比对虚拟DOM的变化，只更新真正改变的部分，提高了页面更新的效率。

2、举例

动态渲染，需要使用Vue对象将div绑定，此时通过传输的数据动态渲染到页面上

<div id="root">
	<h1>我的年龄是{{age}}</h1>  
	//{{}}里面写的是Js表达式，如果没和Vue有关，写script一些函数也是可以的
</div>
<script>
	const x = new Vue({
		el:‘#root’   //使用document.getElementById('root')
		//e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
		data:{
			age:‘18’
		}
	})
</script>

PS：若是两个id为root的盒子，则Vue只会接管第一个容器。多个Vue接管一个容器则会报错。
必须一一对应

二、模板语法

1、插值语法

上述案例的 $\{\{\}\}$ 就是插值语法。一般用于标签体内容

2、指令语法

标签体里的属性绑定vue需要v-xxx

3、v-bind

一般管理标签属性的内容

1、<a href="url">></a>
如果正常写，url当成普通字符串执行，写成{{url}}也无法引用Vue的data，因此会解析成字符串
2、<a v-bind:href="url">></a>
加上v-bind后引号里面会被当成js的表达式，此时就可以用Vue里的data
3、v-bind可以简写成:，因此写成<a :href="url">></a>即可

4、数据绑定

单项数据绑定：v-bind实现单项数据绑定，Vue的值传给容器，容器中值改变不会影响Vue中data值。
双向数据绑定：v-model，Vue中data和容器中值互相影响，但V-model只能应用在表单类元素(输入类元素)上。（其他会报错）
v-model:value 可以简写为v-model, 因为v-model默认收集的就是value值。

三、组件

el和data的两种写法

1、灵活改变el
	const x = new Vue({
		data:{
			age:‘18’
		}
	})
	假设不写el，则可用x.$mount('#root')改变   //挂载

我们console.log(x)后可以得到一个Vue实例对象，里面以$开头的都是可以给用户使用的，其他都是底层使用的，而[[Prototype]]: Object里面是Vue这个对象的一些方法和属性

2、data的函数式写法
	const x = new Vue({
	el:"#root",
	data:function(){
		return{
			age:‘18’
		}
	}
	//这么写也可以
	data(){
		return{
			age:‘18’
		}
	}
	/这么写也可以
	data:()=>{
		return{
			age:‘18’
		}
	}

组件必须使用data的函数式写法，data函数中的this是vue的实例对象。但注意箭头函数没有自己的this，则它的this指向window.
由Vue管理的函数，一定不要写箭头函数!一旦写了箭头函数，this就不再是Vue实例了。

四、MVVM模型

M:模型(Model) :对应data中的数据
data中所有的属性，最后都出现在了Vue实例对象身上。
Vue实例对象身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直按使用。
V:视图(View) :模板
VM:视图模型(ViewModel) : Vue 实例对象

五、数据代理-data

1、原理

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)

1、利用defineProperty给对象添加属性，它有很多选择的功能，可以追加高级的限制
	Object.defineProperty(对象，'属性名',值)
	但是这样添加的属性不能被更改，此时可以通过方法控制。
	0bject.defineProperty(person, ' age',{
		value:18,
		enumerable:true, //控制属性是否可以枚举，默认值是false
		writable:true, //控制属性是否可以被修改，默认值是false
		configurable:true //控制属性是否可以被删除，默认值是false
		
		//当有人读取对象的属性时，get函数(getter)就会被调用，且返回值就是属性的值
		get: function(){         //可简写成get
			console.log('有人读取age属性了)
			return 值/变量	
		}
		此时变量就可以通过set进行绑定变量，属性值可以根据变量进行改变
		//当有人修改对象的属性属性时，set函 数(setter)就会被调用，且会收到修改的具体值
		set(value){
			console.1og('有人修改了属性属性");
			变量=value;  //这个变量是上述get的return 变量
		}
	})

2、通过上述讲解，可以写一个最简单的数据代理
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
		obj.x = value
	}
})

2、vue中的数据代理

通过vm对象来代理data对象中属性的操作。这样能更方便操作data中的数据。
_data本质上就是定义的vm的data属性
在Vue实例对象vm中，data数据存储在_data中,vm解析时还将其数据代理放在外面。通过Object. defineProperty( )把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作(读/写) data中对应的属性。

六、事件处理-method

1、基本使用

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
事件的回调需要配置在methods对象中，最终会在vm上;
methods中配置的函数，不要用箭头函数!否则this就不是vm了;
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
@click=“demo"和@click=” demo($event)"效果一致，但后者可以传参;

<button v-on:click="showInfo1">点击1</button>
<button @click="showInfo2($event,66)">点击2</button>  //用$event占位，在哪个位置下面Method中event就是哪个参数
const Vm = new Vue( {
	el:'#root',
	data:{
		name: 'myself'
	},
	methods:{
		showInfo1(event){
			//target指向按钮对象,按钮对象属性和方法都可以使用，eg.event.target.innnerText可获得点击1
			// console.log (event.target)
			// console.log(this) //此处的this是vm，若showInfo1使用(event)=>函数，则this指向window，不太建议使用
			alert('同学你好1')
		},
		showInfo2(event,number){
				
		}
	}
})

2、事件修饰符

语法：@xxx.修饰符  eg.@click.stop="showInfo1"
要是需要多个修饰符，可以连这写:@xxx.修饰符.修饰符

prevent:阻止默认事件(常用) ;
stop:阻止事件冒泡(常用) ;
once:事件只触发一次(常用) ;
capture:使用事件的捕获模式;
self:只有event.target是当前操作的元素是才触发事件;
passive:事件的默认行为立即执行，无需等待事件回调执行完毕（用于事件处理很复杂拖慢相应速度的时候）;

3、键盘按键

一些keyup,keydown事件可以有不同修饰符

@keyup.xxx="function()"

Vue中常用的按键别名:
    回车=> enter
    删除=> delete ( 捕获“删除"和“退格键)
    退出=> esc
    空格=> space
    换行=> tab(特殊，必须配合keydown使用，keyup后会失去焦点，不能用)
    上=>up
    下=> down
    左=> left
    右=> right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，可通过e.key,e.keyCode查看按键名字和编码，但注意如果有一个按键名字有两个单词的，比如CapsLock(切换大小写)，要转为caps-lock (短横线命名)

@keyup.caps-lock="function()"

系统修饰键(用法特殊) : tab、ctrl、alt、 shift、meta(window键)
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
也可以使用keyCode去指定具体的按键(不推荐，不同键盘不一样) keyup.keyCode
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名，然后就可以使用别名。最好方式是用按键名字。
当需要多个按键搭配，可以keyup.按键1.按键2,表示只有按下按键1再按下按键2才会触发

七、计算属性

拿着data的属性去计算和加工，得到全新的属性就是计算属性。也用到了数据代理

定义:要用的属性不存在，要通过已有属性（只能是属性，即data里面的）计算得来。
原理:底层借助了objcet.defineproperty方法提供的getter和setter.
get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。
备注:
1.计算属性最终会出现在vm上，直接读取使用即可。eg.{{fullName}}
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

const Vm = new Vue( {
	el:'#root',
	data:{
		firstName: '张',
		lastName:'三'
	},
	methods:{
	}
	computed:{
		fullName :{
			//get有什么作用?当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
			//get什么时候调用? 1.初次读取fullName时。2. 所依赖的数据发生变化时。
			get(){
				console.log('get被调用了')
				// console.log(this) // 此处的this是vm
				return this.firstName + '-' + this.lastName
			},
			//set什么时候调用?当fullName 被修改时。
			set(value){
				console.1og( 'set' , value)
				const arr = value .split('-' )
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}
	}
})

简写情况：当确定了计算属性只读不改的时候就可以使用简写形式

//function函数当get用
fullName: function(){
 console.log('get被调用了') 
 return this.firstName +'-' + this.lastName
}
//或者
fullName(){
 console.log('get被调用了') 
 return this.firstName +'-' + this.lastName
}

八、监听属性

1、普通监视

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视! !
监视的两种写法:
(1)new Vue时传入watch配置
(2)通过vm.$watch监视

const Vm = new Vue( {
	el:'#root',
	data:{
		isHot:true，
		number:{
			a:1,
			b:1
		}
	},
	watch:{
		//其实应该写成'isHot'，只不过只有一级被省略了，要是多级结构需要加上''
		isHot:{
			immediate:true, // 初始化时让handler调用一下,默认为false
			//handler什么时候调用?当isHot发生改变时。
			handler(newValue , oldValue){
				console.1og( 'isHot被修改了' ，newValue, oldValue )
			}
		}
	}
})
//不通过上述的watch，还可以通过$watch
vm.$watch('isHot',{
		immediate:true, // 初始化时让handler调用一下,默认为false
		//handler什么时候调用?当isHot发生改变时。
		handler(newValue , oldValue){
			console.1og( 'isHot被修改了' ，newValue, oldValue )
		}
})

2、深度监视

深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep:true可以监测对象内部值改变(多层)。
备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

watch:{
		//检测多级结构的某个属性
		'number.a':{
			
		}
		//但是若多级结构很多，写法就很冗余，单独用一级结构number不能监视子结构（存的是地址，地址里值没改变）
		//此时需要用到深度监视
		number:{
			deep:true,
			handle(newValue, oldValue){
				
			}
		}
		
}

3、监视简写

当监视只有handle时可以使用简写形式

1、new Vue里简写
	watch:{
		//此时相当于handle
		isHot(newValue, oldValue){
			
		}
	}
2、$watch简写
	vm.$watch('isHot',function(newValue , oldValue){
			console.1og( 'isHot被修改了' ，newValue, oldValue )
		}
	})

九、监听与计算总结

computed和watch之间的区别:
1.computed能完成的功能，watch 都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch以进行异步操作，比如定时等。
两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数( 定时器的回调函数、ajax的回调函数等,Promise的回调函数)，最好写成箭头函数,
这样this的指向才是vm或组件实例对象。箭头函数没有自己的this，而是往上找this。