HTML {{ myname }} {{ myage }} {{ myage + 5 }} {{ randomNumber() }} 누르면 나이 5씩 증가 JavaScript const app = Vue.createApp({ data() { return { myname: "2DC", myage: 29, imgUrl: "https://cdn.pixabay.com/photo/2012/10/06/22/18/horse-60153_960_720.jpg" } }, methods: { ageUp() { this.myage += 5 }, randomNumber() { return Math.random() } } }).mount("#assignment")
Vue와 같은 프레임워크는 선언형 접근 방식을 사용한다고 표현한다. 선언형 접근 방식이 뭘까? 선언형 접근방식 개발자는 목표를 정의하고, 컨텐츠의 템플릿을 정의한다. 이후 동적 바인딩이 필요한 부분에 v-접두사나 {{ }} 를 이용해 데이터 추가를 표시한다. 그렇게 해두면 vue가 나머지 작업을 처리한다. 즉, vue는 내부적인 모든 준비를 다 해놓은 상태이며, 강조한 부분에 개발자가 원하는 데이터를 업데이트 한다. 즉 실제 DOM을 업데이트 해주고 사용자가 볼 수 있게 한다. 따라서 개발자는 동적 플레이스홀더를 지정하고, 최종적인 그림만 정의하면 작업이 끝나게 된다. vue에 대한 줄글 1 vue 인스턴스는 하나의 HTML 엘레멘트와 결합이 가능하며, 바인딩된 엘레멘트의 자식요소에 영향을 미칠 수 있다..
의도적인 연습!! HTML Vue Course Goals 뷰 공식홈페이지 입니다. JavaScript const app = Vue.createApp({ data() { return { courseGoal: '뷰 열심히 공부하기', vueLink: "https://vuejs.org/", } }, methods: { randomMsg() { return this.courseGoal } } }).mount('#user-goal') 보통 {{ }} 문법에 html 태그를 직접적으로 넣는건 허용되지 않는다. 이는 보안상 이슈 때문이며, 크로스사이트스크립팅 공격을 허용할 수 있다. 다만 몇몇 경우에 한해 html 태그를 직접 문서에 바인딩해야할 경우가 생기는데, 이 때는 html 태그에 v-html="vue데이터"..
학습목적 의도적인 반복 학습 및 배운 내용을 직접 코드하기 위해 vue의 예약어 중 하나인 methods를 사용해보기 위해 HTML Vue Course Goals My Course Goal {{ courseGoal }} {{ randomMsg() }} 랜덤링크로 접속합니다. p 태그에 보이는 {{ randomMsg() }} 는 함수를 실행하는 문법인데 html에서 동작이 될까? a 태그의 어트리뷰트인 v-bind:href="randomLink()" 도 함수를 실행하는 문법인데 html에서 동작이 될까? 된다! JavaScript const app = Vue.createApp({ data() { return { courseGoal: '뷰 열심히 공부하기', vueLink: "https://vuejs.org..
학습결과 interpolation(보간법)은 태그 내부의 텍스트 노드를 채워넣을 때 쓸 수 있다. ex) {{ vuedata }} v-bind는 태그의 어트리뷰트에 데이터를 바인딩 시켜줄 때 사용할 수 있다. ex) 주소를 눌러요 VUE 내부동작 추론 최상단에 vue가 cdn으로 설치가 되어있기 때문에 vue 문법을 사용할 수 있게 된다. vue는 html 상단에서 vue cdn과 app.js를 defer로 미리 다운로드한 뒤 HTML 파싱이 끝날때까지 대기한다. (defer 키워드로 인해 js코드 다운로드와 html 파싱이 동시에 이루어지나, js의 실행은 html 파싱이 전부 이뤄진 뒤 실행된다. 따라서 vue의 내부 동작은 js가 dom을 변경함으로써 이뤄질 것이다.) HTML 파싱이 끝난 뒤, v..
학습목적 CDN 방식을 통해 먼저 vue와 친숙해져보자. 기본이라 할 수 있는 Options API를 한번 사용해보자. index.html Vue Course Goals {{ courseGoal }} My Course Goal {{ courseGoal }} script를 통해 vue를 cdn으로 사용했다. (js는 defer 프로퍼티를 이용해 화면이 렌더링이 된 이후 실행이 되도록 한다.) body안의 {{ courseGoal }} 은 보간법(interpolation) 이라는 vue 특유의 데이터 바인딩 기법이다. html과 vue가 결합된 형태에서는 vue가 특수구문을 읽어들여 html을 다르게 파싱하게 한다. app.js const app = Vue.createApp({ data() { return ..
In Vue, mustaches are only used for text interpolation. To bind an attribute to a dynamic value, we use the v-bind directive: 뷰에서 머스태치 문법은 오직 텍스트를 껴넣을때만 사용한다. 어트리뷰트를 HTML에 추가하려면 v-bind 문법을 이용하면 된다. A directive is a special attribute that starts with the v- prefix. They are part of Vue's template syntax. Similar to text interpolations, directive values are JavaScript expressions that have access ..
{{`안녕 나는 ${num}DC야`}} 누르면 숫자 올라감 What you see in the editor is a Vue Single-File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. The core feature of Vue is declarative rendering: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScrip..
{{`안녕하세요. ${num}DC입니다.`}} 숫자UP What you see in the editor is a Vue Single-File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. The core feature of Vue is declarative rendering: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScript ..
What is Vue? (Vue는 무엇인가요?) Vue(발음은 view, 뷰로 하면 된다.)는 UI를 개발하는 자바스크립트 프레임워크이다. 뷰는 표준 HTML, CSS, JS를 기반으로 빌드(구축)되며, UI를 효율적으로 개발할 수 있도록 도와주는 선언형 프로그래밍(declarative) 및 컴포넌트 기반 프로그래밍 모델을 제공한다. 아래는 미니멀한 예시이다. import { createApp } from 'vue'; createApp({ data() { return { count: 0; } } }).mount('#app') Count is: {{ count }} 결과 : 위의 예시는 뷰의 두 가지 핵심 기능을 보여준다. Declarative Rendering (선언적 렌더링) - Vue extends ..
