[Vue.js] v-on의 작법 요약[초보자를 위한]

8280 단어 macOSCatalinaVue.js초보자

입문


Vue.js의 v-on 작법의 변주곡이 많기 때문에 정리하기 위해 정리했습니다.
위에서 순서대로 읽으면 하나하나 달라진다.
참조: Vue.공식 문서

이 기사가 유용한 사람

  • Vue.js 초보자

    • 이 문장의 장점

  • v-on의 작법 변화

    • 환경

    - macOS Catalina 10.15.1
- Vue.js: 2.6.10

    전제 조건


    버튼을 누르면 화면의 숫자가 1만 추가되는 프로그램을 예로 들 수 있다.
    디렉토리 구성
    count
├ index.html
└ main.js

    기본 문법


    index.html
    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Count App</title>
  </head>
  <body>
<!-- 以後ここから -->
    <div id="app"> 
      <button v-on:click=" n++ ">Count</button>
      <p>{{ n }}</p>
    </div>
<!-- ここまでで記載 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>
    main.js
    var app = new Vue({
    el: '#app',
    data: {
        n: 0
    },
// 以後ここから
    methods: {
    }
// ここまでで記載
})

    줄임말


    이후 단축 형식으로 기재 v-on:click = > @click.
    index.html
        <div id="app"> 
      <button @click=" n++ ">Count</button>
      <p>{{ n }}</p>
    </div>

    전달 방법


    원래 공식은 html 쪽에 직접 기재되어 있다.
    앞으로의 일을 고려하여 방법으로 바꾸다.
    index.html
        <div id="app">
      <button @click="countUp">Count</button>
      <p>{{ n }}</p>
    </div>
    main.js
        methods: {
        countUp: function() {
            this.n += 1
        }
    }
    그 중에서 this.n 참조data 중의 n.

    대역 파라미터를 전달하는 방법


    버튼을 누르면 경보가 발동됩니다.
    index.html
        <div id="app">
      <button @click="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
    main.js
        methods: {
        countUp: function(comment) {
            this.n += 1
            alert(comment)
        }
    }
    이 숫자는 돈인 것 같다($)!

    이벤트 한정자 사용


    기쁨은 단지 한순간이다.
    벌레가 무한정 돈을 쏟아낼 수 있는 좋은 이야기는 없기 때문에 버튼을 한 번만 눌러야 한다.
    index.html
        <div id="app">
      <button @click.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
    main.js
    変更なし

    키 사용


    (클릭 대신) 키를 눌러 수를 계산합니다.
    index.html
        <div id="app">
      <button @keyup.enter.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
    main.js
    変更なし

    키 사용


    방호를 더 강화하세요.Enter 키로 수를 계산한다.
    index.html
        <div id="app">
      <button @keyup.shift.enter.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
    main.js
    変更なし
    길어졌지만 그 이상이야!

    끝내다


    끝까지 읽어주셔서 감사합니다.
    기본이지만 여러 번 사용할 수 있는 지식이기 때문에 정리했습니다.
    누구에게 도움이 됐으면 좋겠어요

    참고로 사이트 (항상 감사합니다)

  • Vue.공식 문서
    • springboot rabbitmq 보충
    Google 크롬 확장 프로그램 빌드

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage