Vue（四）事件和属性

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>