文章目录

1. Vue的事件修饰符
- 1.1 Vue 的六种事件修饰符
- 1.2 Vue的 prevent事件修饰符
- 1.3 Vue的 stop事件修饰符
- 1.4 Vue的 once事件修饰符
- 1.5 Vue的 capture事件修饰符
- 1.6 Vue的 self事件修饰符
- 1.7 Vue的 passive 事件修饰符
2. js的事件对象 event
3. Vue 键盘事件
4. 差值语法中调用函数名的效果
5. Vue的计算属性
6. Vue的监视属性
- 6.1 监视属性的使用
- 6.2 深度监视
- 6.3 监视属性的简写形式
7. watch监视属性和computed 计算属性对比

1. Vue的事件修饰符

1.1 Vue 的六种事件修饰符

在Vue中，事件修饰符有六种：

prevent: 阻止默认事件(常用)。
stop:阻止事件冒泡(常用)。
once：事件只触发一次(常用)。
capture：使用事件的捕获模式。
self：只有event.target是当前操作的元素时，才触发事件。
passive：事件的默认行为立刻执行，无序等待事件回调执行完毕。

事件修饰符，母庸质疑就是用来修饰Vue事件的！

1.2 Vue的 prevent事件修饰符

<!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>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><h2>欢迎来到{{name}}学习</h2><!--使用prevent事件修饰符：阻止默认事件--><a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a></div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showInfo(event){//通过event事件对象来，阻止标签的默认行为//event.preventDefault();alert("同学你好");}}})</script>
</body>
</html>

1.3 Vue的 stop事件修饰符

使用vue的stop事件修饰符，来阻止事件冒泡。

<!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>Document</title><script src="./js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body><div id="root"><h2>欢迎来到{{name}}学习</h2><!--使用stop事件修饰符：阻止事件冒泡--><div class="demo1" @click="showInfo"><!--阻止了点击div的点击事件--><button @click.stop="showInfo">点我提示信息</button></div></div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showInfo(event){alert("同学你好");}}})</script>
</body>
</html>

1.4 Vue的 once事件修饰符

Vue的once事件修饰符：事件只触发一次(常用)。

<!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>Document</title><script src="./js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body><div id="root"><h2>欢迎来到{{name}}学习</h2><!--使用once事件修饰符：事件只触发一次！--><button @click.once="showInfo">按钮</button></div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showInfo(event){alert("同学你好");}}})</script>
</body>
</html>

1.5 Vue的 capture事件修饰符

事件修饰符capture：使用事件的捕获模式。

这里涉及到两个js的内容：事件捕获和事件冒泡。

在事件冒泡阶段，才会处理我们的一些事件对应的函数！
在这里插入图片描述

<!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>Document</title><script src="./js/vue.js"></script><style>*{margin-top: 20px;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}</style>
</head>
<body><div id="root"><h2>欢迎来到{{name}}学习</h2><!--这里涉及到了两个js的内容，js的事件捕获和事件冒泡。在冒泡阶段，才会处理我们的一些事件对应函数等。整体上js代码，执行时是先进行事件捕获再事件冒泡！--><!--capture事件修饰符：使用事件的捕获模式。--><!--加上了capture后，相当于在事件捕获阶段就要执行该方法！--><!--不加capture是两个事件都在冒泡阶段下执行，先执行box2的事件，再执行box1的事件。加上capture在捕获阶段就执行了box1的事件，之后又在冒泡阶段执行box2的事件。--><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div></div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showMsg(msg){console.log(msg)}}})</script>
</body>
</html>

1.6 Vue的 self事件修饰符

事件修饰符self：只有event.target是当前操作的元素时，才触发事件。

首先，解释一个event事件对象，在冒泡阶段现象：
在这里插入图片描述

