@click 및 v-on : click Vuejs와의 차이점

@click 및 v-on : click Vuejs와의 차이점

---

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

<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 지원 브라우저에서 올바르게 구문 분석 할 수 있습니다. 또한 최종 렌더링 된 마크 업에는 나타나지 않습니다. 속기 구문은 전적으로 선택 사항이지만 나중에 사용법에 대해 자세히 알아볼 때 유용 할 것입니다.

출처 : 공식 문서 .

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