标签：事件处理 Vue console name 修饰符 alert 提示信息 log

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>

标签：事件处理,Vue,console,name,修饰符,alert,提示信息,log
来源： https://blog.csdn.net/qq3559727/article/details/121402961

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。