<!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>Document</title><script src="./js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body>
<div id="root"><!--self事件修饰符：event.target是当前操作的元素时，才会触发相应的事件。--><!--当我点击，button时，拿到的是button的event，尽管冒泡阶段执行了demo1下的click事件，它也不会执行，因为我们在这里设置了self事件修饰符，当前的event不是demo1的div对应的event！很好理解，一定要知道event事件对象是谁！self最后的结果和stop差不多，也阻止了冒泡的效果。--><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div>
</div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showInfo(event){console.log(event.target)}}})</script>
</body>
</html>

1.7 Vue的 passive 事件修饰符

介绍两个vue的事件，@scroll和@wheel (注意，@是v-on指令)，前者是一句css的overflow滚动条绑定的事件，后者是鼠标滚轮绑定的事件。

例如：下面的效果。
在这里插入图片描述

passive事件修饰符：事件的默认行为立刻执行，无序等待事件回调执行完毕。这个就可以解决上图的问题。
在这里插入图片描述

2. js的事件对象 event

专门讲解一下js代码中的事件对象event。

在js中，我们平时指定的事件是不能直接拿到event事件对象的，但是可以通过window.event来操作。
在jqurey中，我们通过jquery绑定的事件函数会默认拿到一个event值的数据。例如：$("#in").keyup(function(event){console.log(event.keyCode);})。
在Vue中，可以直接通过$event拿到event事件对象。

event事件对象常用的几个形式：

event.target 或 event.target.value 。
event.key(获取按键名) 或 eventkeyCode(获取按键对应编码)。

3. Vue 键盘事件

Vue中的两个键盘事件：keydown 和 keyup 。

keydown：就是按下按键就触发。
keyup：就是按下按键必须抬起来再触发。(一般使用keyup)

原始办法，直接使用事件对象的event，event.keyCode可以拿到不同按键对应的不同的编号。

然后通过判断我们想要对应的键盘符号，例如:回车。

<!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>Document</title><script src="./js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body>
<div id="root"><div class="demo1" @click.self="showInfo"><input type="text" placeholder="按下回车提示" @keyup="showInfo"/></div>
</div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showInfo(event){//event.keyCode可以拿到不同按键对应的不同的编号// console.log(event.keyCode);// console.log(event.target.value);//enter对应的keycode就是13。if(event.keyCode == 13){alert("登录成功");}}}});</script>
</body>
</html>

在Vue中，我们就可以调用Vue的别名。vue给常用的按键都起了一个别名，我们可以通过别名，来对不同按键进行操作。

Vue中常用的按键别名：

enter 回车。
delete 删除(捕获删除和退格键)。
esc 退出。
space 空格。
tab 换行。(tab，只能配置keydown实现！)
up 上。
down 下。
left 左。
right 右。

<!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>Document</title><script src="./js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body>
<div id="root"><div class="demo1"><input type="text" placeholder="按下enter提示" @keyup.enter="showInfo"/><br><input type="text" placeholder="按下delete提示" @keyup.delete="showInfo"/><br><input type="text" placeholder="按下esc提示" @keyup.esc="showInfo"/><br><input type="text" placeholder="按下space提示" @keyup.space="showInfo"/><br><input type="text" placeholder="按下tab提示" @keyup.tab="showInfo"/><br><input type="text" placeholder="按下up提示" @keyup.up="showInfo"/><br><input type="text" placeholder="按下down提示" @keyup.down="showInfo"/><br><input type="text" placeholder="按下left提示" @keyup.left="showInfo"/><br><input type="text" placeholder="按下right提示" @keyup.right="showInfo"/><br></div>
</div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showInfo(event){alert("登录成功");}}});</script>
</body>
</html>

直接通过按键全名来操作，不使用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>Document</title><script src="./js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body>
<div id="root"><div class="demo1" @click.self="showInfo"><!-- 这里的按键名，也可以不用vue起的别名，直接写全名就可以，想知道全名打印event.key就知道了。下面的Control，对应按键Ctrl。--><input type="text" placeholder="按下enter提示" @keyup.Control="showInfo"/><br><!-- 像CapsLock大驼峰法（Upper Camel Case）写法，这样的两个单词组成的样式，必须分割开来才能被识别。 --><input type="text" placeholder="按下enter提示" @keyup.caps-lock="showInfo"/><br><!-- 并不是所有的键盘上的按键都能绑定，这个要注意！ --></div>
</div>
<script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{name:"北京大学"},methods:{showInfo(event){console.log(event.key , event.keyCode)}}});</script>
</body>
</html>

