Instance Methods /Events

447 阅读1分钟

image.png 当handle后面的括号去掉时,就会出现上面的情况。

  <title>Instance Methods Events</title>
</head>
<body>
    <div id="app">
        点击次数:{{count}}
        <button @click="handle()">点击我每次加1</button>
        <button @click="handle(8)">点击我每次加8</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
 <script>
        var app = new Vue({
            el:"#app",
            data:{
                count:0
            },
            methods:{
                handle:function(count){
                    count = count || 1;//如果传count就是count,没有就默认是1
                    this.count += count;

                }
            }
        })
    </
    script>

如果方法中有参数,但是没有加括号,默认传原生事件对象

修饰符

阻止向上冒泡

<body>
    <div id="app">
    <div @click="divClick" style="height:100px;width:100px; background-color:brown;">
        <button @click.stop="btnClick">点击我</button>

    </div>
        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
               divClick:function(){
                   alert('div被点击了')
               },
               btnClick:function(){
                   alert('BUTTON被点击了')
               }

                }
            
        })
    </script>

image.png 点击button时,div也是那块区域,是向上冒泡了,一块都有反应; 加上一个stop,则点击button和div就会分开了。

prevent的用法

每次提交整个页面都会重新加载,则反应速度会变慢

提交表单 现在不让她刷新整个页面,只刷新提交的部分:

提交表单
hangle:function(){ alert('不刷新了') } ### self:只作用在元素本身,而非子元素; once:店家按钮只执行一次的方法: 执行无数次 加了once只执行一次 ### 监听键盘事件 submitMe:function(){ alert('您按下了enter键盘')}