谷粒商城day25 -Vue-指令-v-on、v-for、v-if 与按键修饰符与事件修饰符

1.v-on(可用@代替)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body >
        <div id = "app">
            <h1>我是{{name}} ,hello world！ {{num}}人为我点赞</h1>
            <input type = 'text' @click='func' v-model='num'>
            <button @click="num++" >点赞</button>
            <button @click="cance()" >取消</button>

        <div>
            <a v-bind:href="link" @click.stop>百度</a>
        </div>    
        </div>
       
        <script src="../node_modules/vue/dist/vue.js"></script>

        <script>
            let ap = new Vue({
                el:"#app",//绑定元素
                data:{//封装数据
                    name:'李白',
                    num:1
                },
                methods:{//封装方法
                    func(){
                        this.num++;
                    },
                    cance(){
                        // alert('取消了');
                        if(this.num > 0){
                            this.num--;
                        }
                      
                    }
                }
            })
        </script>
</body>
</html>

2.事件修饰符

 3.按键修饰符

全部按键别名如下

 例如按下下键num就减二

 按下alt+c

按下ctrl+鼠标左键

4.v-for

:key 用来做唯一标识符，区分不同数据，提高效率，当不确定时可以用index

5.v-if