Vue

Vue事件处理

2021年7月3日 /

一 事件处理概念

简单理解就是，触发了某个事件：点击button按钮、键盘键入、点击鼠标等，从而有对应的时间触发。

二 官网样例程序

https://vuejs.org/v2/guide/events.html

1 点击按钮的监听事件

这里，用v-on绑定到click事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4-事件处理</title>
        <!-- 注意，这里，把官方的Vue.js文件下载到本地了，和当前HTML文件在同一个路径下
         进而，通过这种方式引入Vue.js-->
        <script src="vue.js"></script>
    </head>

    <body>
        <div id="shijianchuli">
            <button type="button" v-on:click=" counter += 1">Add 1</button>
            <p>The button above has been clicked {{counter}} times.</p>
        </div>

        <script type="text/javascript">
            let app=new Vue({
                el:"#shijianchuli",
                data:{
                    counter:0
                }
            })
        </script>
    </body>
</html>
2 事件处理方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4事件处理2</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="shijianchuli2">
            <!-- 这里的greet是下面定义放方法名 -->
            <button type="button" v-on:click="greet">Greet</button>
        </div>

        <script>
         let app=new Vue({
             el:"#shijianchuli2",
             data:{
                 name:"Vue.jsssss."
             },
             // 在 `methods` 对象中定义方法
             methods:{
                 greet:function(event){
                     // 可以单独alert，
                     alert("Haaaaaaa.");
                     // 这里的this表示当前的Vue实例，
                     // `this` 在方法里指向当前 Vue 实例
                     alert("Heelo Vue  "+this.name);
                // `event` 是原生 DOM 事件
                 if(event){
                     alert(event.target.tagName);
                 }
                 }
             }
         })
        </script>

    </body>
</html>
3 内联处理器方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4内联处理器方法</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="neilian">
            <button type="button" v-on:click="say('hi')">say hi</button><br>
            <button type="button" v-on:click="say('hello')">say hello</button>
        </div>

        <script type="text/javascript">
                let app = new Vue({
                    el:"#neilian",
                    methods:{
                        say:function xxx(what){
                            alert(what);
                        }
                    }
                })
        </script>
    </body>
</html>

注意：这里的内联方法，有好几种写法都适用。

写法1：

methods:{
say(what){
alert(what);
}
}

写法2：

methods:{
say:function (what){
alert(what);
}
}

写法3：

methods:{
say:function xxx(what){
alert(what);
}
}

4 添加1个内联处理器方法

该方法，阻止某些事件发生，比如阻止form提交。

注意：第二个button不生效，其原因是它的id=”example-4″并没有和ViewModel绑定在一起。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4内联处理器方法</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="neilian">
            <button type="button" v-on:click="say('hi')">say hi</button><br>
            <button type="button" v-on:click="say('hello')">say hello</button>
            <button type="button" v-on:click="warn('Forn cant be submitted yet.',$event)">warn</button>    
        </div>

        <div id="example-4">
            <button type="button" v-on:click="warn('Forn cant be submitted yet.',$event)">warn</button>
        </div>

        <script type="text/javascript">
                let app = new Vue({
                    el:"#neilian",
                    methods:{
                        say(what){
                            alert(what);
                        },
                        warn:function(message,event){
                            if(event){
                                event.preventDefault()
                            }
                            alert(message);
                        }
                    }
                })      
        </script>
    </body>
</html>

三 小结

暂无。

先跟着官方文档，一点儿一点儿写例子程序。先把官网的例子都跟一遍再说。可能这本身就是一个比较不错的学习Vue的方法。再加上手头上有公司的一个项目，正好用到前后端分离，前端用Vue，边学边写边用。看看学到的东西能否套到公司的项目上，如果能套上，现学现用，效果应该会不错。

Post Views: 1,618

留言