vue2笔记记录

总有那么一个想法
我想去走走
菩提
刷新
世界很大，真的很大
欢迎使用Family_Notes！登录后，点击上方左侧导航，查看对应模块的笔记；点击上方右侧昵称，编辑自己的笔记；
基础内容


一、入门

  1、环境准备

    1）、安装谷歌浏览器插件扩展程序 

	vue2.x：vue_dev_tools.crx;
	vue3.x：vue3_dev_tools.crx;

  2、注意细节

    1）、函数写法：（确定当前 this -> 箭头函数会丢失当前 this -> 函数里面再用到 this 会往外去找 -> 确定外层 this 对象 -> 根据需求确定是用箭头函数还是普通函数）

	所有被Vue管理的函数，最好写成普通函数，不要箭头函数，这样this的指向才是vm 或 组件实例对象。

	所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

	目的都是为了使用 vm 中的 this；

  3、一些常用方法

    1）、过滤：从数组中筛选符合添加的元素

	let persons = [
		{id:'001',name:'马冬梅',age:19,sex:'女'},
		{id:'002',name:'周冬雨',age:20,sex:'女'},
		{id:'003',name:'周杰伦',age:21,sex:'男'},
		{id:'004',name:'温兆伦',age:22,sex:'男'}
	]

	let val = "周";
	let filtArray = persons.filter((p)=>{
		return p.name.indexOf(val) !== -1
	})

    2）、排序：对一个数组进行快速升序、降序

	let arr = [1,435,32,1,23,45,46];
	arr.sort((a,b)=>{
		return a-b;//升序
		//return b-a;//降序
	})




属性修改 -> 响应式 setter -> 模板解析 -> 虚拟 dom 对比 -> 真实 dom 渲染；


vue set方法，增加响应式属性



//****************************************************************************
二、赋值

  1、给“标签体内容”赋值，使用“插值语法”即可

	<h3>你好，{{name}}</h3>

  2、给“标签属性”赋值，使用“指令语法”即可

    1）、单向绑定 v-bind

	//<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
	<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
	<input type="text" :value="name"><br/>

    2）、双向绑定 v-model：数据不仅能从data流向页面，还可以从页面流向data；双向绑定一般都应用在表单类元素上（如：input、select 等有 value 属性的元素上）

	//<input type="text" v-model:value="name"><br/>
	<input type="text" v-model="name"><br/>

  3、给对象赋值(数据代理)：Object.defineProperty(对象, 属性名, {...})；//vue_basic/06_数据代理;

  4、Vue实例

	new Vue({
		el:'#root',
		data:{
			name:'jack',
			school:{
				name:'尚硅谷',
				url:'http://www.atguigu.com',
			}
		}
	})

//****************************************************************************
事件处理

一、绑定点击事件

  1、完整指令写法：

	<button v-on:click="showInfo">点我提示信息</button>

  2、简便写法：

	<button @click="showInfo1">点我提示信息1（不传参）</button>

  3、传参写法，使用占位符传递 event 事件，同时传递参数：

	<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

  4、vue 实例

	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',
		},
		methods:{
			showInfo1(event){
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！')
			},
			 showInfo2(event,number){
				console.log(event,number)
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！！')
			}
		}
	})

二、滚动事件

  1、页面滚动条滚动事件

	<ul @scroll="demo" class="list">

  2、鼠标滚轮滚动事件

	<ul @wheel="demo" class="list">

三、键盘事件

  1、@keydown：按下即触发（不需要抬起）

  2、@keyup：按下并抬起，才触发；

  3、指定键盘按钮事件，例如按下回车触发：@keyup.enter="demo"

    1）、常用键盘事件

	回车 => enter
	删除 => delete (捕获“删除”和“退格”键)
	退出 => esc
	空格 => space
	换行 => tab (特殊，必须配合keydown去使用)

    2）、方向键

	上 => up
	下 => down
	左 => left
	右 => right

四、事件修饰符（<button @click.stop="showInfo">点我提示信息</button>）

  1、prevent：阻止默认事件（常用）；

  2、stop：阻止事件冒泡（常用）；
	
  3、once：事件只触发一次（常用）；

  4、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；




//****************************************************************************
属性操作（data 里面的属性操作）

一、计算属性（computed）：

  1、原理：

	函数里面当所依赖的属性被修改了，就触发函数；

	计算属性的属性，不用在 data 里面声明；

	初次读取会触发一次；

	需要有返回值，作为计算属性的值；

  2、实现

    1）、准备好一个容器

	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>{{fullName}}</span> <br/><br/>
	</div>

    2）、计算属性：fullName

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三',
		},
		computed:{
			//完整写法
			/* fullName:{
				get(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				},
				set(value){
					console.log('set',value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			} */
			//简写
			fullName(){
				console.log('get被调用了')
				return this.firstName + '-' + this.lastName
			}
		}
	})

