뷰인스턴스 template 사용

vue.js이용 웹페이지필요기능만들때 기본적으로 생성하는객체

new vue를 이용해서 생성 = 뷰인스턴스

new Vue({

 el엘리먼트약자

data 값을 묶어둠

})

 

변수담아서 사용가능

const vm = new Vue({

})

 

vm은 vue모델약자

 

template 속성

vue화면 표시할 dir h3같은 html요소 스타일설정

문자열로 작성하기

data값 쓰고 싶다면 ` `(백틱)으로 사용

문자열이요소""로 사용가능

div메세지 값 담을수있도록

template : `<P>백틱사용</P>`

               "문자열사용"

 

html

 <div id="app">
   <p>{{msg}}</p>
 </div>

 

js template사용안했을때

   new Vue({
            el : "#app",
            data : {
                msg : "data에서의 텍스트입니다"
            }
        })

 

 

 

template 사용안했을때

 

 

 

js template사용했을때

   new Vue({
            el : "#app",
            data : {
                msg : "data에서의 텍스트입니다"
            },
            template : //div와 바꿈 vue안에서 해서 인스턴스
                `<div>
                <p>template로 작성된p요소입니다</p>
                <p>{{msg}}</p>
                </div>
                `
        })

 

template안에 태그사용하고 싶다면 ` ` (백틱)을 사용해주어야한다 

나는 data처럼 {} 를 적어줘야한다고 생각했는데 적으면 나오지 않는다... 

그냥 template : 넣을값 을 해주면된다

html 태그를 지워주고 template만 출력된다

 

 

 

template 사용했을때

 

 

 

 

template에서 <p>{{msg}}</p>제거했을때

   new Vue({
            el : "#app",
            data : {
                msg : "data에서의 텍스트입니다"
            },
            template : //div와 바꿈 vue안에서 해서 인스턴스
                `<div>
                <p>template로 작성된p요소입니다</p>
                </div>
                `
        })

 

원래 html에있던

 <div id="app">
   <p>{{msg}}</p>
 </div>

위의 태그를 지워주고 template만 출력된다 헷갈릴까봐 적었다

 

 

 

msg 제거