注意：tab键的使用，tab键比较特殊，它是切换下一内容的。因此如果绑定tab键，我们只能用keydown，不能用keyup，因为tab已经切换到下一个了，就不会执行keyup的事件函数了。

也可以通过编码方式指定按键(不推荐，已经过时)：
在这里插入图片描述

系统修饰键：ctrl , alt , shift , meta(这个按键是键盘的win键) ,tab。

这几个键比较特殊，一般用来配合其他按键使用的！

两种情况：

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键盘。
配合keydown使用：正常触发事件。(除了tab键！)

如果我们想要两个按键叠加的效果，比如，我们向要用ctrl + y 这个按键来实现。可以定义为下面这样：
在这里插入图片描述

我们可以使用Vue.config.keyCodes.xxx来定义一个别名按键，从而在让Vue使用：（不推荐，因为没必要知道就行）

Vue.config.keyCodes.aaa = 13; 这样aaa也能被Vue使用了
在这里插入图片描述

每一个事件是可以重叠的：
在这里插入图片描述
但是，顺序不同，不一样，就像上面先阻止了跳转，再阻止了冒泡。

4. 差值语法中调用函数名的效果

<!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>Document</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="root"><div><span>{{Myfun}}</span><br><span>{{Myfun()}}</span></div>
</div>
<script>Vue.config.keyCodes.aaa = 13;Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{pre:"张",name:"三"},methods:{Myfun(){return "张三";}}});</script>
</body>
</html>

结果不难看出，差值语法调用函数需要加上()，不要和绑定vue的指令事件函数搞混了。
在这里插入图片描述

5. Vue的计算属性

定义：要用的属性不存在，要通过已有属性计算得来。

计算属性很好理解，就是从vue实例对象中，现有的属性也就是data中的内容，去加工计算，从而得到一个新的属性(也就是计算属性)。

computed计算属性的不同处：

data中，写什么就是什么，直接发给Vue实例对象。
methods中，也是写什么就是什么。
computed就比较特殊，它不是放上去什么就是什么，所谓的计算属性，就是通过一个对应的get方法拿到的return值，这个return的值的名字就是我们在computed自己定义的属性名。

计算属性有get，当然也有set方法，这两个方法的作用以及什么时候调用，都在下面代码中:

