Front-End/Vue.js3 [2021-09-05] 12~27강 1. direction : v-for - 사용방법 : 수행내용 app.js 에서 정의된 books 배열의 모든 원소(book)들에 대하여 수행내용을 실행 ※ 이때, book 자리의 명칭은 아무거나 원하는거 해도 상관없음 (ex. v-for "apple in books) - app.js 코드 const app = Vue.createApp({ data() { return { showBooks: true, books : [ {title: 'name of the wind', author: 'patrick rothfuss'}, {title: 'the way of kings', author: 'brandon sanderson'}, {title: 'the final empire', author: 'brandon sa.. 2021. 9. 7. [2021-09-02] 10 ~ 11강 1. directive ; v-if - 이 directive v-if는 값의 true/false에 따라 div 태그 내용을 실행할지 말지 결정한다. - 형태: true이면 수행할 내용 - [v-else]를 사용하면 false일때 어떤 값을 수행할지도 결정할 수 있다. Hide Books Show Books 2. directive ; v-show - 이 directive v-show는 값의 true/false에 따라 div 태그 내용을 보여줄지 말지 결정한다. ( like v-if ) - 형태 : true이면 보여줄 텍스트 - [v-if] vs [v-show] v - if v - show false 일 때 해당 코드 자체를 DOM에서 지워버려서 수행 못하게 함 (true이면 다시 코드 주입) -> 잘 안변.. 2021. 9. 3. [2021-09-01] 1 ~ 9 강 1. - index.html 파일에서 app 이라는 이름의 id를 가진 Vue 객체를 app.js 파일에서 정의해준다. const app = new Vue.createApp({ - app.js 파일에서 정의된 객체 app 안에는 data() { 여기 안에 } 객체 app의 다양한 속성(properties)들을 담을 수 있다. const app = Vue.createApp({ data() { return { title: 'The Final Empire', author: 'Brandon Sanderson', age: 45 } } }) - index.html 파일에서 속성변수들의 값을 가져와서 브라우저에 보여줄 때는 {{ 변수 이름 }} 형태로 소환하면 된다. (단, 태그 안에서만 소환 가능) {{ title.. 2021. 9. 2. 이전 1 다음
