Vue.js의 확장 옵션과 구분 기호 옵션 간의 차이점 비교
Jul 18, 2017 pm 04:46 PM이 글에서는 주로 Vue.js의 확장 옵션과 구분 기호 옵션 비교 관련 정보를 소개합니다. 필요한 친구들은
Vue.js의 확장 옵션과 구분 기호 옵션 비교
extend 옵션
을 참고하세요.Vue.extend를 사용하지 않고 다른 구성요소(간단한 옵션 객체 또는 생성자일 수 있음)를 확장하도록 선언을 허용합니다. 이는 주로 단일 파일 구성요소의 확장을 용이하게 하기 위한 것입니다. 이는 mixins
<p id="app"> {{num}} <button @click="add">addNumber</button> </p> <script type="text/javascript"> var extendsObj = { updated: function() { console.log("extend updated"); } }; new Vue({ el: "#app", data: { num : 1 }, methods : { add : function() { console.log("原生 add"); this.num++; } }, updated : function(){ console.log('原生updated'); }, extends : extendsObj, }); </script>
위의 코드는 확장 업데이트되었으며 실행 결과는 다음과 같습니다.
확장 업데이트가 먼저 실행되는 것을 볼 수 있으므로 확장 메서드를 보면 다음 부분만 다릅니다
var extendsObj = { updated: function() { console.log("extend updated"); }, methods : { add : function() { console.log("extend add"); } } };
실제로 실행 결과는 위 그림과 같습니다. 즉, 메소드의 경우 이름이 같은 함수가 있으면 확장되지 않은 함수가 실행됩니다. 이름이 확장되면 확장된 항목에 따라 구분 기호 옵션이 실행됩니다
구분 기호 옵션
보간을 쓰는 기본 방법은 {{}}이지만 경우에 따라 다음과 같은 다른 방법을 사용해야 합니다. 이 ${}
<p id="app"> ${num} <button @click="add">addNumber</button> </p>
new Vue({ el: "#app", data: { num : 1 }, methods : { add : function() { console.log("原生 add"); this.num++; } }, delimiters: ['${', '}'] });
참고: delimiters해당 배열입니다
위 내용은 Vue.js의 확장 옵션과 구분 기호 옵션 간의 차이점 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
