Vue.JS 2 Tutorial #3 - Data & Methods > JS프레임워크

JS프레임워크

Vue.JS 2 Tutorial #3 - Data & Methods 정보

Vue Vue.JS 2 Tutorial #3 - Data & Methods

본문

https://www.udemy.com/build-web-apps-with-vuejs-firebase/ 도 구매해 달라고 하네요..

 

쿠폰코드는 NINJAYT18 이라고 합니다.

 

Data & Methods

 

app.js에 job: 'Ninja'를 추가하고..

 

index.html에.

p<tab>Job : {{ job 입력하시고..

 

h1 두개를 p로 변경하는 것은 h1 click 하고 ctrl+d 한번더 ctrl+d 하고 p 를 입력

 

<div id="vue-app">

<p>Name: {{ name }}</p>

<p>Job : {{ job }}</p>

</div>

 

ctrl+s 로 저장

 

app.js에 Methods를 만들어 봅니다.

 

methods: {

    greet: function() {

        return 'Good Morning'

    }

}

 

index.html에

 

<h1>{{ greet() }}</h1>

 

greet() 안에 파라미터를 넘기는 방법은

 

greet('afternoon') 으로 하고..

 

app.js 함수에서 파라미터를 받아서 처리하는 식으로..

 

greet: function(time) {

    return 'Good ' + time;

}

 

Good night 이름으로 하기 위해서는

 

함수 안에서 data를 억세스해야 된다고..  

 

this.data.name 인데..  this.name으로 사용한다고 합니다. this.job..

 

return 'Good ' + time + ' ' + this.name;

 

div id와 app.js의 el 과 매칭되는 곳만 vue가 적용된다고 합니다.

 

https://github.com/iamshaunjp/vuejs-playlist/tree/lesson-3

 

 

 

 

 

 

 

 

 

추천
0
  • 복사

댓글 0개

© SIRSOFT
현재 페이지 제일 처음으로