> 웹 프론트엔드 > JS 튜토리얼 > Vue.js의 확장 옵션과 구분 기호 옵션 간의 차이점 비교

Vue.js의 확장 옵션과 구분 기호 옵션 간의 차이점 비교

黄舟
풀어 주다: 2017-07-18 16:46:19
원래의
1636명이 탐색했습니다.

이 글에서는 주로 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(&#39;原生updated&#39;);
    },
    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: [&#39;${&#39;, &#39;}&#39;]
  });
로그인 후 복사

참고: delimiters해당 배열입니다

위 내용은 Vue.js의 확장 옵션과 구분 기호 옵션 간의 차이점 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