Vue v-bind v-on

Vue v-bind

基本使用

 <!-- vue3允许 template 中有多个根元素 -->
    <template id="tem">
        <!-- v-bind 基本使用 -->
        <img v-bind:src="imgUrl" alt="">
        <a v-bind:href="link">baidu </a>

        <!-- 语法糖 简写 -->
        <img :src="imgUrl" alt="">
        <img src="imgUrl" alt="">
        <a :href="link">baidu </a>
    </template>
     data(){
            return{ 
                imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18%2F8%2F125b6560a6ag214.jpg&refer=http%3A%2F%2F1812.img.pp.sohu.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623658315&t=17d8bb35a4d79b34ce4052f0cd9b5c4b',
                link:'https://www.baidu.com/'
            }
        },

绑定class

class对象

<template id="tem">
        <div :class="className"> hahah </div>
        <!-- 可以多个键值对 -->
        <div :class="{active: isActive , 'title':true}">哈哈哈哈</div>
        <!-- 默认class 和动态想结合 -->
        <div class="abc cba" :class="{active: isActive , 'title':true}">哈哈哈哈</div>
        <button @click='tog'>change</button>

        <!-- 将对象放到一个单独的属性中 -->
        <div class="abc cba" :class="obj123">hh123</div>
        <!-- 将返回的对象放到一个methods方法中 -->
        <div class="abc cba" :class="getobj1()">hh123</div>

    </template>
    data(){
            return{ 
                className:"why",
                isActive:true,
                title:'abc',
                obj123:{
                    active: true,
                    title: true
                }
            }
        },
        methods:{
            tog(){
                this.isActive=!this.isActive
            },
            getobj1(){
                return {
                    active: true,
                    title: true
                }
            }
        }

class数组

<template id="tem">
        <div :class="['abc',title]">hello111</div>
        <div :class="['abc',title, isAcitve?'active':'' ]">hello111</div>
        <div :class="['abc',title, {active:isAcitve}]">hello111</div>
    </template>

绑定style对象

<template id="tem">
        <!-- :style="{cssPropertyName:cssPrpperValue}" -->
        <div :style="{color: finalColor,'font-size':'30px'}">哈哈哈哈</div>
        <div :style="{color: finalColor,fontSize:'30px'}">哈哈哈哈</div>
        <div :style="{color: finalColor,'font-size': finalFontSize +'px'}">哈哈哈哈</div>
        
        <!-- 绑定data中属性 -->
        <div :style="finalStyle">hhhh</div>
        <!-- 调用方法 -->
        <div :style="getfinalStyle()">hhhh</div>
    </template>


data(){
            return{ 
               finalColor:'red',
               finalFontSize:50,
               finalStyle:{
                   'font-size':'50px',
                   fontWeight:700,
                   backgroundColor:'red'
               }
            }
        },
        methods:{
            getfinalStyle(){
                return {
                    'font-size':'50px',
                   fontWeight:700,
                   backgroundColor:'red'
                }
            }
        }

绑定style数组语法

 <div :style="[styleObj1,styleObj2]">hello111</div> 
 data(){
            return{ 
                styleObj1:{
                    color:'red',
                    fontSize:'50px',
                },
                styleObj2:{
                    textDecoration:'underline'
                }
            }
        },

动态绑定属性名称

 <div :[name]="value">
            哈哈哈
        </div>
       data(){
            return{ 
                name:'cba',
                value:'tom'
            }
        },  

直接绑定一个对象

<div v-bind="per">
            hahah 
 </div>
 <div :="per">123</div>
        return{ 
               per:{
                   name:'tom',
                   age:18,
                   height:180
               }
            }

v-on

v-on基本使用

<!-- v-on:监听事件="methods中的方法" -->
            <button v-on:click="btnclick">1</button>
            <div v-on:mousemove="mousemove">2</div>
            <!-- 语法糖 @监听事件="methods中的方法" -->
            <button @click="btnclick">1</button>
            <div @mousemove="mousemove">2</div>

            <!-- 绑定一个表达式 inline statement -->
            <button @click="count++">{{count}}</button>

            <!-- 绑定一个对象 -->
            <div @="{ click:btnclick,mousemove:mousemove}">
                666
            </div>
            <div v-on="{ click:btnclick,mousemove:mousemove}">
                666
            </div>
            data(){
            return{ 
                count:100
            }
        },
        methods:{
            btnclick(){
                alert('1')
            },
            mousemove(){
                console.log('123');
            },
        }

v-on参数传递

<button @click="btnclick('tom')">点击</button>
 btnclick(name){
                // 默认传入event
                console.log(event);
                console.log(name);
            }

v-on修饰符 阻止冒泡 enter监听

<div @click="divclick">
            <button @click.stop="btnclick">按钮</button> 
            <!-- 阻止冒泡 -->
        </div>
        <!-- 监听键盘 -->
        <input type="text " @keyup="keye">
        <!-- 只监听 enter -->
        <input type="text " @keyup.enter="keye">
methods:{
            divclick(){
                console.log('div');
            },
            btnclick(){
                console.log('btn');
            },
            keye(){
                console.log(event.target.value);
            }