집 > 기사 > 웹 프론트엔드 > vue에서 클릭을 구현하는 방법

vue에서 클릭을 구현하는 방법

coldplay.xixi원래의: 2020-11-24 15:59:405192검색

vue에서 클릭을 구현하는 방법: 먼저 새 html 코드 페이지를 만든 다음 이 코드 페이지에 [
] 태그를 만든 다음 클릭 이벤트 기능을 만들고 클릭 버튼에 추가합니다. html 코드를 저장하세요.

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

vue에서 click 구현 방법:

1. 새 HTML 코드 페이지를 만든 다음 이 코드 페이지에 <div> 태그를 만들고 동시에 이 &lt를 만듭니다. ;div> 태그에 앱으로 ID를 추가한 다음 이 <div> 태그에 클릭 버튼을 만듭니다. <code><div>标签，同时个这个<div>标签添加一个id为app，然后在这个<div>标签里创建一个点击按钮。<pre class="brush:php;toolbar:false"><div id="app"> <input type="button" value="点击我" /> </div></pre><p>2、引入vue.js文件，创建一个<code><script></script>标签，在这个标签里面使用 new Vue({})进行vue的实例化。
<script type="text/javascript" src="js/vue.js" ></script>
<script>
    var app = new Vue({
    el:"#app"
})
</script>
3、创建点击事件函数。在vue官网给定的methods里面创建vue点击事件触发的方法（案例中创建点击事件触发时弹出一个alert弹出）。
methods:{
    test:function(){ //vue的点击触发事件
        alert("完成vue的点击事件")
    }
}
4、给点击按钮添加vue的点击事件。在点击按钮标签里面添加上@click="test"
<div id="app">
    <input type="button" value="点击我" @click="test"/>
</div>
2. vue.js 파일을 도입하고 <script></script> 태그를 생성한 다음 이 태그에 new Vue({})를 사용하여 vue를 인스턴스화합니다.
<!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>
3. 클릭 이벤트 기능을 만듭니다. vue 공식 홈페이지에서 제공하는 메소드에서 vue 클릭 이벤트를 발생시키는 메소드를 생성합니다. (이 경우 클릭 이벤트가 발생하면 경고 팝업이 뜹니다.)
rrreee4. 클릭 버튼에 vue 클릭 이벤트를 추가합니다. 클릭 버튼 라벨에 @click="test"를 추가하기만 하면 됩니다.
rrreee
5.html 코드를 저장한 후 브라우저로 열고, 브라우저 페이지에서 버튼 이벤트를 클릭하면 브라우저에 vue를 나타내는 경고 팝업 상자가 나타나는 것을 볼 수 있습니다. 클릭 이벤트가 성공적으로 실행되었습니다.

모든 코드:
rrreee
🎜관련 무료 학습 권장 사항: 🎜JavaScript🎜(동영상) 🎜🎜

위 내용은 vue에서 클릭을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!