二、监视（侦听）属性（watch）：

  1、原理：

	监视一个值，这个值需要在 data 中声明；

	当被监视的属性变化时, 触发回调函数；

	设置 immediate 可以初始化时候触发；

	设置 deep 可以深度监视；

	不需要返回值，里面直接干活即可；

  2、实现：

    1）、可以放在实例中监视：

	const vm = new Vue({
		...
		watch:{
			isHot:{
				// immediate:true, //初始化时让handler调用一下
				//handler什么时候调用？当isHot发生改变时。
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}	
		}
	})

    2）、也可以在实例外面监视（侦听）：

	const vm = new Vue({...})

	vm.$watch('isHot',{
		immediate:true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	})

  3、深度监视（侦听）：当一个属性的值有嵌套结构时，想要监听嵌套里面任意一层数值的变化，只要默认值即可(deep:true,)

	numbers:{
		//immediate:true, //初始化时让handler调用一下
		deep:true,//深度监视
		handler(){
			console.log('numbers改变了')
		}
	}

  *4、深度监视（侦听）简写方式，不需要 immediate、deep 时可以简写：

    1）、vue 实例里面写法

	const vm = new Vue({
		...
		watch:{
			isHot(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}	
		}
	})

    2）、vue 实例外面的写法：

	vm.$watch('isHot',function(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	})

三、计算属性 computed 与监视属性 watch 的对比

  1、两者都可以实现 c=a+b ，用来计算 c 的值；

  2、使用计算属性 computed 实现起来比较方便；

  3、使用监视属性 watch 可以实现异步（例如等待1秒之后计算），但是计算属性 computed 目前无法实现异步；

	watch:{
		firstName(val){//val 就是 newvalue，第一个是 newvalue，此处简写了
			setTimeout(()=>{
				console.log(this)//注意这里需要用到 vm 的 this，所以得借助箭头函数处理一下；
				this.fullName = val + '-' + this.lastName
			},1000);
		}
	}

  4、注意用到 this 时，需要考虑使用普通函数还是箭头函数；





//****************************************************************************
样式控制

一、属性赋值，通过 class 来控制：

  1、通过变量值控制：

    1）、原理：借助了 vue 的属性赋值（指令 v-bind），申明一个动态classname，然后给 class 属性动态赋值，通过 classname 来控制样式；

    2）、适用范围：样式的类名不确定，需要动态指定；

    3）、举例：

	<div class="basic" :class="mood" @click="changeMood">{{name}}</div> 

	data 里面维护 mood 属性，然后根据需要动态指定不同样式 class 名称即可；

  2、通过数组来控制：

    1）、原理：属性赋值，然后动态添加 class 是操作 class 数组；

    2）、适用范围：要绑定的样式个数不确定、名字也不确定；

    3）、举例：

	<div class="basic" :class="classArr">{{name}}</div>

	classArr 是一个数据，在事件方法中动态控制 calss；

  3、通过对象来控制：

    1）、原理，属性赋值，先有一个对象，对象中有多个 map 形式的样式值，通过控制 value 是否选中来控制是否启用样式；

    2）、适用范围：要绑定的样式个数确定、名字也确定，但要动态决定用不用

    3）、举例：

	<div class="basic" :class="classObj">{{name}}</div>

	classObj 是一个 map 对象；

  4、vue 实例：

	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',
			mood:'normal',
			classArr:['atguigu1','atguigu2','atguigu3'],
			classObj:{
				atguigu1:false,
				atguigu2:false,
			}
		}
	})

二、指令控制

  1、页面是否展示（v-show、v-if）

    1）、高切换频率的场景使用 v-show：v-show="表达式"

	<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

    2）、低切换频率的场景使用 v-if：v-if="表达式"（v-else-if="表达式"；v-else="表达式"）

	<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

	//v-if与template的配合使用，不会破坏页面结构，template 最终不会被渲染；
	<template v-if="n === 1">
		<h2>你好</h2>
		<h2>尚硅谷</h2>
		<h2>北京</h2>
	</template>

  2、遍历渲染（v-for）,of/in 都可以；

    1）、数组遍历（注意 key 的选用，要是唯一标识，例如 id；尽量不要使用下标）

	<ul>
		<li v-for="(p,index) of persons" :key="p.id">
			{{p.name}}-{{p.age}}
		</li>
	</ul>

    2）、对象遍历

	<ul>
		<li v-for="(value,k) of car" :key="k">
			{{k}}-{{value}}
		</li>
	</ul>

    *3）、字符串遍历

	<ul>
		<li v-for="(char,index) of str" :key="index">
			{{char}}-{{index}}
		</li>
	</ul>


    4）、vue 实例：

	new Vue({
		el:'#root',
		data:{
			persons:[
				{id:'001',name:'张三',age:18},
				{id:'002',name:'李四',age:19},
				{id:'003',name:'王五',age:20}
			],
			car:{
				name:'奥迪A8',
				price:'70万',
				color:'黑色'
			},
			str:'hello'
		}
	})