뷰_데이터 출력 방식 ( v-bind, v-html,v-model)

Vue에 데이터 출력 방법 : Mustache, v-html , v-bind. 

<span>메세지 :{{ msg}}</span> // 템플릿을 컴파일하면서 데이터 값을 바인딩. 

 

v-html( xss의 위험 존재 ) 

<div v-html = "rawHtml"></div> //데이터의 값을 그대로 html형태로 바인딩. 

 

v-bind ( 속성명: id 등 ) 

<div v-bind: 속성명 = "데이터이름:A"></div> // 태그의 속성에 데이터를 바인딩 

// v-bind는 생략이 가능하다. 
// <a v-bind:href ="url> -> <a :href ="url> 

 

 

v-if : dom을 렌더링할지 안할지 여부를 결정. 

<h1 v-if = "??" > Yes  // ??가 true면 출력, 아니면 렌더링하지 않음. 

v-for = " item in items 로 쓴다. 

<button v-on: click =" " >  v-on = @이렇게 써도 된다. 

<input v-on:input = "typing" v-bind: value ="message" > 
만약 인풋의 속성이 타이핑이라면 즉시 message값을 바인딩해준다. 

* v-model은 input, textarea와 같은 태그에 양방향 바인딩.  
-> 걍 데이터 받아온 값 메세지를 바꿔준다.

 

 

module.exports를 vue 인스턴스 객체처럼 설정해줘야한다.  
module.exports= 
{ 
data : function() 
{ 
return { 
} 
} 
}