@click과 v-on의 차이:Vuejs 클릭

@click과 v-on의 차이:Vuejs 클릭

질문은 충분히 명확해야 한다.

하지만 나는 누군가가 다음을 사용한다는 것을 알 수 있다.

<button @click="function()">press</button>

다른 사용자가 사용:

<button v-on:click="function()">press</button>

그러나 정말로 그 둘의 차이점은 무엇인가 (존재한다면)

둘 사이에는 차이가 없고, 하나는 두 번째의 속기에 불과하다.

v- 접두사는 템플릿에서 Vue 관련 특성을 식별하는 시각적 신호 역할을 한다.이는 기존 마크업(markup)에 동적 동작을 적용하기 위해 Vue.js를 사용할 때 유용하지만 자주 사용되는 일부 지시사항에 대해 장황하게 느낄 수 있다.동시에 Vue.js가 모든 템플릿을 관리하는 SPA를 구축할 때 v- 접두사의 필요성이 줄어들게 된다.

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

출처: 공식 문서.

v-bind그리고v-onvuejs html 템플릿에서 자주 사용되는 두 가지 지시문이다.그래서 그들은 두 사람 모두에게 다음과 같은 속기법을 제공했다.

교체할 수 있음v-on:와 함께@

v-on:click='someFunction'

다음과 같이.

@click='someFunction'

다른 예:

v-on:keyup='someKeyUpFunction'

다음과 같이.

@keyup='someKeyUpFunction'

마찬가지로v-bind와 함께:

v-bind:href='var1'

다음과 같이 쓸 수 있다.

:href='var1'

도움이 되길 바래!

그것들은 일반 HTML과 약간 다르게 보일 수 있지만 :와 @는 속성 이름에 유효한 문자이고 모든 Vue.js가 지원하는 브라우저들은 그것을 정확하게 구문 분석할 수 있다.또한 최종 렌더링 마크업에는 나타나지 않는다.속기 구문은 전적으로 선택사항이지만, 나중에 그 용법에 대해 더 많이 알게 될 때 당신은 그것을 감사하게 될 것이다.

출처: 공식 문서.

참조URL: https://stackoverflow.com/questions/45369553/difference-between-click-and-v-onclick-vuejs