How to implement click in vue-JS Tutorial-php.cn

How to implement click in vue

coldplay.xixi

Release： 2020-11-30 14:23:21

Original

5219 people have browsed it

How to implement click in vue: first create a new HTML code page; then create a [
] tag on this code page; then create a click event function; finally add a vue click event to the click button , and save the html code.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

How to implement click in vue:

1. Create a new html code page, and then create a <div># on this code page. ## tag, and add an id to the <div> tag at the same time as app, and then create a click button in this <div> tag. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div id="app"> <input type="button" value="点击我" /> </div></pre><div class="contentsignin">Copy after login</div></div></p>2. Introduce the vue.js file, create a <p><script><code> tag, and usenew Vue({}) in this tag to create an instance of vue change.
<script type="text/javascript" src="js/vue.js" ></script>
<script>
    var app = new Vue({
    el:"#app"
})
</script>
Copy after login
3. Create a click event function. Create a method to trigger the vue click event in the methods given on the vue official website (in the case, an alert popup pops up when the click event is triggered).
methods:{
    test:function(){ //vue的点击触发事件
        alert("完成vue的点击事件")
    }
}
Copy after login
4. Add a vue click event to the click button. Just add
@click="test" in the click button label.
<div id="app">
    <input type="button" value="点击我" @click="test"/>
</div>
Copy after login
5. Save the html code, and then open it with a browser. Click the button event on the browser page. At this time, you can see an alert pop-up box pop up on the browser, indicating that the vue click event has been successfully executed.
All codes:
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>vue点击事件</title>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="点击我" @click="test" />
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                methods: {
                    test: function() { //vue的点击触发事件
                        alert("完成vue的点击事件")
                    }
                }
            })
        </script>
    </body>
</html>
Copy after login
Related free learning recommendations:
JavaScript (video)