좋은 습관은 아니지만 간단한 연습을 할 때는 꺼두는 것이 정신건강상 이롭다. vue.config.js에 아래 코드를 넣으면 된다 defineConfig의 인수 객체에 lintOnSave: false를 추가하자. const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, })
input창에 텍스트를 입력하면 '개발자'라는 문자열이 추가되어 화면에 렌더링되도록 코딩을 해놓은 상태이다. 그런데 해당 로직과 관련없는 버튼을 클릭했을때도 메서드가 실행이 되고 있다. 왜일까? 코드는 아래와 같다. HTML Vue Events Events in Action Add 10 Subtract 5 Result: {{ counter }} RESET Your Name: {{ outputFullname() }} JavaScript const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { outputFullname() { console.log('Add만 눌렀는데 Your Name 관련 메서드가 실행되네요? 잉?..
리렌더링되는 부분이 데이터가 변하는 부분만으로 한정되어있음을 볼 수 있다. vue의 내부 동작을 통해 반응형 데이터만 리렌더링 함으로써 효과적으로 브라우저 기능을 사용하고 있다. HTML Vue Events Events in Action Add 5 // 상수 5가 파라미터로 전달됨 Reduce 5 // 상수 5가 파라미터로 전달됨 Result: {{ counter }} // 이벤트객체가 파라미터로 전달됨 // 이벤트객체와 문자열이 파라미터로 전달됨 Name: {{ name }} Age & Gender: {{ ageGender }} 이벤트는 v-on: 으로 HTML 엘레먼트에 바인딩시킬 수 있다. 일단 이벤트 종류는 바닐라 자바스크립트와 같다. v-on:click="바인딩할메서드" 형태로 사용한다. 일단 ..
학습목적 CDN 방식을 통해 먼저 vue와 친숙해져보자. 기본이라 할 수 있는 Options API를 한번 사용해보자. index.html Vue Course Goals {{ courseGoal }} My Course Goal {{ courseGoal }} script를 통해 vue를 cdn으로 사용했다. (js는 defer 프로퍼티를 이용해 화면이 렌더링이 된 이후 실행이 되도록 한다.) body안의 {{ courseGoal }} 은 보간법(interpolation) 이라는 vue 특유의 데이터 바인딩 기법이다. html과 vue가 결합된 형태에서는 vue가 특수구문을 읽어들여 html을 다르게 파싱하게 한다. app.js const app = Vue.createApp({ data() { return ..
In Vue, mustaches are only used for text interpolation. To bind an attribute to a dynamic value, we use the v-bind directive: 뷰에서 머스태치 문법은 오직 텍스트를 껴넣을때만 사용한다. 어트리뷰트를 HTML에 추가하려면 v-bind 문법을 이용하면 된다. A directive is a special attribute that starts with the v- prefix. They are part of Vue's template syntax. Similar to text interpolations, directive values are JavaScript expressions that have access ..
{{`안녕 나는 ${num}DC야`}} 누르면 숫자 올라감 What you see in the editor is a Vue Single-File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. The core feature of Vue is declarative rendering: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScrip..
{{`안녕하세요. ${num}DC입니다.`}} 숫자UP What you see in the editor is a Vue Single-File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. The core feature of Vue is declarative rendering: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScript ..
What is Vue? (Vue는 무엇인가요?) Vue(발음은 view, 뷰로 하면 된다.)는 UI를 개발하는 자바스크립트 프레임워크이다. 뷰는 표준 HTML, CSS, JS를 기반으로 빌드(구축)되며, UI를 효율적으로 개발할 수 있도록 도와주는 선언형 프로그래밍(declarative) 및 컴포넌트 기반 프로그래밍 모델을 제공한다. 아래는 미니멀한 예시이다. import { createApp } from 'vue'; createApp({ data() { return { count: 0; } } }).mount('#app') Count is: {{ count }} 결과 : 위의 예시는 뷰의 두 가지 핵심 기능을 보여준다. Declarative Rendering (선언적 렌더링) - Vue extends ..
