Vue 学习总结笔记 (二)
<div class="operating">
<a class="href-article-edit slide-toggle">版权</a>
</div>
</div>
</div>
</div>
<div id="blogColumnPayAdvert">
<div class="column-group">
<div class="column-group-item column-group0 column-group-item-one">
<div class="item-l">
<a class="item-target" href="https://blog.csdn.net/it_holmes/category_11899711.html" target="_blank" title="Vue 全家桶" data-report-click="{"spm":"1001.2101.3001.6332"}">
<img class="item-target" src="https://img-blog.csdnimg.cn/b3f6cc316bf34861ba4e5d84c6f8f0ff.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
<span class="title item-target">
<span>
<span class="tit">Vue 全家桶</span>
<span class="dec">专栏收录该内容</span>
</span>
</span>
</a>
</div>
<div class="item-m">
<span>14 篇文章</span>
<span>5 订阅</span>
</div>
<div class="item-r">
<a class="item-target article-column-bt articleColumnFreeBt" data-id="11899711">订阅专栏</a>
</div>
</div>
</div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
<div id="content_views" class="markdown_views prism-tomorrow-night">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<p></p>
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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//通过event事件对象来，阻止标签的默认行为</span>
<span class="token comment">//event.preventDefault();</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"同学你好"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"同学你好"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"同学你好"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
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>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<script>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showMsg</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
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差不多，也阻止了冒泡的效果。
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo1<span class="token punctuation">"</span></span> <span class="token attr-name">@click.self</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showInfo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showInfo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点我提示信息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</div>
<script>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//event.keyCode可以拿到不同按键对应的不同的编号</span>
<span class="token comment">// console.log(event.keyCode);</span>
<span class="token comment">// console.log(event.target.value);</span>
<span class="token comment">//enter对应的keycode就是13。</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">13</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"登录成功"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
在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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"登录成功"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
直接通过按键全名来操作，不使用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">
<span class="token comment"><!--
这里的按键名，也可以不用vue起的别名，直接写全名就可以，想知道全名
打印event.key就知道了。
下面的Control，对应按键Ctrl。
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>按下enter提示<span class="token punctuation">"</span></span> <span class="token attr-name">@keyup.Control</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showInfo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 像CapsLock大驼峰法（Upper Camel Case）写法，这样的两个单词组成的样式，必须分割开来才能被识别。 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>按下enter提示<span class="token punctuation">"</span></span> <span class="token attr-name">@keyup.caps-lock</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showInfo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 并不是所有的键盘上的按键都能绑定，这个要注意！ --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</div>
<script>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token punctuation">,</span> event<span class="token punctuation">.</span>keyCode<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
注意：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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>keyCodes<span class="token punctuation">.</span>aaa <span class="token operator">=</span> <span class="token number">13</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
pre<span class="token operator">:</span><span class="token string">"张"</span><span class="token punctuation">,</span>
name<span class="token operator">:</span><span class="token string">"三"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">Myfun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token string">"张三"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
结果不难看出，差值语法调用函数需要加上()，不要和绑定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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>keyCodes<span class="token punctuation">.</span>aaa <span class="token operator">=</span> <span class="token number">13</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
firstName<span class="token operator">:</span><span class="token string">"张"</span><span class="token punctuation">,</span>
lastName<span class="token operator">:</span><span class="token string">"三"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
fullName<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//计算属性中的get的底层实现使用的就是Object.definedProperty的getter和setter。</span>
<span class="token comment">//计算属性中get的作用？</span>
<span class="token comment">//当有人读取fullName时，get就会被调用，且返回值就作为fullName的值。</span>
<span class="token comment">//计算属性中的get什么时候被调用？</span>
<span class="token comment">//第一次读取计算属性fullName时，再者就是当fullName属性中的get方法中所依赖的数据发生变化，就会重新调用get方法。</span>
<span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"get被调用了"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstName<span class="token operator">+</span><span class="token string">"-"</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>lastName<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//计算属性的set方法什么时候被调用？</span>
<span class="token comment">//当fullName被修改时，set方法被调用。</span>
<span class="token comment">//value参数就是我们要修改传进来的参数。</span>
<span class="token function">set</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"set被调用："</span> <span class="token punctuation">,</span> value<span class="token punctuation">)</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>lastName <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
计算属性的简写形式：
<!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<span class="token punctuation">.</span>config<span class="token punctuation">.</span>keyCodes<span class="token punctuation">.</span>aaa <span class="token operator">=</span> <span class="token number">13</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
firstName<span class="token operator">:</span><span class="token string">"张"</span><span class="token punctuation">,</span>
lastName<span class="token operator">:</span><span class="token string">"三"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">// fullName:{<!-- --></span>
<span class="token comment">// get(){<!-- --></span>
<span class="token comment">// console.log("get被调用了");</span>
<span class="token comment">// return this.firstName+"-"+this.lastName;</span>
<span class="token comment">// }</span>
<span class="token comment">// }</span>
<span class="token comment">//简写形式就相当于省略了set方法，并且get方法简写成下面的function形式。</span>
<span class="token comment">// fullName:function(){<!-- --></span>
<span class="token comment">// console.log("get被调用了");</span>
<span class="token comment">// return this.firstName+"-"+this.lastName;</span>
<span class="token comment">// }</span>
<span class="token comment">// 也就可以在简写为下面的形式：</span>
<span class="token function">fullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"get被调用了"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstName<span class="token operator">+</span><span class="token string">"-"</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>lastName<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
总结，计算属性并不是在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;
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isHot = !isHot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换天气<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
isHot<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isHot <span class="token operator">?</span> <span class="token string">"炎热"</span> <span class="token operator">:</span> <span class="token string">"凉爽"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// methods:{<!-- --></span>
<span class="token comment">// changeWeather(){<!-- --></span>
<span class="token comment">// console.log("切换了")</span>
<span class="token comment">// this.isHot = !this.isHot;</span>
<span class="token comment">// }</span>
<span class="token comment">// }</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
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>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>今天天气很{<!-- -->{info}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>changeWeather<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换天气<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
isHot<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isHot <span class="token operator">?</span> <span class="token string">"炎热"</span> <span class="token operator">:</span> <span class="token string">"凉爽"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">changeWeather</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//console.log("切换了")</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>isHot <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>isHot<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//watch监视属性</span>
watch<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//这里的isHot就是对应到data中的属性，来监听data中的isHot。</span>
isHot<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//hander什么时候被调用？当isHost发生改变时。</span>
<span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span>oldValue</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">// handler是可以接受两个参数一个新值，一个旧值。</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的isHost的handler可以拿到新值："</span><span class="token punctuation">,</span>newValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的isHost中的handler也可以拿到旧值:"</span><span class="token punctuation">,</span>oldValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的isHost中的handler被调用了,监听的监测data中的isHost被修改了！"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//初始化值让handler调用一下。</span>
immediate<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
info<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span>oldValue</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//获得计算属性的中的内容</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测计算属性info的handler可以拿到新值："</span><span class="token punctuation">,</span>newValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测计算属性info中的handler也可以拿到旧值:"</span><span class="token punctuation">,</span>oldValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测计算属性info中的handler被调用了,监听的监测计算属性info被修改了！"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
可以直接通过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>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>今天天气很{<!-- -->{info}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>changeweather<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换天气<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span> <span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
ishot<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ishot <span class="token operator">?</span> <span class="token string">"炎热"</span> <span class="token operator">:</span> <span class="token string">"凉爽"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">changeweather</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token comment">//console.log("切换了")</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>ishot <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>ishot<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">/*
可以直接通过vm的$watch来定义监听事件。
注意：
这里不能直接写ishot，必须写"ishot"或'ishot'。
原因:
其实在上面的watch定义的ishot本质上是'ishot'或"ishot"，所以这里也是要写成这种形式。
*/</span>
vm<span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'ishot'</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
immediate<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">newvalue<span class="token punctuation">,</span>oldvalue</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的ishost的handler可以拿到新值："</span><span class="token punctuation">,</span> newvalue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的ishost中的handler也可以拿到旧值:"</span><span class="token punctuation">,</span> oldvalue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的ishost中的handler被调用了,监听的监测data中的ishost被修改了！"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
上面两种监听的使用情况，一般我们刚刚设计的时候，确定好了哪一个需要监听就定义watch。再后续的设计中又需要添加的信息的监听，就是使用$watch来使用。
6.2 深度监视
深度监视单个属性写法：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
<script src="./js/vue.js"></script>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>a的值是{<!-- -->{numbers.a}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numbers.a++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点我让a加1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span> <span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
ishot<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
numbers<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
a<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
b<span class="token operator">:</span><span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
watch<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//深度监视的效果：</span>
<span class="token string">"numbers.a"</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span>oldValue</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a被改变了，新值："</span><span class="token punctuation">,</span>newValue<span class="token punctuation">,</span><span class="token string">"旧值为："</span><span class="token punctuation">,</span>oldValue<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
监测整层，也就是下面的numbers的变化，需要加上deep属性：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
<script src="./js/vue.js"></script>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>a的值是{<!-- -->{numbers.a}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numbers.a++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点我让a加1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>b的值是{<!-- -->{numbers.b}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numbers.b++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点我让b加1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span> <span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
ishot<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
numbers<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
a<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
b<span class="token operator">:</span><span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
watch<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">/*
这里我想只要numbers的内容发生变化，就是监听到内容。
直接绑定numbers是不可以的，因为他监听监听的是numbers的地址值。
而numbers里面的存储的a的地址值和b的地址值是不会变化的。
但是，我们可以使用deep属性配置一下：
*/</span>
numbers<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
deep<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"numbers中的内容被修改了"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
6.3 监视属性的简写形式
简写形式，前提没有什么属性，只有一个handler时，才可以用简写方式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
<script src="./js/vue.js"></script>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>今天天气很{<!-- -->{info}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>changeweather<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换天气<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span> <span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
ishot<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
numbers<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
a<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
b<span class="token operator">:</span><span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ishot <span class="token operator">?</span> <span class="token string">"炎热"</span> <span class="token operator">:</span> <span class="token string">"凉爽"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">changeweather</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token comment">//console.log("切换了")</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>ishot <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>ishot<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// watch:{<!-- --></span>
<span class="token comment">// //没有其他属性，只有handler函数时，可以简写为下面的形式</span>
<span class="token comment">// ishot(newvalue,oldvalue){<!-- --></span>
<span class="token comment">// console.log("监测data中的ishost的handler可以拿到新值：", newvalue);</span>
<span class="token comment">// console.log("监测data中的ishost中的handler也可以拿到旧值:", oldvalue);</span>
<span class="token comment">// console.log("监测data中的ishost中的handler被调用了,监听的监测data中的ishost被修改了！");</span>
<span class="token comment">// }</span>
<span class="token comment">// }</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//$watch的简写形式，同样没有属性，只有handler函数时，才可以简写。</span>
vm<span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'ishot'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">newvalue<span class="token punctuation">,</span>oldvalue</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的ishost的handler可以拿到新值："</span><span class="token punctuation">,</span> newvalue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的ishost中的handler也可以拿到旧值:"</span><span class="token punctuation">,</span> oldvalue<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"监测data中的ishost中的handler被调用了,监听的监测data中的ishost被修改了！"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
7. watch监视属性 和computed 计算属性 对比
最大的区别：
- computed必须有return返回值！而且计算属性整体上是给Vue实例对象添加了一个key:value的键值形式，像data。
在watch中定义，像setTimeout这样的全局函数，一定要写箭头函数，多注意this的情况。看下图：
此外，官方文档中，监听属性叫做侦听属性，了解一下。
文章知识点与官方知识档案匹配，可进一步学习相关知识
Vue入门技能树vue3基础（JS）Vue3现状29505 人正在系统学习中