@click과 v-on : click Vuejs의 차이점

160

질문은 충분히 명확해야합니다 :). 그러나 누군가가 다음을 사용하는 것을 볼 수 있습니다.

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

누군가 사용 :

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

그러나 실제로 둘 사이의 차이점은 무엇입니까?

vue.js vuejs-directive

— 로렌조
소스

189

둘 사이에는 차이가 없습니다. 하나는 두 번째 줄임말입니다.

v- 접두사는 템플릿에서 Vue 관련 속성을 식별하기위한 시각적 신호 역할을합니다. 이것은 Vue.js를 사용하여 기존 마크 업에 동적 동작을 적용 할 때 유용하지만 자주 사용되는 지시문에 대해서는 자세하게 느낄 수 있습니다. 동시에 Vue.js가 모든 템플릿을 관리하는 SPA를 구축 할 때 v- 접두사의 필요성이 덜 중요해집니다.

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

출처 : 공식 문서 .

— 코발트 웨이
소스

1

@에 대한 Vue 커뮤니티 환경 설정이 있습니까? 아니면 v-on 사용에 대해 불평하는 것이 JetBrains 환경 설정입니까?

— Kimmo Hintikka

5

@KimmoHintikka 예, 바로 가기 (@)를 선호합니다. 규칙이 포함되어 strongly-recommended및 recommendedeslint - 플러그인 - VUE 프리셋. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/...

— Cobaltway

63

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'

그것이 도움이되기를 바랍니다!

— 니틴 쿠마르
소스

@LorenzoBerti이 답변은 어떻습니까. 더 이해하는 데 도움이 되었습니까?

— Nitin Kumar

대답은 아무것도 설명하지 않고 단지 1/3이 질문과 일치하지 않는 예를 제공합니다. 죄송합니다.

— Jakub Strebeyko

v-bind 및 v-on은 vuejs html 템플릿에서 자주 사용되는 두 가지 지시문입니다. 그래서 그들은 둘 다에 대한 속기 표기법을 제공했습니다. 이것이 이것이 질문을 설명한다고 생각합니다. 이것이 cues js documentation에 제공된 이유이기도합니다. :-)

— Nitin Kumar

문제는 4 개월 후 링크가없고 인용이없고 v- 바인드에 대한 콜론-속기를 던지고 실제로 혼란을 가중시킬 수 있다는 답변이 게시되었습니다.

— Jakub Strebeyko

2

일반적인 HTML과 약간 다르게 보일 수 있지만 : 및 @는 속성 이름에 유효한 문자이며 모든 Vue.js 지원 브라우저에서 올바르게 구문 분석 할 수 있습니다. 또한 최종 렌더링 된 마크 업에는 나타나지 않습니다. 속기 구문은 전적으로 선택 사항이지만 나중에 사용법에 대해 자세히 알아볼 때 유용 할 것입니다.

출처 : 공식 문서 .

— 달마
소스