목록Vue.js (3)
생각을 IT다
Vue.js를 사용하기 위해서는 먼저 Vue.js를 초기화해야 합니다. Vue.js를 초기화하는 방법은 크게 두 가지입니다. 1. CDN을 이용한 초기화 Vue.js를 사용하려면 Vue.js 라이브러리를 불러와야 합니다. Vue.js 공식 홈페이지에서 제공하는 CDN(Content Delivery Network)을 이용하면 간단하게 Vue.js를 초기화할 수 있습니다. {{ message }} 위 코드에서 script 태그를 통해 Vue.js를 로드하고, var app = new Vue()를 통해 Vue 인스턴스를 생성합니다. 생성된 Vue 인스턴스는 el 옵션을 통해 화면에서 Vue.js를 적용할 영역을 선택하고, data 옵션을 통해 Vue.js에서 사용할 데이터를 정의합니다. 2. Vue CLI를 ..
Vue.js를 이용하여 간단한 Todolist를 만드는 방법을 안내해드리겠습니다. Vue.js 설치 먼저 Vue.js를 설치합니다. Vue.js는 CDN을 이용하거나 npm을 이용하여 설치할 수 있습니다. 이 예제에서는 CDN을 이용한 설치를 가정하겠습니다. HTML 파일 생성 먼저, HTML 파일을 생성합니다. 예를 들어, index.html 파일을 생성합니다. HTML Todolist Add {{ todo }} Delete 3. Vue.js 앱 생성 이제, Vue.js 앱을 생성합니다. app.js 파일을 생성하여, Vue.js 앱을 작성합니다. JAVASCRIPT const app = new Vue({ el: "#app", data: { newTodo: "", todos: [], }, methods..
1. Vue는 무엇일까? Vue(view와 마찬가지로 /vju:/ 라고 발음)는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다. 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공합니다. 예제 (JS / template) import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app') 숫자 세기: {{ count }} 위의 예는 Vue의 두가지 핵심 기능을 보여줍니다 선언적 렌더링(Declarative Rendering) : Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaS..