해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면
Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기
Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을
사용합니다.
*렌더링: HTML로 입력받아 해석하고 화면에 표시해주는 것.
수학 분야에선 알려진 데이터 지점의 고립점 내에서 새로운 데이터 지점을 구성하는 방식이라고 일컫는다.
<p> 메시지: {{message}} </p>
데이터 바인딩의 가장 기본 형태는 “Mustache(수염)” 구문 {} 을 사용한 텍스트 보간입니다.
{{message}} 는 vue 인스턴스의 data 객체의 message 속성 값으로 대체 되고 갑싱 변경될 때마다 갱신 됩니다.
<p v-once>메시지: {{message}} </p>
v-once 디렉티브를 사용하게되면 데이터 변경 시 업데이트가 되지 않는 일회성 보간으로 수행함.
※ 주의사항
같은 노드의 바인딩에도 영향을 미친다는 점을 유의 해야한다.
<div id="app">
<textarea v-once>{{value.a}}</textarea>
<textarea>{{value.b}}</textarea>
<div v-once>
<textarea>{{value.a}}</textarea>
<textarea>{{value.b}}</textarea>
</div>
<button @click="change1">
값 변경1
</button>
<button @click="change2">
값 변경2
</button>
</div>
new Vue({
el: '#app',
data: {
a:1,
b:1,
},
methods:{
change1(){
this.a+=1;
},
change2(){
this.b+=1;
},
}
})
참고: https://jsfiddle.net/qudcks0703/y1zef7or/60/
위 페이지에 각각의 textarea에 v-once를 사용할 경우는 사용 된 곳만 업데이트가 되지 않지만
div로 묶여있는 같은 레벨의 자식노드 textarea는 둘다 값이 변경되지 않는다.
++추가로 템플릿 문법 {{}}은 HTML 속성에서는 사용할 수 없습니다.
또한 boolean 타입의 v-bind 디렉터리를 사용할 때 존재하지 않는 null,undefined 속성을 사용하게 되면
false로서 인식됩니다.
참고: https://jsfiddle.net/qudcks0703/y1zef7or/64/
++추가로 템플릿 문법{{}} 내에서는 javascript 함수를 사용할 수 있습니다. 단 구문은 사용 X 표현식 O
// 아래의 식들은 구문식입니다.
{{ var a = 1 }}
//조건문을 사용하기 위해선 아래와 같이
//삼항연산자 표현식을 사용해야합니다.
{{ if (ok) { return message } }} // X
{{ ok ? message : false }} // O
*구문= 컴퓨터에게 계산의 결과를 어디에 저장할 것인지에 대해서 정의하는 것
*표현식= 계산의 결과를 표현하는 것
이전에 살펴보았던 v- 접두사가 있는 것들은 표현식의 값이 변경될 때 반응적으로 DOM에 적용합니다.
<p v-if="check"> 보임.</p>
v- if인 경우 check가 boolean 타입일 경우 DOM 객체인 엘리먼트<p>는 제거(false) 또는 삽입(true) 됩니다
<a v-bind:href="url">뚝딱이의 홈페이지</a>
<a v-on:click="action">접속버튼</a>
v-bind는 :라는 콜론을 통해 HTML 기본 속성인 href와 click이라는 속성에 반응적으로 갱신할 수 있습니다.
v-bind:는 기본적으로 어떤 값을 전달인자로 받지만, v-on:은 어떤 이벤트를 받습니다.
*v-bind:는 return 값을 반환하는 함수를 받지만, v-on:은 이벤트 함수를 받습니다. ( 전달인자 () << 를 주의하세요.)
참고:https://jsfiddle.net/qudcks0703/y1zef7or/72/
Vue 2.6.0 버전부터는 HTML 속성 또한 동적인 바인딩이 가능해졌습니다.
*[]를 사용하여 HTML 속성또한 동적으로 바인딩 가능함 , null 사용시 바인딩 제거
참고: https://jsfiddle.net/qudcks0703/y1zef7or/75/
[Vue.js] 7. HTML 클래스,스타일 바인딩에 대한 이해와 예제 (0) | 2020.07.16 |
---|---|
[Vue.js] 6. computed 와 watch에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 4. Vue 인스턴스 라이프사이클(생명주기) (0) | 2020.07.15 |
[Vue.js] 3. Vue 인스턴스의 속성과 메소드 그리고 기초 (0) | 2020.07.15 |
[Vue.js] 2. 컴포넌트(props,template)에 대한 이해와 예제 (0) | 2020.07.15 |
댓글 영역