분류 전체보기 (345) 썸네일형 리스트형 computed 속성 사용: Dynamic Styling (Click 시 색상 변화) computed 속성을 사용하여 적용이 가능하다. DOCTYPE html> Vue Basics Vue Dynamic Styling 아래는 app.js 코드 const app = Vue.createApp({ data() { return { boxASelected: false, boxBSelected: false, boxCSelected: false }; }, computed: { boxAClasses () { return { active: this.boxASelected }; }, boxBClasses () { return { active: this.boxBSelected }; }, boxCClasses () { return { active: this.boxCSelected }; }, }, methods:.. v-bind 사용 - Dynamic Styling (Click 시 색상 변화) DOCTYPE html> Vue Basics Vue Dynamic Styling :class="{active: boxASelected}" 에서 boxASelected가 true이면 class=active, false이면 active가 제거됨 CSS에서 아래 속성을 추가하였으므로 class가 active가 되면 아래 CSS 속성이 동적으로 추가됨. . active { border-color: red; background-color: salmon; } Toggle 동작을 위해 아래와 같이 구현함. const app = Vue.createApp({ data() { return { boxASelected: false, boxBSelected: false, boxCSelected: false }; }, metho.. 08. v-bind and v-on shorthands v-on 기능을 @으로 변경 가능하다 [원본.] Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ fullname }} [변경] Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ fullname }} @click.right도 가능하다. v-bind도 가능하다 아래처럼 :value로 변경이 가능하다. Methods vs Computed vs Watch Methods Computed Watch Use with event binding OR data binding Use with data binding Not used directly in template Data binding: Method is executed for every “re-render” cycle of the component Computed properties are only re-evaluated if one of their “used values” changed Allows you ro run any code in reaction to some changed data (e.g. send Http request etc.) Use for events or data that really n.. 07. Watcher Watcher도 computed와 유사하게 변경되는 값만 보고 처리할 수 있다 하지만 구성상 항목별로 다 코드를 작성해야 한다. data() { return { counter: 0, name: '', lastName: '' }; }, data()에 name과 lastName이 있다고 하면 아래와 같이 watch는 구현해야 한다. watch: { // data나 compute에 있는 속성에 사용한 이름을 메서드로 사용 (충돌 안남) // name이 바뀔때마다 watch의 name이 Vue에 의해 자동 실행. counter, fullname 가능 name(value) { if ( value === '' ) { this.fullname = ''; } else { this.fullname = value + ' .. 06. Computed Properties DOCTYPE html> Vue Basics Vue Events Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ outputFullname() }} 여기서 outpuFullname은 methods로 정의되어 있음 이럴 경우 다른 이벤트 v-on:click 등으로 인해 계속 호출이 발생 성능에 안좋은 영향이 있을 수있어 이럴 경우 computed 라는 속성을 정의하여 구성 const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, computed: { fullname() { console.log("computed"); if (this.n.. 05. USING-THE-NATIVE-EVENT: v-model DOCTYPE html> Vue Basics Vue Events Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ name }} app.js 에서는 name에 input하는 method를 만들지 않았음에도 v-model="name"을 통해 input type=text v-model="name"을 통해 inputtyp에 typing 하는 글자가 바로 {{ name }}에 보이도록 해줌 v-model은 양방향 native method const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { add(num) { this... 03. Event - v-on:click, v-once, v-on:input, v-on:keyup.enter html - v-on:click을 사용하여 click event에서 수행해야 하는 method를 호출함 v-on:click="add(10)"과 v-on:click="reduce(5)를 호출 각 함수에서 counter의 값을 변경하면 즉시 반영됨 v-once는 최초 반영 된 이후 그 이후 반영안되는 설정 v-on:keyup.enter는 enter keyup 이후 반영되는 method를 정의, 즉 enter 전까지 이벤트가 반영되지 않음. DOCTYPE html> Vue Basics Vue Events Events in Action Add 10 Reduce 5 Starting Counter: {{ counter }} Result: {{ counter }} Your Name: {{ name }} Sign Up.. 이전 1 2 3 4 5 ··· 44 다음
