반응형 Framework43 Event handling(vue) methods add method = {{ add(2, 3, 4) }} add method = {{ add(10, 4, 6) }} multiply method = {{ multiply(baseValue) }} EVENT {{ name }} nameChange {{ count }} increase decrease 다중 이벤트 처리 - 한개의 이벤트는 함수형태로 적지 않아도 되지만 다중 이벤트의 경우는 함수형태로 적어줘야 한다. Test Toggle {{ name }} nameChange {{ count }} increase 1 increase 5 decrease 1 decrease 5 2023. 1. 5. v-for Directive 1. Array of strings {{ index }}, {{ name }} = 0, 가 1, 나 2, 다 2. Array of object {{ name.firstName }}, {{ name.lastname }} //화면 결과 원영, 강 봉구, 이 수연, 최 3. Array of arrays {{ actor.name }} {{ movie }} //화면 결과 actor: 송혜교 그세사 태양의후예 actor: 송중기 부자집막내아들 빈센조 5. Block of HTML elements value속성만: {{ value }} //화면 결과 value속성만: lili value속성만: 32 value속성만: developer 6. Object key value pairs value:{{ value }} ke.. 2023. 1. 5. Conditional Rendering(v-if, v-show) Conditional Rendering [v-if] [v-else] [v-else-if] [v-show] The number is zero The number is negative The number is positive Not a number conditionally render multiple elements vishwa codevolution vue div로 감싸져있는 h2요소들이 있다. 해당 코는 콘솔에서 확인해보면 콘솔에서도 마찬가지로 div안에 h2 요소들이 있는 것을 확인할 수 있다. 하지만 div대신 template으로 감싸게 된다면 콘솔에 찍히는 모양이 다르다. vishwa codevolution vue dom에 대한 추가된 사항이 없이 h2요소만 찍히게 되는 것을 확인할 수 있다. [v.. 2023. 1. 5. Binding(vue.js) [데이터를 html에 바인딩] 안에 있는 데이터는 템플릿 블록에 있는 html과 연결한다. 스크립트를 통해서 데이터 유지관리를 해야한다. 정적인 속성과 달리 이름 속성값이 변경될 때마다 템플릿의 값도 업데이트 되는 장점을 갖고 있다. {{ name }} Heading 버튼 Status [v-text, {{}} ] 텍스트를 바인딩 하는 방법은 2가지가 있다. 1. 머스테치 {{}} 2. v-text 하지만 mustache 구문을 사용하는 것을 추천한다. [v-html] innerText가 아닌 innerHTML 속성에 연결된다. html을 파싱하여 화면에 출력되는데 보안에 취약하다. v-html 사용은 권장되지 않는다. [v-bind] Heading 버튼 [v-bind:class] Status isProm.. 2023. 1. 5. 이전 1 2 3 4 5 6 7 8 ··· 11 다음 728x90 반응형
