WEB Developer (16) 썸네일형 리스트형 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.. 01. BASIC VUE JS - Mustache, v-bind 기본 HTML DOCTYPE html> Vue Basics Vue Course Goals {{ outputGoal() }} My Course Goal {{ outputGoal() }} {{ Math.random() }} Learn more about Vue. app.js - section id = user-goal에 mount하여 Mustache 로 outputGoal()과 Math.random, vueLink를 클릭할 수 있는 링크 제공 v-bind를 활용하여 VueLink 를 클릭하여 연결 Vue.createApp의 data()와 method 사용 방법 const app = Vue.createApp({ data() { return { courseGoalA: 'Finish the course and l.. 16. 기본 탐색 스타일링 및 반응형 웹사이트 설정 header에 대한 기본 스타일링을 하기 위하여 header와 div에 id를 설정 IVE 모바일에서 사용을 위해 반응형으로 만들어주기 위해 네비게이션 바에도 햄버거 버튼을 만들어줌 모바일 메뉴의 각 메뉴 기능을 추가로 구성하게 되면 복잡해짐으로 기본 메뉴를 ~~ 사이에 구성을 직접하지 않고 nav-items.ejs를 별도로 만들어 include 구성함 Shop Cart Orders Manage Products Manage Orders Signup Login Logout 스타일링을 위하여 navigation.css를 만들어 CSS 작성 #main-header { width: 100%; max-width: 60rem; height: 5rem; margin: 0 auto; padding: 0 var(--sp.. 이전 1 2 다음
