v-on指令
什么是v-on指令
专门给元素绑定事件处理函数的特殊指令
何时使用v-on指令
只要绑定事件，都用v-on
如何使用v-on指令:2步
a. <元素 v-on:事件名="事件处理函数()">
b. methods:{
事件处理函数(){
... ...
}
}
v-on指令简写
a. 今后可用@代替v-on:
<元素 @事件名="事件处理函数()">
b. 如果事件处理函数不需要传参数值，则()可省略！
<元素 @事件名="事件处理函数">
事件处理函数可以传实参值:
a. <元素 @事件名="事件处理函数(自定义实参值,...)">
b. methods:{
事件处理函数(形参变量, ...){
... ...
}
}
案例
<!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="app">
<img src="img/liang.jpg" alt="" v-on:click="say('hh')">
<img src="img/ran.jpg" alt="" @click="say('pp')">
</div>
<script>
new Vue({
el:'#app',
methods:{
say(name){
alert(`${name}被点了`);
}
}
});
</script>
</body>
</html>
vue中也可以获得事件对象
a. <元素 @事件名="事件处理函数"> //一定不要加()
b. methods:{
事件处理函数(e){
//e就是DOM中的e
//事件发生时，会自动接住DOM中的事件对象
//后续可以: 阻止冒泡、利用冒泡、阻止默认行为、获得鼠标坐标、获得键盘按键号...
}
}
事件对象案例
<!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="app">
<img src="img/liang.jpg" alt="" @click="say">
<img src="img/ran.jpg" alt="" @click="say">
</div>
<script>
new Vue({
el:'#app',
methods:{
say(e){
if(e.offsetY<200){
alert(`头 疼!`);
}else if(e.offsetY<450){
alert(`胸 疼!`);
}else{
alert(`肚 疼!`);
}
}
}
});
</script>
</body>
</html>
如何既获得事件对象，又能传自定义实参值？
a. 错误的解决1:
<元素 @事件名="事件处理函数(自定义实参值, ...)"
methods:{ DOM的event
事件处理函数( e ){
}
} 错误
b. 错误的解决2:
<元素 @事件名="事件处理函数(自定义实参值)"
methods:{
事件处理函数( 形参, e ){ //Vue只能自动给第一个形参传event
}
}
c. 正确的解决: 必须借助于一个新的Vue的关键字: $event
1). 什么是: 专门在vue中自动获得DOM中事件对象的关键字
2). 何时使用: 今后，只要既想获得事件对象，又想传自定义实参值时，都用$event
3). 如何使用:
4). 说明: $event与自定义实参值的顺序可以交换，但是，必须保证methods中的形参变量顺序与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="app">
<img src="img/liang.jpg" alt="" v-on:click="say($event,'hh')">
<img src="img/ran.jpg" alt="" @click="say($event,'pp')">
</div>
<script>
new Vue({
el:'#app',
methods:{
say(e,name){
if(e.offsetY<200){
alert(`${name}头 疼!`);
}else if(e.offsetY<450){
alert(`${name}胸 疼!`);
}else{
alert(`${name}肚 疼!`);
}
}
}
});
</script>
</body>
</html>
v-html指令
(1). 问题: {{}}如果绑定的变量值中包含内嵌的HTML标签或特殊符号，则{{}}不会交给浏览器解析，而是原样显示！正常人看不懂的！
(2). 解决: 今后，只要要绑定的变量值中，包含内嵌的HTML标签或特殊符号，需要先让浏览器解析，再给人看时，都用v-html指令，代替{{}}
(3). 如何: <元素 v-html="变量"></元素>
(4). 强调: v-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="app">
<h3>{{msg}}</h3>
<h3 v-html="msg"></h3>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'来自<a href="#"><<人民日报>></a>的消息'
}
});
</script>
</body>
</html>
运行结果
防止用户短暂看到{{}}
当网速慢时，js可能延迟下载和运行，用户就有可能提前看到HTML中的{{}}绑定语法！
解决方法: 使用 v-cloak指令或者v-text指令
v-cloak指令(隐身斗篷)
什么是v-cloak:
专门在new Vue()加载完之前，暂时隐藏元素的特殊指令
如何使用 v-cloak
i. 必须先在css中，手工添加一个属性选择器:
//选中所有带有v-cloak属性的元素，开局默认隐藏
[v-cloak]{ display:none } 复习第二阶段属性选择器
ii. <要隐藏的元素上 v-cloak>
原理:
i. 开局: 因为new Vue()加载有延迟，所有v-cloak暂时发挥作用，让元素隐藏。
ii. 但是，当new Vue()加载完成后，会自动扫描页面中所有v-cloak，自动移除所有v-cloak。结果，所有v-cloak隐藏的元素就恢复显示了！
案例
使用v-cloak防止用户短暂看到{{}}
<!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>
[v-cloak]{
display:none
}
</style>
</head>
<body>
<div id="app">
<h3>{{name}}</h3>
<h3 v-cloak>{{name}}</h3>
</div>
<script>
setTimeout(function(){
new Vue({
el:'#app',
data:{
name:'gavin'
}
});
},2000)
</script>
</body>
</html>
v-text指令
什么是v-text指令
代替{{}}来绑定元素内容的特殊指令
如何使用v-text指令
<要隐藏内容的元素 v-text="变量或表达式(js地盘 )"></要隐藏的元素>
原理:
i. 开局: 因为没有用{{}}绑定元素内容，所以，用户看不到任何内容的
ii. new Vue()加载完之后，new Vue()扫描到v-text时，会先计算""中变量或表达式的内容，用变量或表达式的内容完整代替开始标签到结束标签之间的内容。
强调:
因为v-text也是完整覆盖元素的内容。所以，开局在元素内容中放置一些初始的内容，则后续都会被覆盖！无法显示！所以，如果v-text想用部分写死的内容和变量值拼接形成要显示的值时，应该在v-text后""中用模板字符串``来拼接字符串。
示例:
使用v-text防止用户短暂看到{{}}
<!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="app">
<h3>欢迎{{name}}</h3>
<h3 v-text="`欢迎${name}`"></h3>
</div>
<script>
setTimeout(function(){
new Vue({
el:'#app',
data:{
name:'gavin'
}
});
},2000)
</script>
</body>
</html>
