true false Togglev-show를 설정하면, html에 해당 element가 렌더링까지는 된 상태인데 style="display: none" 을 통해 조회 여부를 제어한다.여러 element를 다 렌더링해야하기 때문에 초기 렌더링 비용이 많이 든다. 토글이 자주 일어날 때 사용하는 것이 좋다. true false Togglev-if/v-else를 설정하면, 해당하는 element만 렌더링되고, 조건이 바뀌면 다시 렌더링된다.v-if는 토글할 때마다 렌더링 다시 해야해서 렌더링 비용이 많이든다. 런타임 중 조건이 많이 바뀌지 않을 때 사용하는 것이 좋다. To-Do List ..
JavaScript
To-Do List Add {{ todo.subject }} 반복할 최상위 div에 v-for를 추가한다.v-for="todo in todos" => todo는 내가 임의로 설정한 변수명이고 todos는 실제로 반복하여 접근할 배열을 의미한다.for(String todo : todos) 와 비슷한 느낌 v-for사용할 때에는 :key 바인딩 항상 넣어줘야 한다. key로 각각의 element를 추적할 수 있다.
To-Do List Add {{ todos }} 빈 배열 만들 때에는 const todos = ref([]); 와 같이 사용한다. Date.now() 는 millisecond단위로 현재 시간을 가져오기 때문에, 대부분 유니크한 값을 가져올 수 있다. form은 submint한 뒤 자동으로 화면 reloading하는 특징이 있다.setup() 안에서 정의한 함수에서 event를 인자로 받아올 수 있는데, event.preventDefault() 를 설정하면 이 reload과정을 막을 수 있다.더 간단하게 표현하려면 에 설정된 @submit => @submit.prevent 와 같이 설정하면..
이벤트 설정할 때에는 v-on을 사용했고 (v-on:click="~")데이터 바인딩할 때에는 v-bind를 사용한다. (v-bind:value="~", v-bind:type="~", v-bind:class="~") 원하는 변수로 바인딩을 걸어놨기 때문에 변수 value값이 바뀌면 바뀐 vaule로 조회된다.input box의 type도 const 변수화하고 바인딩시킬 수 있다. v-bind를 축약하여 v-bind: => : 로 사용할 수 있다.v-bind:value="~" => :value="~"v-bind:type="~" => :type="~"v-bind:class="~" => :class="~" 여기까지는 변수 데이터가 바뀌는 경우 화면에 적용되는 단방향 바인딩 방법이다.화면에서 유저가 데이터를 ..
event클릭 이벤트와 같은 이벤트를 등록하려면 태그에 속성을 넣어주면 된다.v-on:click="updateName" 위의 updateName 함수도 동일하게 setup()에서 작성하고, return()에 명시해주어야 한다. ref어떤 변수를 template에서 쓰고 있을때, 어떤 함수를 정의해서 해당 변수 값을 바꾼다고 해보자.함수가 실행되어 let 값은 정상적으로 변경되어도 template에서는 변화가 일어나지 않는다. 이렇게 값에 바로 동기화되어 조회되려면(=리액티브하려면) ref를 사용해야 한다. {{ name }} Click import { ref } from 'vue'; //vue 패키지에서 ref를 import 한다는 의미import { reactive } from 'vu..
vue.js 2 -> 3 바뀐 점 안에서 여러개 element를 하나의 로 감싸줘야했는데 3에서는 감싸지 않아도 됨 안에서 함수를 정의하거나, 함수를 사용하여 만든 새로운 변수를 return할수 있다.그러면 에서 모두 사용할 수 있고, 함수는 사용할 때 {{ greeting() }} 형태로 ()를 붙여서 사용한다.
