[vue.js] @click과 v-on : click Vuejs의 차이점

Program / 글쓴이

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

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

누군가 사용 :

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

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

답변

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

v- 접두사는 템플릿에서 Vue 관련 속성을 식별하기위한 시각적 신호 역할을합니다. 이것은 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 지원 브라우저에서 올바르게 구문 분석 할 수 있습니다. 또한 최종 렌더링 된 마크 업에는 나타나지 않습니다. 속기 구문은 전적으로 선택 사항이지만 나중에 사용법에 대해 자세히 알아볼 때 유용 할 것입니다.

출처 : 공식 문서 .

답변