事件缩写
v-on:click=
简写方式 @click=
事件对象$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件简写和事件对象$event</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
},
print(e){
// console.log(e);
console.log(e.target.innerHTML); //DOM对象
console.log(this);
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<button v-on:click="show">点我</button>
<button @click="show">点我</button>
<hr>
<button @click="print($event)">Click Me</button>
</div>
</body>
</html>
事件冒泡
阻止事件冒泡：
a)原生js方式，依赖于事件对象
b)vue方式，不依赖于事件对象
@click.stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡和默认行为</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
// e.stopPropagation();
},
print(){
console.log(222);
},
write(){
console.log(333);
},
study(){
console.log(444);
// e.preventDefault();
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<div @click="write">
<p @click="print">
<!-- <button @click="show($event)">点我</button> -->
<button @click.stop="show">点我</button>
</p>
</div>
<hr>
<!-- <a href="#" @click="study($event)">俺是链接</a> -->
<a href="#" @click.prevent="study">俺是链接</a>
</div>
</body>
</html>
Tips: 由内到外依次执行 print,write,itany被称为"事件冒泡",只执行print不执行write和itany, @click.stop
事件默认行为
阻止默认行为：
a)原生js方式，依赖于事件对象
<a href="#" @click.prevent="study">俺是链接</a>
比如网址是 www.baidu.com,点击上面的链接会跳转到 www.baidu.com#,
阻止默认行为 @click.prevent
键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script src="js/vue.js"></script>
<script>
/**
* 自定义键位别名
*/
Vue.config.keyCodes={
a:65,
f1:112
}
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(e){
console.log(e.keyCode);
if(e.keyCode==13){
console.log('您按了回车');
}
},
print(){
// console.log('您按了回车');
// console.log('您按了方向键上');
console.log('11111');
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- 键盘事件：@keydown、@keypress、@keyup -->
<!-- 用户名：<input type="text" @keydown="show($event)"> -->
<!-- 简化按键的判断 -->
<!-- 用户名：<input type="text" @keydown="show($event)"> -->
<!-- 用户名：<input type="text" @keydown.13="print"> -->
<!-- 用户名：<input type="text" @keydown.enter="print"> -->
<!-- 用户名：<input type="text" @keydown.up="print"> -->
用户名：<input type="text" @keydown.f1="print">
<!-- 事件修饰符 -->
<button @click.once="print">只触发一次</button>
</div>
</body>
</html>
事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。 某个组件的根元素上绑定 .native修饰符,使组件变成普通的HTML
.once - 只触发一次回调。
属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""
属性的简写：
v-bind:src="" 简写为 :src=""
class和style属性
绑定class和style属性时语法比较复杂：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class和style属性</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
bb:'aa',
dd:'cc',
flag:true,
num:-2,
hello:{aa:true,cc:true},
xx:{color:'blue',fontSize:'30px'},
yy:{backgroundColor:'#ff7300'}
}
});
}
</script>
<style>
.aa{
color:red;
font-size:20px;
}
.cc{
background-color:#ccc;
}
</style>
</head>
<body>
<div id="itany">
<!--
class属性
-->
<!-- <p class="aa">南京网博</p> --> <!-- 可以访问，普通css方式 -->
<!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->
<!-- 方式1:变量形式 -->
<!-- <p :class="bb">南京网博</p> -->
<!-- 方式2：数组形式，同时引用多个 -->
<!-- <p :class="[bb,dd]">南京网博</p> -->
<!-- 方式3：json形式，常用！！！ -->
<!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->
<!-- <p :class="{aa:num>0}">南京网博</p> -->
<!-- 方式4：变量引用json形式 -->
<!-- <p :class="hello">南京网博</p> -->
<!--
style属性
-->
<p :style="[xx,yy]">itany</p>
</div>
</body>
</html>
数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
<style>
/* 必须配置css样式，否则不生效 */
[v-cloak]{
display:none;
}
</style>
<h3>aaa<span v-cloak>{{msg}}</span></h3>
其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示