一. 指令:
1. v-on:
(1). 什么是: 专门为元素绑定事件处理函数的指令
(2). 如何: 2步:
a. 第一步:
1). 标准: <元素 v-on:事件名="事件处理函数(实参,...)">
2). 简写:
i. @事件名="事件处理函数(实参,...)"
ii. 如果不需要传实参值，则可以省略()
@事件名="事件处理函数名"
b. 第二步: 页面中所需的所有事件处理函数必须在methods对象中集中定义。
methods:{
事件处理函数(形参变量, ...){ ... }
}
(3). 如何获得事件对象:
a. 只获得事件对象，不传其它自定义实参值:
<元素 @事件名="事件处理函数"> //不要加()
methods:{
//当事件发生时
//浏览器自动创建event对象
// ↓
事件处理函数( e ){
}
}
b. 如何既获得事件对象，又传自定义实参
//浏览器自动创建的 event对象
// ↓
<元素 @事件名="处理函数(开头的都是有特殊意义的关键字，不能改名！
event都会抢先获得浏览器自动创建的event对象，保存起来备用。
methods:{
事件处理函数(e, 自定义形参,...){
e->event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
img{ width:250px; }
</style>
</head>
<body>
<!--点谁的哪个部位，就喊谁的哪个部位疼！-->
<div id="app">
<img src="img/liang.jpg" @click="say($event,'liang')">
<img src="img/tao.jpg" @click="say($event,'tao')">
</div>
<script>
new Vue({
el:"#app",
methods:{
say(e, name){
if(e.offsetY<120){
console.log(`${name} 头疼!`)
}else if(e.offsetY<240){
console.log(`${name} 胸疼!`)
}else{
console.log(`${name} 肚子疼!`)
}
}
}
})
</script>
</body>
</html>
2. v-html:
(1). 问题: 如果要绑定的字符串内容中包含内嵌的HTML标签或特殊符号，如果使用{{}}绑定，则不会交给浏览器解析，而是原样显示HTML代码——不是我们想要的
(2). 原因: {{}}底层本质是textContent。DOM中的textContent特点就是如果修改内容时，内容中包含html代码，则不交给浏览器解析，而是直接显示。
(3). 解决:
a. DOM中: 只要要修改的新内容中包含HTML片段，都要用innerHTML来修改。因为innerHTML会先把HTML片段交给浏览器解析。然后将解析后的结果显示给人看。
b. vue中: v-html指令等效于innerHTML
(4). 今后，只要要绑定的内容中包含HTML片段，都要用v-html指令来绑定。不要用{{}}
(5). 如何: <元素 v-html="变量"> </元素>
(6). 原理: v-html会先将变量中的字符串内容交给浏览器解析。然后将解析后的内容覆盖掉当前元素开始标签到结束标签之间的旧内容。
(7). 示例: 使用v-html绑定HTML内容
v-html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<h3 v-html="msg"></h3>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:`来自<a href="#"><<新华社>></a>的消息`
}
})
</script>
</body>
</html>
运行结果:
来自<a href="#"><<新华社>></a>的消息
来自<u><<新华社>></u>的消息
3. v-cloak和v-text:
(1). 问题: 当网络状况不好时，new Vue()对象所在的js文件下载可能会延迟加载。导致用户短暂看到页面上的{{}}
(2). 解决: 2种:
a. v-cloak:
1). 什么是: 在new Vue()加载之前，暂时隐藏元素的特殊指令
2). 如何: 2步:
i. 必须手工在样式表中添加:
属性选择器
选择所有带有v-cloak属性的元素
[v-cloak]{ display:none }
斗篷/幕布
ii. 在要暂时隐藏的元素上，添加v-cloak指令.
3). 原理: 当new Vue()加载完之后，new Vue()会扫描页面中所有v-cloak属性，并自动移除所有v-cloak属性。原来暂时隐藏的元素，就都显示出来了。
b. v-text:
1). 什么是: 专门用来代替{{}}绑定元素内容的特殊指令。
2). 如何: <元素 v-text="变量"> </元素>
3). 说明: v-text和{{}}原理一样，底层都相当于textContent。
4). 原理: v-text暂时不会把变量值放入元素开始标签到结束标签之间。只有当new Vue()加载完，解析到v-text指令时，才临时读取变量值，放入元素开始标签到结束标签之间。
5). 强调: 如果v-text中的内容是由部分写死的字符串和变量拼接而成，则必须在""内用``定义模板字符串。""范围内必须符合js的语法规定。
(3). 示例:分别使用v-cloak和v-text避免用户短暂看到{{}}
9_v-cloak.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
[v-cloak]{ display:none }
</style>
</head>
<body>
<div id="app">
<h3 v-cloak>Welcome {{uname}}</h3>
</div>
<script>
setTimeout(function(){
new Vue({
el:"#app",
data:{
uname:"dingding"
}
})
},2000);
</script>
</body>
</html>
运行结果:
Welcome dingding
_v-text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-text="`Welcome ${uname}`"></h3>
</div>
<script>
setTimeout(function(){
new Vue({
el:"#app",
data:{
uname:"dingding"
}
})
},2000)
</script>
</body>
</html>
运行结果：
Welcome dingding
4. v-once
(1). 什么是: 专门标记一个元素只在首次加在时更新一次内容。之后，即使变量发生变化，元素内容也不更新.
(2). 如何: <元素 v-once>
(3). 原理: new Vue()扫描到v-once后，只更新一次v-once所在元素的内容。并且不会将v-once加入虚拟DOM树。今后，即使变量值发生变化，也无法通知到这个v-once所在的元素。自然不会更新元素的内容。
(4). 优化: 今后如果发现个别元素只需要在首次页面加载时更新一次，之后不会再更新！都必须用v-once标记。进一步减少虚拟DOM树中元素的个数，进一步提高虚拟DOM树的效率。
(5). 示例: 使用v-once标记一个元素只在首次加载时更新内容
_v-once.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-once>上线时间: {{time}}</h3>
<h3>当前系统时间: {{time}}</h3>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
time:new Date().toLocaleString()
}
});
setInterval(function(){
vm.time=new Date().toLocaleString();
},1000)
</script>
</body>
</html>
运行结果:
上线时间: 2021/5/19上午11:44:24
当前系统时间: 2021/5/19上午11:44:32
5. v-pre
(1). 什么是: 专门保护元素内容中的{{}}不被new Vue()编译的特殊指令
(2). 如何: <元素 v-pre>
(3). 示例: 阻止内容中的{{}}被编译：
_v-pre.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-pre>vue框架采用{{自定义变量名}}方式标记页面中可能发生变化的位置</h1>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
运行结果：
vue框架采用{{自定义变量名}}方式标记页面中可能发生变化的位置
总结: 绑定语法+13种指令
(1). 如果元素的内容需要随变量自动变化: {{}}
(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素
(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素
(5). 多个元素多选一显示: v-if v-else-if v-else
(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key="唯一标识"
强调: 为什么必须加:key="i"？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once
优化: 减少虚拟DOM树中元素个数。
(11). 保护内容中的{{}}不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model
