Vue.js의 확장 옵션과 구분 기호 옵션 간의 차이점 비교-JS 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-07-18 16:46:19

원래의

1630명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!