1、五种事件修饰符
.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器，使用事件捕获模式.self只当事件在该元素本身（不是子元素）触发时触发回调.once事件只触发一次
2、stop与self
-
self:别让我被别人冒泡stop:别让其他人冒泡 -
self:自身不响应别的事件且不影响事件的传递stop:自身不响应别的事件但阻止事件的传递
3、用法示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<style>
.inner {
height: 50px;
background-color: darkcyan;
}
.outer {
padding: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click="div1Handler">
<input type="button" value="冒泡" @click="btnHandler">
<!-- 使用.stop 阻止事件向外层传播，即冒泡 -->
<input type="button" value="阻止冒泡" @click.stop="btnHandler">
</div>
<hr>
<a href="http://www.baidu.com" @click="linkClick">有问题，上百度（跳转）</a><br>
<!-- 使用.prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，上百度（不跳转）</a>
<hr>
<!-- 使用.capture 实现捕获触发事件机制，即先执行要求捕获的标签，再其他 -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="捕获" @click="btnHandler">
</div>
<hr>
<!-- 使用.self 实现只有当前标签的自身事件触发才会执行 -->
<div class="inner" @click.self="div1Handler">
<input type="button" value="self" @click="btnHandler">
</div>
<hr>
<!-- 使用.once 实现只触发一次事件处理函数 和顺序无关 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，上百度（第二次点击生效）</a><br>
<a href="http://www.baidu.com" @click.once.prevent="linkClick">有问题，上百度（第二次点击生效）</a>
<hr>
<!-- 演示： .stop 和 .self 的区别 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="区别" @click="btnHandler">
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler(){
console.log("这是触发了 inner div 的点击事件");
},
div2Handler(){
console.log("这是触发了 outer div 的点击事件");
},
btnHandler(){
console.log("这是触发了 btn 按钮的点击事件");
},
linkClick(){
console.log("触发了链接的点击事件");
}
}
});
</script>
</body>
</html>
4、v-model
-
v-bind： 只能实现数据的单向绑定，从 M 到 V，无法实现从 V 到 M 的绑定 -
v-model： 能实现数据的双向绑定，M V 间相互交换 -
注意：v-model只能使用在表单元素中，如： input(radio, text, address, email…), select, checkbox, textarea
-
示例：
<!DOCTYPE html>
<html lang="en"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4 v-html="msg"></h4>
<!-- v-bind:-->
<label>v-bind(单向):</label>
<input type="text" v-bind:value="msg" style="width: 100%;">
<hr>
<!-- v-model: -->
<label>v-model(双向):</label>
<input type="text" v-model:value="msg" style="width: 100%;">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '静女其姝，俟我于城隅。爱而不见，搔首踟蹰。'
},
methods: {}
});
</script>
</body>
</html>
5、js函数
-
eval(string)– 如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
– 存在安全问题，不建议使用
eval("x=10;y=20;document.write(x*y)"); // 200 document.write("<br>" + eval("2+2")); // 4 document.write("<br>" + eval(x+17)); // 27 -
parseInt(string, radix)— 解析一个字符串，并返回一个整数。
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
— 当忽略参数 radix , JavaScript 默认数字的基数如下:
-
如果 string 以 “0x” 开头，解析为十六进制的整数
-
如果 string 以 0 开头，解析为八进制或十六进制的数字
-
如果 string 以 1 ~ 9 的数字开头，解析为十进制的整数
document.write(parseInt("10") + "<br>"); // 10
document.write(parseInt("10.33") + "<br>"); // 10
document.write(parseInt("34 45 66") + "<br>"); // 34
document.write(parseInt(" 60 ") + "<br>"); // 60
document.write(parseInt("40 years") + "<br>"); // 40
document.write(parseInt("He was 40") + "<br>"); // NaN
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
