본문 바로가기

전체 글361

html 코드 데이터 바인딩 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. 1. v-html (html 데이터 바인딩) 그냥 template 태그안에 {{}}를 사용하면 String으로 데이터가 바인딩이 됩니다. v-html 태그를 사용하면 String 데이터 바인딩이 아닌 html 태그가 바인딩 됩니다. 2. Sample Code 출처 Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전) 2021. 9. 18.
Vue 컴포넌트 기본구조 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. 1. Vue 컴포넌트가 갖는 기본 형태 컴포넌트를 화면에서 보려면 라우터에 추가해야 합니다. // html 코드는 여기에 2. Vue가 가지고 있는 가장 기본적인 스크립트 구조 name 이 컴포넌트의 이름 지정 가능 (선택 사항) components 특정 컴포넌트를 다른 컴포넌트에 import 해서 재사용 가능 data 데이터 바인딩 setup() 향후 수정할 예정입니다. created() 이 컴포넌트가 실행되는 순간에 자동으로 created() 안에 정의된 코드가 바로 실행이 됩니다. mounted() template 태그 안에 지정된 html DOM이 실제 화면에 로딩(mount)이 되는 순간 mounted에 정의된 코드가 바.. 2021. 9. 18.
Routing 사용 방법 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. 1. 라우팅이란? Vue같은 SPA에서는 페이지를 이동할 때 마다 서버에 요청해서 페이지를 갱신하는 게 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 됩니다. 즉, Vue에서 라우팅이라는 건 클라이언트에서 URL 주소에 따라 페이지가 전환되는 것을 의미합니다. Vue 프로젝트 내부에서는 미리 URL 주소를 정의하고 각 주소마다 Vue 페이지를 미리 연결시켜놓습니다. 그리고 해당 주소로 사용자의 요청이 들어왔을 때, 미리 정의된 URL 주소에 해당하는 뷰 페이지로 화면을 전환시켜줍니다. 뷰에서 라우터는 path마다 해당하는 컴포넌트에 어떤 컴포넌트를 연결시켜줄지 정의합니다. 2. Vue 라우팅 사.. 2021. 9. 18.
기본 라이프 싸이클 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. Intro Vue가 실행되고 우리가 화면을 보는데까지 관여하는 컴포넌트들에 대해 알아보겠습니다. index.html main.js App.vue 1. index.html 실제 화면을 그리는 html로 중요한 건 아래 한 줄 입니다. div id="app" 2. main.js Vue 프로젝트를 실행하면 가장 먼저 실행됩니다. 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는 역할을 담당합니다. 결국은 index.html을 통해 우리가 만든 뷰 컴포넌트들이 사용자들에게 제공이 됩니다. 실제 index.html 내 div id="app" 이 부분으로 우리가 개발한 뷰 컴포넌트들이 실행이 됩니다. mount('.. 2021. 9. 18.

티스토리툴바