폼 입력 바인딩, 모델


https://ryuzuka.github.io/VUE/tutorial/05_form.html

  • v-model

폼 엘리먼트에 대한 양방향 데이터 바인딩 생성


input, textarea, select

<div id="app">
<input type="text" v-model="inputText">
<input type="radio" id="inputRadio" value="inputRadio" v-model="inputRadio"><label for="inputRadio">inputRadio</label>
<input type="checkbox" id="inputCheck" value="inputCheck" v-model="inputCheck"><label for="inputCheck">inputCheck</label>
<textarea v-model="textarea">textarea</textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
inputText: 'inputText',
inputRadio: 'inputRadio',
inputCheck: ['inputCheck'],
textarea: 'textarea'
}
});
</script>


  • v-on:input

IME (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않는다. input 이벤트를 대신 사용


  • 수식어

.lazy - v-model은 입력 이벤트 후 데이터를 동기화(IME는 제외). .lazy 수식어를 사용하여 change 이벤트 이후에 동기화 가능

.trim - .trim 수식어는 v-model에 사용자 입력 값이 trim 된 값을 바인딩하기 위해 사용 ( 초기값에 대해서는 적용되지 않음 )

.number - .number 수식어는 v-model에 사용자 입력이 숫자형으로 업데이트하기 위해 사용

<input type="text" v-model.lazy="lazy">
<input type="text" v-model.trim="trim">
<input type="text" v-model.number="number">

* 무조건 값이 number형으로 변환되진 않습니다. 첫 문자부터 Number형으로 변환 가능한 부분까지만 변환되고 그 뒤의 부분은 무시당한 채로 값이 업데이트 됩니다. 첫문자부터 변환할 수 없는 문자라면, string을 반환합니다.

저작자표시

'Vue' 카테고리의 다른 글

컴포넌트  (0) 2019.01.26
필터  (0) 2019.01.26
이벤트  (0) 2019.01.16
템플릿 문법, 디렉티브  (0) 2019.01.12
라이프사이클  (0) 2019.01.11

이벤트


https://ryuzuka.github.io/VUE/tutorial/04_event.html


  • v-on ( 이벤트 )

v-on:[이벤트]="자바스크립트 표현식"

이벤트 핸들러의 로직은 복잡하기 때문에 v-on에 JavaScript로 넘겨주기 어려움

v-on에 methods의 함수를 넘겨주는 형태로 구현

$event라는 인자를 methods의 함수에 넘겨주어 DOM 이벤트 객체를 사용

<div id="app">
<div>
<div>count: {{ count }}</div>
<button v-on:click="count++;">count++</button>
<button v-on:click="increaseCount">increaseCount;</button>
<button v-on:click="increaseCount( $event )">increaseCount( $event );</button>
</div>
</div>

<script>
new Vue({
el: '#app',
data: {
count: 0,
},
methods: {
increaseCount ( $event ) {
this.count++;                     // this -> Vue 인스턴스
console.log( $event );            // 네이티브 DOM 이벤트
}
}
});
</script>


  • 이벤트 전파와 버블링

버블링: 자식에서 이벤트가 발생하여 부모로 이벤트 전달

캡처링: 부모에서 이벤트가 발생하여 자식으로 이벤트 전달


  • 이벤트 수식어

capture: 이벤트 capturing 적용

stop: 이벤트 전파 중단 ( event.stopPropagation() )

self: event.target이 해당 엘리먼트일때 실행

prevent: 브라우저의 기본 동작 중지 ( event.preventDefault() )

once: 한번만 이벤트 발생

passive: 모바일 환경에서 성능향상에 도움이 되는 이벤트 수식어

              지정한 이벤트 핸들러에서 event.preventDefault() 를 호출하지 않는 다는 것을 브라우저에 알림

              v-on:scroll.passive="onscroll" ( passive와 prevent 함께 사용 금지. 패시브 핸들러는 기본 이벤트를 막지 않음 )


  • 키 수식어

키보드 이벤트를 수신할때 v-on에 대한 키 수식어 추가 ( 체이닝 가능 )

.enter

.tab

.delete ( “Delete” 와 “Backspace” 키 모두를 캡처 )

.esc

.space

.up


  • 시스템 수식어 ( 보조키 수식어 )

.ctrl ( 키보드 이벤트 )

.alt

.shift

.meta

.left ( 마우스 이벤트 )

.right

.middle

.exact  

<!-- Alt 또는 Shift와 함께 눌린 경우에도 실행됩니다. -->
<button @click.ctrl="onClick">A</button>

<!-- Ctrl 키만 눌려있을 때만 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다. -->
<button @click.exact="onClick">A</button>


  • 사용자 정의 키 수식어

ex) Vue.config.keyCodes.enter = 13;






저작자표시

'Vue' 카테고리의 다른 글

필터  (0) 2019.01.26
폼 입력 바인딩, 모델  (0) 2019.01.23
템플릿 문법, 디렉티브  (0) 2019.01.12
라이프사이클  (0) 2019.01.11
Vue 인스턴스  (0) 2019.01.09

템플릿 문법, 디렉티브

 

https://ryuzuka.github.io/VUE/tutorial/03_template.html

 

<div id="app">
<div>{{ msg }}</div> <!-- Mustache( 이중괄호 {{ }} ) -->
<div v-once>{{ msg }}</div>                 <!-- v-once ( 데이터 변경 시 업데이트 되지 않는 일회성 보간 수행 ) -->
<div v-text="msg"></div>                             <!-- v-text ( 문자열 그대로 표기 ) -->
<div v-html="msg"></div>                             <!-- v-html ( 문자열 html 적용 ) -->
<div><a v-bind:href="link">link</a></div>         <!-- v-bind ( html 속성에 Vue data 바인딩 ) -->
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello, <b style="color: red">Vue!</b>',
link: 'http://www.google.com'
}
});
</script>

<!-- JavaScript 표현식 사용 가능 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>


  • v-if
<div id="app">
<div v-if="isIf">v-if true</div> <!-- v-if -->
<div v-else-if="!isIf">v-if false</div> <!-- v-else-if -->
<div v-else="isIf">v-if else</div> <!-- v-else -->

<div v-show="isShow">v-show true</div> <!-- v-show -->

</div>
<script>
new Vue({
el: '#app',
data: {
isIf: true,
isShow: true
}
});
</script>


  • v-for

key - https://kr.vuejs.org/v2/guide/list.html#key

<div id="app">
<!-- array -->
<ul>
<li v-for="item in array">item: {{ item }}</li>
<!-- v-for ( array: item ) -->                          
</ul>
<ul>
   <li v-for="(item, index) in array">item: {{ item }}, index: {{ index }}</li>
<!-- v-for ( array: item, index ) -->
</ul>


<!-- object -->

<ul>
<li v-for="value in object">value: {{ value }}</li>
<!-- v-for ( object: value ) -->
</ul>
<ul>
<li v-for="(value, key) in object">key: {{ key }}, value: {{ value }}</li>
<!-- v-for ( object: value, key ) -->
</ul>
<ul>
<li v-for="(value, key, index) in object">key: {{ key }}, value: {{ value }}, index: {{ index }}</li>
<!-- v-for ( object: key, value, index ) -->
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
msg: 'Hello, <b style="color: red">Vue!</b>',
link: 'http://www.google.com',
target: '_blank',
isIf: true,
isShow: true,
array: ['a', 'b', 'c'],
object: {
a: 0,
b: 1,
c: 2
}
}
});
</script>

* 동일한 노드에 두가지 모두 있다면, v-for가 v-if보다 높은 우선순위를 갖는다. ( v-if: 루프가 반복될 때마다 실행 )


  • v-bind

Vue 인스턴스의 속성을 폼 엘리먼트 속성 값으로 동적 바인딩

<select v-model="select">
<option v-for="option in options" v-bind:value="option">{{ option }}</option>
</select>
<input type="checkbox" v-model="checkboxBind" v-bind:true-value="trueValue" v-bind:false-value="falseValue">
<input type="radio" v-model="radioBind" v-bind:value="radioData">


  • 약어
