Vue中的数据代理

事件处理

<div id="root">
        <h1>Hello {{name}}</h1>
        <button v-on:click="show1">点我提示信息1</button>
        <button @click="show2">点我提示信息(不传参)</button>
        <button @click="show3($event,66)">点我提示信息(传参)</button>
    </div>

    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'GZN'
                }
            },
            methods: {
                show1(){
                    alert('同学你好！')
                },
                show2(){
                    alert('同学你好！！')
                },
                show3(event,number){
                    console.log(event,number)
                    alert('33333')
                }
            },
        })
    </script>

事件修饰符

 <div id="root">
        <h1>Hello {{name}}</h1>
        <a href="http://163.com" @click.prevent="show" target="_blank" rel="noopener noreferrer">阻止默认事件</a>

        <div @click="show">
           <button @click.stop="show">阻止事件冒泡</button> 
        </div>

        <button @click.once="show">事件只触发一次</button>

        <div class="demo1" @click.capture="msg(1)">div1
            <div class="demo2" @click="msg(2)">div2</div>
        </div>

        <div @click.self="show">
            <button @click="show">点我提示信息</button>
        </div>

        <ul @scroll="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

    </div>

    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root',
            data(){
                return {
                    name:'GZN',
                }
            },
            methods: {
                show() {
                    alert('同学你好！')
                },
                msg(msg){
                    console.log(msg)
                },
                demo(){
                    console.log('@')
                }
            },
        })
        
    </script>