본문 바로가기

분류 전체보기345

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 + ' .. 2024. 3. 30.
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.. 2024. 3. 30.
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... 2024. 3. 30.
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.. 2024. 3. 30.
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.. 2024. 3. 30.
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.. 2024. 3. 19.

티스토리툴바