Song Minu

"Component template requires a root element, rather than just text." 컴포넌트를 작성할 때 템플릿 안에 있는 문자에 태그로 감싸지 않으면 발생하는 에러. 이렇게 컴포넌트 template안에 태그 없이 작성하면 아래와 같은 에러가 발생한다. 렌더링이 되지 않는다. 아래 코드와 같이 태그를 넣어주면 된다. 난 예시로 p태그를 넣었고 본인이 사용 용도에 맞게 작성하면 된다. , 등등

v-for는 객체, 배열, 컴포넌트와 함께 사용할 수 있다. 기본 사용 방법으로는 v-for"item in items" 의 형태 items는 순환하려는 배열 데이터의 출처를 의미하고, item은 순환되는 요소의 별칭이다. {{item}} {{num}} ✔ 이런식으로도 사용할 수 있다. 이 외에 v-for="(value, index) in items" v-for="(value, name, index) in items" 이렇게도 사용할 수 있다. {{idx}} : {{val}} [{{idx}}] {{name}} : {{val}}

v-model (양방향 데이터 바인딩) 양방향 데이터 바인딩으로 주로 폼과 입력을 다룰 때 사용한다. 모델이 업데이트되면서 뷰가 업데이트되고, 뷰가 업데이트되면서 모델이 업데이트될 때 작동한다. 이로 인해 애플리케이션 모델의 데이터가 UI와 항상 동기화 할 수 있다. {{message}} input 창에 데이터를 입력해보면 v-model로 message가 바인딩되어 있어서 바로바로 입력한 값이 나온다. 입력할 때마다 변경되는 것 말고 다 입력한 후에 변경하고 싶으면 수식어로 ".lazy"라는 걸 사용할 수 있다. {{message}} 이렇게 하면 모두 입력 후 포커스가 input 창에서 벗어나면 그때 변경된다. v-once (단방향 데이터 바인딩) 하나의 요소나 컴포넌트를 딱 한 번만 렌더링 한다. 렌더..

둘의 차이점 - computed (계산된 속성) 1. 어떤 값을 파생하려고 할 때 유용하다. 2. 기본값이 업데이트될 때마다 값이 자동으로 업데이트 된다. 3. 루프가 변경되지 않아도 다시 계산할 필요가 없는 값을 반복적으로 계산하지 않기 위해 캐싱된다. 4. 매개변수를 받을 수 없다. - methods (메서드) 1. Vue 인스턴스에 바인딩된 함수 2. 명시적으로 호출될 때만 실행된다. 3. 매개변수를 받을 수 있다. 4. 자바스크립트 함수가 필요한 동일한 상황에서 유용하다. 버튼을 눌러 count를 1씩 올리는 걸 computed와 methods를 쓰는걸 한번 해보자... computed로 count 올리기 {{ computedCount }}add computed를 쓴 소스 computed로 cou..