1. 事件
1.1 事件简写
- v-on:click=""
- 简写方式 @click=""
<button v-on:click="show">点我</button> <button @click="show">点我</button>
1.2 事件对象$event
- 包含事件相关信息，如事件源、事件类型、偏移量
- target、type、offsetx
//js methods:{}
print(e){
// console.log(e); console.log(e.target.innerHTML); //DOM对象 console.log(this); }
<button @click="print($event)">Click Me</button>
1.3 事件冒泡
- 阻止事件冒泡：
- a)原生js方式，依赖于事件对象
- b)vue方式，不依赖于事件对象
- @click.stop
1.4 事件默认行为
- 阻止默认行为：
- a)原生js方式，依赖于事件对象
<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>
-----------------------------------------------------------------------------------------
<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>
1.5 键盘事件
- 回车：@keydown.13 或@keydown.enter
- 上：@keydown.38 或@keydown.up
- 默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
<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>
-------------------------------------------------------------------------------------------------------
<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>
1.6 事件修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
2. 属性
2.1 属性绑定和属性的简写
- v-bind 用于属性绑定， v-bind:属性=""
- 属性的简写：
- v-bind:src="" 简写为 :src=""
<script> window.onload=function(){ let vm=new Vue({ el:‘#itany‘, data:{ url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘, w:‘200px‘, h:‘100px‘ } }); } </script>
----------------------------------------------------------------------
<div id="itany"> <!-- <img src="{{url}}"> --> <!-- 可以直接访问vue中的数据，不需要使用{{}} --> <!-- <img v-bind:src="url"> --> <img :src="url" :width="w" :height="h"> </div>
2.2 class和style属性
- 绑定class和style属性时语法比较复杂：
<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>
--------------------------------------------------------------------------------- <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>
