나는 아직도 VUE가 잘 이해가 안간다. 도저히 이해를 할 수가 없는 언어다. 리액트같으면 양방향 컴포넌트를 구현할 때 그냥 state 변경 함수를 넘겨주어 간단하게 처리할 수 있는데 Vue에서는 이중 삼중으로, emit이란 문법을 이용해서 부모요소에 발생할 이벤트를 자식요소가 발생시켜 주어야 한다. 게다가 Props는 읽기 전용이라 직접 변경도 안된다. 그래서 computed라는 별도의 기능을 추가로 넣어주기도 해야한다. 아래는 양방향 컴포넌트 바인딩이다. 아래의 코드는 으레 SPA가 그렇듯 App.vue가 메인을 담당하고, MsgInput은 기능이 묶인 컴포넌트이며, BaseInput은 MsgInput의 Input 태그를 담당하는 shared 컴포넌트이다. 위의 코드들은 아래 기능 하나만을 위해 만들..
생기는 이유 (추측) vue3에서는 template 내 element가 하나여야할 이유가 없음. 하지만 한 폴더 내 vue 관련 프로젝트가 많을 경우나 기타등등 여러 요인으로 인해 vue의 lint가 vue 버전을 확실히 추적하기 어려워함. 그래서 vetur가 모든 것마다 에러를 뿜어버림. 해결 https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue Vue 3 The template root requires exactly one element. eslint-plugin-vue After scaffolding a Vue 3 project I noticed ..
Text Input {{text}} Checkbox Multi Checkbox Jack Hero Potato {{ checkedNames }} Radio One Two {{picked}} Select Please select one A B C {{selected}} Multi Selected A B C {{multiSelected}}
Methods Use with event binding OR data binding Data binding: Method is executed for every "re-render" cycle of the component Use for events or data that really needs to be re-evaluated all the time Computed Use with data binding Computed properties are only re-evaluated if one of their "used values" changed Use for data that depends on other data Watch Not used directly in template Allows you to..
watcher는 기본적으로 의존성 중 하나가 변경될 때 Vue에 실행을 지시하도록 명령하는 함수이다. computed property와 비슷한 역할을 하며, 실제로 computed property 대신 watcher를 사용할 수 있다. 아래 코드를 보자. watcher는 data property를 감시하는 역할을 한다. 따라서 name을 감시할거면 name() 처럼 선언해주면 되고. counter를 감시할거면 counter() 처럼 선언해주면 된다. 파라미터는 2개를 가질 수 있으며, 첫번째 파라미터는 현재값이고, 두번째 파라미터는 그 전 값이다. 위 코드에서는 name property가 바뀌게된다면 watch내부의 name()은 아래의 로직에 따라 실행된다. 의존성이 2개가 필요한 상황이라면? Watc..
computed properties는 methods의 리렌더링 시 생기는 재호출문제를 막아주기 위해 사용할 수 있다. https://2duckchun.tistory.com/396 methods의 리렌더링 시 재호출에 관련된 문제점 input창에 텍스트를 입력하면 '개발자'라는 문자열이 추가되어 화면에 렌더링되도록 코딩을 해놓은 상태이다. 그런데 해당 로직과 관련없는 버튼을 클릭했을때도 메서드가 실행이 되고 있다. 왜 2duckchun.tistory.com computed는 data나 methods와 같이 vue에서 정의한 기능 중 하나다. computed가 methods와 다른 점은 computed는 반응 의존성(reactive dependencies)를 캐치해서 그 부분이 변할 경우에만 실행된다는 점이..
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 관련 메서드가 실행되네요? 잉?..
HTML Events Event Practice Show Alert v-once는 초기값을 유지시켜줘요 : {{ text }} {{ text }} {{ confirmEnterText }} JavaScript const app = Vue.createApp({ data() { return { text: "initial value", enterText: "OutPut", confirmEnterText: "Not Confirmed" } }, methods: { btnAlert() { alert("hi") }, textInput(event) { this.text = event.target.value }, setEnterText(event) { this.enterText = event.target.value }, ..
리렌더링되는 부분이 데이터가 변하는 부분만으로 한정되어있음을 볼 수 있다. 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="바인딩할메서드" 형태로 사용한다. 일단 ..
