Vue.js : 템플릿 구문과 인스턴스가 함께 작동하는 방법

Vue.js : 템플릿 구문과 인스턴스가 함께 작동하는 방법

 

HTML 코드

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
	<p>{{ sayHello() }}</p>
</div>

 

SCRIPT 코드

new Vue({
	el: '#app',
	data: {
		title: 'Hello World!'
	},
  methods:{
  	sayHello: function(){
    	return 'Hello!';
    }
  }
})

 

결과

 

vue 인스턴스의 데이터 필드에 저장된 단일 속성을 출력하는 방법을 보았습니다. 이것은 vue 인스턴스에 저장된 데이터는 데이터 속성과 같이 중요합니다.

제목은 템플릿에서 이와 같이 출력 될 수 있습니다. this.title을 쓸 필요가 없으며 데이터 객체의 모든 속성에 액세스 할 수 있습니다. 이를 염두에 두는 것이 중요합니다.

물론 출력해야 합니다. vue 인스턴스에 수동으로 액세스하거나 액세스 할 변수에 저장하지 않기 때문에 매우 쉽습니다. 모든 것이 뒤에서 동작합니다.

데이터 객체의 모든 속성에 액세스 할 수 있습니다. 데이터 객체뿐만 아니라 이 과정의 첫 번째 모듈에서 이미 본 메소드 키를 다시 도입하면 이 vuejs 인스턴스의 메소드를 저장할 수 있습니다. 여기에서 새 메소드를 만들 수 있으며 여기에서 sayHello라는 이름을 지정합니다.

이제 sayHello는 함수이며 hello를 반환합니다. 그래서 그것은 문자열을 반환합니다. 그래서 위와 같이 실행할 수 있습니다. 여기서 괄호를 잊으면 안됩니다.

이것은 vuejs가 템플릿을 렌더링 할 때마다 여전히이 중괄호 구문을 구문 분석하고 함수를 실행한다는 것입니다 이제 다시 업데이트하고 명확하게 볼 수 있습니다.

Hello! 이는 실행하는 사이에 함수가 동작하는 것으로 알 수 있습니다.  중괄호, 즉 중요한 것은 dom에서 출력 할 수있는 것을 반환하므로 기본적으로 문자열로 변환 할 수 있습니다.

복잡한 객체가 없거나 반환 값이 전혀 없으면 문자열로 변환 할 수 있어야 하며 이와 같은 함수를 호출하는 것이 좋습니다. 두 번째로 중요한 것은, 분명히 알 수 있듯이, sayHello에 액세스하고 있습니다.

methods property을 사용하기 전에, methods property 없이, 이름을 입력하여 데이터에 저장된 모든 것에 접근 할 수 있을 뿐 만 아니라 methods property에 저장된 모든 것에 접근 할 수 있는 것을 알 수 있었습니다. 

이전 포스팅을 참조해주세요.