<!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>Document</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="root"><div>姓: <input type="text" v-model="firstName"><br>名: <input type="text" v-model="lastName"><br>全名: <span>{{fullName}}</span></div>
</div>
<script>Vue.config.keyCodes.aaa = 13;Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{firstName:"张",lastName:"三"},computed:{fullName:{//计算属性中的get的底层实现使用的就是Object.definedProperty的getter和setter。//计算属性中get的作用？//当有人读取fullName时，get就会被调用，且返回值就作为fullName的值。//计算属性中的get什么时候被调用？//第一次读取计算属性fullName时，再者就是当fullName属性中的get方法中所依赖的数据发生变化，就会重新调用get方法。get(){console.log("get被调用了");return this.firstName+"-"+this.lastName;},//计算属性的set方法什么时候被调用？//当fullName被修改时，set方法被调用。//value参数就是我们要修改传进来的参数。set(value){console.log("set被调用：" , value)const arr = value.split('-');console.log(arr);this.firstName = arr[0];this.lastName = arr[1];}},}});</script>
</body>
</html>

计算属性的简写形式：

<!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>Document</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="root"><div>姓: <input type="text" v-model="firstName"><br>名: <input type="text" v-model="lastName"><br>全名: <span>{{fullName}}</span></div>
</div>
<script>Vue.config.keyCodes.aaa = 13;Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{firstName:"张",lastName:"三"},computed:{// fullName:{// 	get(){// 		console.log("get被调用了");// 		return this.firstName+"-"+this.lastName;// 	}// }//简写形式就相当于省略了set方法，并且get方法简写成下面的function形式。// fullName:function(){// 	console.log("get被调用了");// 	return this.firstName+"-"+this.lastName;// }// 也就可以在简写为下面的形式：fullName(){console.log("get被调用了");return this.firstName+"-"+this.lastName;}}});</script>
</body>
</html>

总结，计算属性并不是在Vue的实例对象上面放了一个函数，而是把函数return的值返回给了Vue实例对象，该值的名字就是计算属性对应的属性名。

注意事项，见下方代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="root"><h2>今天天气很{{info}}</h2><!-- 这里可以直接使用表达式的方式来给进行操作。 此外，这里不需要this来指定对象，因为这里不是像下面的methods中js代码一样，要使用this：this.isHot = !this.isHot; --><button @click="isHot = !isHot">切换天气</button></div><script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{isHot:true,},computed:{info(){return this.isHot ? "炎热" : "凉爽"}},// methods:{// 	changeWeather(){// 		console.log("切换了")// 		this.isHot = !this.isHot;// 	}// }})</script></body>
</html>

6. Vue的监视属性

6.1 监视属性的使用

Vue的监视属性就是watch属性，它可以监视实例对象data中的内容以及计算属性的值。

不管是watch和$watch里面都有一个handler回调函数，来实现函数操作。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>watch</title><script src="./js/vue.js"></script></head><body><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script>Vue.config.productionTip = false;const vm = new Vue({el:"#root",data:{isHot:true,},computed:{info(){return this.isHot ? "炎热" : "凉爽"}},methods:{changeWeather(){//console.log("切换了")this.isHot = !this.isHot;}},//watch监视属性watch:{//这里的isHot就是对应到data中的属性，来监听data中的isHot。isHot:{//hander什么时候被调用？当isHost发生改变时。handler(newValue,oldValue){// handler是可以接受两个参数一个新值，一个旧值。console.log("监测data中的isHost的handler可以拿到新值：",newValue);console.log("监测data中的isHost中的handler也可以拿到旧值:",oldValue);console.log("监测data中的isHost中的handler被调用了,监听的监测data中的isHost被修改了！");},//初始化值让handler调用一下。immediate:true,},info:{handler(newValue,oldValue){//获得计算属性的中的内容console.log("监测计算属性info的handler可以拿到新值：",newValue);console.log("监测计算属性info中的handler也可以拿到旧值:",oldValue);console.log("监测计算属性info中的handler被调用了,监听的监测计算属性info被修改了！");}}}})</script></body>
</html>

可以直接通过vm的$watch来定义监听事件。

注意：
这里不能直接写ishot，必须写"ishot"或’ishot’。

原因:
其实在上面的watch定义的ishot本质上是’ishot’或"ishot"，所以这里也是要写成这种形式。

<!doctype html>
<html><head><meta charset="utf-8"><title>watch</title><script src="./js/vue.js"></script></head><body><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeweather">切换天气</button></div><script>Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {ishot: true,},computed: {info() {return this.ishot ? "炎热" : "凉爽"}},methods: {changeweather() {//console.log("切换了")this.ishot = !this.ishot;}}})/*可以直接通过vm的$watch来定义监听事件。注意：这里不能直接写ishot，必须写"ishot"或'ishot'。原因:其实在上面的watch定义的ishot本质上是'ishot'或"ishot"，所以这里也是要写成这种形式。*/vm.$watch('ishot', {immediate: true,handler(newvalue,oldvalue){console.log("监测data中的ishost的handler可以拿到新值：", newvalue);console.log("监测data中的ishost中的handler也可以拿到旧值:", oldvalue);console.log("监测data中的ishost中的handler被调用了,监听的监测data中的ishost被修改了！");}})</script></body>
</html>

上面两种监听的使用情况，一般我们刚刚设计的时候，确定好了哪一个需要监听就定义watch。再后续的设计中又需要添加的信息的监听，就是使用$watch来使用。

6.2 深度监视

深度监视单个属性写法：

<!doctype html>
<html><head><meta charset="utf-8"><title>watch</title><script src="./js/vue.js"></script></head><body><div id="root"><h3>a的值是{{numbers.a}}</h3><button @click="numbers.a++">点我让a加1</button></div><script>Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {ishot: true,numbers:{a:1,b:1}}watch:{//深度监视的效果："numbers.a":{handler(newValue,oldValue){console.log("a被改变了，新值：",newValue,"旧值为：",oldValue)}}}})</script></body>
</html>

监测整层，也就是下面的numbers的变化，需要加上deep属性：

<!doctype html>
<html><head><meta charset="utf-8"><title>watch</title><script src="./js/vue.js"></script></head><body><div id="root"><h3>a的值是{{numbers.a}}</h3><button @click="numbers.a++">点我让a加1</button><h3>b的值是{{numbers.b}}</h3><button @click="numbers.b++">点我让b加1</button></div><script>Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {ishot: true,numbers:{a:1,b:1}},watch:{/*这里我想只要numbers的内容发生变化，就是监听到内容。直接绑定numbers是不可以的，因为他监听监听的是numbers的地址值。而numbers里面的存储的a的地址值和b的地址值是不会变化的。但是，我们可以使用deep属性配置一下：*/numbers:{deep:true,handler(){console.log("numbers中的内容被修改了")}},}})</script></body>
</html>

6.3 监视属性的简写形式

简写形式，前提没有什么属性，只有一个handler时，才可以用简写方式。

<!doctype html>
<html><head><meta charset="utf-8"><title>watch</title><script src="./js/vue.js"></script></head><body><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeweather">切换天气</button></div><script>Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {ishot: true,numbers:{a:1,b:1}},computed: {info() {return this.ishot ? "炎热" : "凉爽"}},methods: {changeweather() {//console.log("切换了")this.ishot = !this.ishot;}},// watch:{// 	//没有其他属性，只有handler函数时，可以简写为下面的形式// 	ishot(newvalue,oldvalue){// 		console.log("监测data中的ishost的handler可以拿到新值：", newvalue);// 		console.log("监测data中的ishost中的handler也可以拿到旧值:", oldvalue);// 		console.log("监测data中的ishost中的handler被调用了,监听的监测data中的ishost被修改了！");// 	}// }})//$watch的简写形式，同样没有属性，只有handler函数时，才可以简写。vm.$watch('ishot',function(newvalue,oldvalue){console.log("监测data中的ishost的handler可以拿到新值：", newvalue);console.log("监测data中的ishost中的handler也可以拿到旧值:", oldvalue);console.log("监测data中的ishost中的handler被调用了,监听的监测data中的ishost被修改了！");})</script></body>
</html>

7. watch监视属性和computed 计算属性对比

最大的区别：

computed必须有return返回值！而且计算属性整体上是给Vue实例对象添加了一个key:value的键值形式，像data。

在watch中定义，像setTimeout这样的全局函数，一定要写箭头函数，多注意this的情况。看下图：
在这里插入图片描述
此外，官方文档中，监听属性叫做侦听属性，了解一下。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

设计模式之模板方法模式
设计模式之模板方法模式 1. 模板方法模式在书中定义： 定义一个操作中算法的骨架，而将一些步骤延迟到子类中，模板方法使得子类可以不改变算法的结构即可重定义该算法的某些特定步骤。通俗点的理解就是 ：完成一件事情&#xff0…...
2024/5/7 1:25:40
1.20日学习总结
今天我又来做题解了。今天想说的是一个通过程序判断二叉树深度的问题。具体题目如下。我当初做这个题的方法。是直接用结构体建了一个二叉树。在用前序遍历的方式来找到深度。用了一个max函数。还用了一个deep变量来记录一下现在的深度。 max函数就是为了取出每次的最大…...
2024/5/7 5:32:28
第三章模型建立及评估
目标：根据泰坦尼克号的数据集完成泰坦尼克号存活预测。 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns from IPython.display import Image plt.rcParams[font.sans-serif] [SimHei] # 用来正常显示中文标签 …...
2024/4/17 21:37:19
【ceph相关】bucket动态分片
【ceph相关】bucket动态分片 1、背景说明参考说明： https://access.redhat.com/documentation/en-us/red_hat_ceph_storage/2/html/object_gateway_guide_for_ubuntu/administration_cli#configuring-bucket-index-sharding https://ceph.com/community/new-lumin…...
2024/4/18 20:39:52
Tomcat中文乱码完全解决【保姆教学】
修改Tomcat的conf目录下的logging.properties文件将所有encoding修改为UTF-8 修改IDE中的idea64.exe.vmoptions文件，添加一句-Dfile.encodingUTF-8 3. 重启IDE（非常重要！！！！！） …...
2024/4/14 11:32:20
day8 AI面试刷题
day8 AI面试刷题1. 随机森林和GBDT的区别？2. 在训练每颗子树时，该如何决定最优的随机特征个数？3. 随机森林算法跟深度学习算法相比有哪些优势？4. 如果让你在GDBT算法和随机森林算法中选择一个来解决实际问题，你通常…...
2024/5/6 23:16:30
浏览器copy as curl用法
不多说，上图在network中随便找一个请求，点击右键，复制为curl格式将复制下来的内容直接粘贴到命令行工具（我这里使用的是mac 终端）中回车，就能看到请求后的结果啦...
2024/4/15 5:32:21
最新最全《2022Android中高级大厂面试题汇总》【1932页】面试宝典
前言 Android 市场已今非昔比。在过去，迫于招人的压力，应试者只需了解四大组件、视图、网络请求，即可谋得一份满意的工作。明年我相信将会是面试求职的高峰时期，如果此时手里有份高质量的面试宝典，那么你将得心应手面…...
2024/5/6 20:05:10
JVM垃圾回收机制
JVM垃圾回收机制一：回收堆内存1.如何判定对象已死（可达性分析算法）2.对象的引用级别3.对象的死亡过程二：垃圾回收算法1.标记清除算法2.标记复制算法3.标记整理算法三：垃圾收集器1.G1（Garbage First&#xf…...
2024/4/7 5:38:34
迟到的 Android 个人年度面经总结……
前言 21年让我感觉经历了不少东西，不仅是生活还是工作方便。工作方面主要体现在面试吧，初步的算了一下我这一年面试了不下三十家公司，有大厂也有中小型公司，大厂偏多一些，应该每开发者和我一样都有想去大厂的想法&…...
2024/4/14 11:32:25
智能技术带来的可能的技术代价是人们需要警惕的
新技术与社会的融合能够给社会带来利益，同时也会带来伤害。新技术带给社会的伤害可以看作是社会要付出的“技术代价”，这样的代价是社会整体为技术发展而所要付出的总体成本。在信息技术发展的短暂时间里，许多人尤其是青少年沉湎于电子游戏甚…...
2024/4/19 21:15:37
Java基础语法（变量）
学习自B站：【狂神说Java】Java零基础学习视频通俗易懂 Java基础语法（变量） 变量变量是什么：就是可以变化的量！ Java是一种强类型语言，每个变量都必须声明其类型 Java变量是程序中最基本的存储单元&#…...
2024/4/20 0:20:49
让 Android 面试官百问不厌不过时的知识点（已整理）
开头为了准备面试复习了Android的一些原理知识，并陆陆续续的总结了一些面试相关的东西，因为太久没写面试之类的博客了，今天就想做一个Android面试知识的分享。但是无奈本人太蔡了(灬ꈍ ꈍ灬)，在北京、深圳（远程视频…...
2024/4/7 5:38:31
SpringBoot 中yml配置文件：定义list集合、数组及注意事项
点击“终码一生”，关注，置顶公众号每日技术干货，第一时间送达！ 1.在平时的yml配置文件中，我们经常使用到配置基本数据类型的字符串，比如配置日志文件的写法如下： # 配置日志输出级别 logging…...
2024/4/14 11:32:15
绩点计算python
成绩等级绩点 90-100 A 4.0 85-89 A- 3.7 82-84 B 3.3 78-81 B 3.0 75-77 B- 2.7 72-74 C 2.3 68-71 C 2.0 64-67 C- 1.5 60-63 D 1.3 补考60 D- 1.0 60以下 F 0 平均绩点:(课程学分1*绩点课程学分2*绩点课程学分n*绩点)/(课程学分1课程学分2课程学分n)# 用户循环输入五分制成…...
2024/4/19 7:39:48
【Linux】ifconfig命令详解
Windows中的ipconfig命令行工具，被用来获取网络接口配置信息并对此进行修改。Linux系统拥有一个类似的工具，也就是 ifconfig (interfaces config)。通常需要以root身份登录或使用sudo以便在Linux机器上使用ifconfig工具。依赖于ifconfig命令中使用一些选…...
2024/5/3 19:46:28
小胖学习大数据的第九天
多态: 同一个类,在不同时刻表现出不同的形态子类->父类:父类的引用指向子类的对象例如: Animal animal new Cat(); 父类->子类: 例如: Cat cat(Cat)animal instanceof运算符: 当前父类指向哪一个子类使用格式: 对象 instanceof 类或接口 …...
2024/4/20 0:51:03
下载安装andriod studio（二）
选第二个 don‘t send 弹出了选第一个，弹出这玩意咋一看我没看懂，动用了微信扫一扫，翻译还是没懂百度一下 （参考(4条消息) Android Studio 配置 Http Proxy_第89号的博客-CSDN博客_android studio配置proxy） 在…...
2024/4/19 9:20:09
从零开始搭建服务器
1、定义云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器。云服务器帮助您快速构建更稳定、安全的应用，降低开发运维的难度和整体IT成本…...
2024/4/14 11:32:20
[渝粤教育] 上海交通大学流体力学参考资料
教育 -流体力学-章节资料考试资料-上海交通大学【】单元作业单元测验 1、【单选题】一个物体微元的变形大小与所受切应力相关，这个物体可以是： A、刚体 B、弹性体 C、流体 D、无参考资料【】 2、【单选题】一个物体微元的变形速度大小与所受切应力成…...
2024/4/16 1:05:10

Vue 学习总结笔记 (二)

文章目录

1. Vue的事件修饰符

1.1 Vue 的六种事件修饰符

1.2 Vue的 prevent事件修饰符

1.3 Vue的 stop事件修饰符

1.4 Vue的 once事件修饰符

1.5 Vue的 capture事件修饰符

1.6 Vue的 self事件修饰符

1.7 Vue的 passive 事件修饰符

2. js的事件对象 event

3. Vue 键盘事件

4. 差值语法中调用函数名的效果

5. Vue的计算属性

6. Vue的监视属性

6.1 监视属性的使用

6.2 深度监视

6.3 监视属性的简写形式

7. watch监视属性和computed 计算属性对比

相关文章

最新文章

Vue 学习总结笔记 (二)

文章目录

1. Vue的 事件修饰符

1.1 Vue 的六种事件修饰符

1.2 Vue的 prevent事件修饰符

1.3 Vue的 stop事件修饰符

1.4 Vue的 once事件修饰符

1.5 Vue的 capture事件修饰符

1.6 Vue的 self事件修饰符

1.7 Vue的 passive 事件修饰符

2. js的事件对象 event

3. Vue 键盘事件

4. 差值语法中调用函数名的效果

5. Vue的 计算属性

6. Vue的 监视属性

6.1 监视属性的使用

6.2 深度监视

6.3 监视属性的简写形式

7. watch监视属性 和computed 计算属性 对比

相关文章

最新文章

1. Vue的事件修饰符

5. Vue的计算属性

6. Vue的监视属性

7. watch监视属性和computed 计算属性对比