WEB Developer/Vue JS15 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. 이전 1 2 3 다음
