Vue 템플릿에서 'this'를 사용하시겠습니까?

Vue 템플릿에서 'this'를 사용하시겠습니까?

머릿속이 복잡하다:왜 우리가 사용할 수 있는 장소가 보이는지 모르겠다thisVue.js 템플릿에 있습니다.이제 어떤 걸 써야 할지 모르겠어요.

여기서 몇 가지 사례를 테스트합니다.

new Vue({
  el: "#app",
  data: function() {
  	return {
    	myVar: 'test'
    }
  },
  methods: {
    returnText: function() {
    	console.log('methods returnText !');
      return 'return text from methods !';
    }
  },
  computed: {
    computedProp: function() {
    	return 'computed !';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">

  {{ this.myVar }}<br><!-- this works -->
  {{ myVar }}<br><!-- this works -->
  <button @click="myVar = 'test without this !'" type="button">
          Change text</button><!-- this works --><br>

  <button @click="this.myVar = 'test with this !'" type="button">
          Change text (not working because of 'this')</button><!-- this NOT works -->
  <br><br>
  
  {{ computedProp }} <!-- this works -->
  <br>
  {{ this.computedProp }} <!-- this works -->
  
  <br><br>
  {{ returnText() }} <!-- this works -->
  <br>
  {{ this.returnText() }} <!-- this works -->
</div>

권장사항은 무엇입니까?

템플릿에서는 사용할 필요가 없습니다.this, 를 사용합니다.this와 같은 기능으로mounted(),created(), 또는 인methods, 등. 이 컨텍스트에서는 모든 라이프 사이클훅이 호출되어 호출되는 Vue 인스턴스를 가리키고 있습니다.

https://vuejs.org/v2/guide/instance.html

v-bind는 js 네이티브 'bind' 함수와 같이 기능한다고 생각합니다.예를 들어 함수를 다른 오브젝트에 바인드합니다(다른 경우에는 Vue 인스턴스).

언급URL : https://stackoverflow.com/questions/43188317/use-this-in-vue-template