<!-- v-bind -->
<a v-bind:href="url"> ... </a>
<!-- 약어 -->
<a :href="url"> ... </a>

<!-- v-on -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->

<a @click="doSomething"> ... </a>


저작자표시

'Vue' 카테고리의 다른 글

폼 입력 바인딩, 모델  (0) 2019.01.23
이벤트  (0) 2019.01.16
라이프사이클  (0) 2019.01.11
Vue 인스턴스  (0) 2019.01.09
Vue CLI 3  (0) 2019.01.04

라이프사이클


https://ryuzuka.github.io/VUE/tutorial/02_lifeCycle.html

  • Vue life cycle

Create > Mount > Update > Destroy

new Vue({
// Create
beforeCreate () { console.log( 'beforeCreate: 인스턴스 생성 전 호출' ) },
created () { console.log( 'created: 인스턴스 생성 후 호출' ) },

// Mount
beforeMount () { console.log( 'beforeMount: 컴포넌트 DOM 추가 전 호출' ) },
mounted () { console.log( 'beforeMount: 컴포넌트 DOM 추가 후 호출' ) },

// Update
beforeUpdate () { console.log( 'beforeUpdate: data가 변경되어 DOM 렌더링 전 호출' ) },
updated () { console.log( 'updated: data가 변경되어 DOM 렌더링 후 호출' ) },

// Destroy
beforeDestroy () { console.log( 'beforeDestroy: 인스턴스 파괴 전 호출' ) },
destroyed () { console.log( 'destroyed: 인스턴스 파괴 후 호출' ) }
});


저작자표시

'Vue' 카테고리의 다른 글

폼 입력 바인딩, 모델  (0) 2019.01.23
이벤트  (0) 2019.01.16
템플릿 문법, 디렉티브  (0) 2019.01.12
Vue 인스턴스  (0) 2019.01.09
Vue CLI 3  (0) 2019.01.04

Vue 인스턴스


https://ryuzuka.github.io/VUE/tutorial/01_instance.html


new Vue 인스턴스 생성. ( vm 관행적 코딩 컨벤션 )

Vue 인스턴스를 생성 할 때, data, method, props 등 옵션 객체를 전달

new Vue({
el: '#app',
template: '',
data: {},
props: [], // {}
methods: {},
computed: {},
watch: {}
});


el ( string | HTMLElement )

대상이 되는 html element 또는 css selector ( vm.$el )


template ( string )

Vue 인스턴스의 마크업으로 사용할 문자열 템플릿


data ( Object | Function )

화면을 그리는데 사용하는 data 를 반환하는 함수 또는 data 객체 ( vm.$data )


props ( Array<string> | Object )

부모 컴포넌트로부터 전달 받은 property들의 Array 혹은 Object


methods ( [key: string]: Function )

Vue 인스턴스에서 사용되는 메소드. this 컨텍스트를 Vue 인스턴스에 바인딩


computed ( [key: string]: Function | { get: Function, set: Function } )

계산된 속성. getter와 setter는 자동으로 this 컨텍스트를 Vue 인스턴스에 바인딩


watch ( [key: string]: string | Function | Object | Array )

감시된 속성. Vue 인스턴스에 데이터가 변경되는 시점에 호출


 options 속성이나 콜백에 created: () => console.log(this.a) 이나 vm.$watch('a', newValue => this.myMethod()) 와 같은 화살표 함수 사용을 지양하기 바랍니다. 화살표 함수들은 부모 컨텍스트에 바인딩되기 때문에, this 컨텍스트가 호출하는 Vue 인스턴스에서 사용할 경우 Uncaught TypeError: Cannot read property of undefined또는Uncaught TypeError: this.myMethod is not a function와 같은 오류가 발생하게 됩니다.



저작자표시

'Vue' 카테고리의 다른 글

폼 입력 바인딩, 모델  (0) 2019.01.23
이벤트  (0) 2019.01.16
템플릿 문법, 디렉티브  (0) 2019.01.12
라이프사이클  (0) 2019.01.11
Vue CLI 3  (0) 2019.01.04

티스토리툴바