기타/vue js (22) 썸네일형 리스트형 Vue js 인스턴스 라이프사이클 예제 오늘은 vue 인스턴스의 라이프 사이클에 대해 공부해보도록 하겠습니다. 인스턴스의 라이프 사이클을 알면 app을 보다 디테일하게 다룰 수 있습니다. 때문에 반드시 알아야 합니다. vue 인스턴스의 라이프사이클은 beforecreate() 인스턴스가 생성되기 전이다.-> created() 인스턴스가 생성되어 데이터를 사용할 수 있습니다.-> beforeMount() div태그 #app의 html 코드가 생성되기 전 상태-> mount()html코드가 div태그 #app에 html코드가 찍혀있는 상태-> beforeupdate() 데이터가 업데이트 되기 전-> updated()되고난후-> beforedestroy()해당 페이지를 종료하기 전-> destroy() 해당 페이지가 종료된 상태 this is Ho.. vue js slot 기본 예제 오늘은 vue js slot에 대해 알아보도록 하겠습니다. slot은 언제 쓰는 것인가? slot은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구입니다. 좀더 구체적으로는 기존에 있던 컴포넌트의 재사용성을 높이는데 아주 중요한 도구입니다. 기본 예제를 통해 한 번 배워보도록 하겠습니다. 우리가 배운 컴포넌트는 부모에서 자식 컴포넌트를 로드할 때 사용됩니다. 자식 컴포넌트의 코드가 부모 컴포넌트 코드에 올라가죠. slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 합니다. 결국 부모 컴포넌트에 자식 컴포넌트에 html코드를 추가한 코드가 로드되는 것이지요. 다음과 같이 자식 컴포넌트 template태그안에 slot태그를 넣습니다. one two 다음으로.. vue js props 컴포넌트간의 데이터 이동에 대해 다루어 보겠습니다. props와 emit이 있습니다. (1) props props는 자식컴포넌트에서 부모 컴포넌트로 데이터를 보낼 때 사용합니다. 예시를 한 번 살펴보겠습니다. 보시면 title이 공통으로 들어가 있습니다. 이것을 props를 통해 아래와 같이 각 페이지에 맞게 바꿀 수 있습니다. 컴포넌트 폴더에서 vue파일을 열고 다음과같이 코드를 수정하면 바꿀 수 있습니다. props에서 title객체를 생성해주고 type. defalut값, required(필수 혹은 선택) 설정을 해주십시오. 주의사항은 props 내의 객체명을 컴포넌트 내의 다른 데이터 이름과 같게 하면 안됩니다. {{title}} {{name}} clickme 다음은 views디렉터리에 있는 컴포.. vue js 싱글 파일 컴포넌트 예시 오늘은 Vue js 싱글 파일 컴포넌트에 대해 공부해보도록 하겠습니다. (1)싱글 파일 컴포넌트 Vue js에서 컴포넌트를 사용하는 이유는 중복되는 코드를 컴포넌트에 담에 효율적으로 사용하기 위함입니다. 저번 시간에 Vue CLI를 사용하여 프로젝트를 만들었는데요 그 환경을 기반으로 오늘 공부를 시작하겠습니다. SRC 폴더 아래에 있는 COMPONENTS 폴더에서 balmostory.vue 파일을 생성해줍니다. 그런 후 아래와 같은 코드를 입력해주에요. {{name}} clickme 위의 코드를 설명하면 export default안에 컴포넌트 데이터, 함수들이 있습니다. 그리고 template 태그 안에서 컴포넌트가 html에 로드될 때 어떤 코드가 입력될지 설정할 수 있습니다. 이렇게 코드를 입력한 후.. Vue CLI 설치 및 사용방법과 Vue-Router(뷰 라우터) 살펴보기 오늘은 Vue CLI 설치 및 사용방법과 Vue Router에 대해 알아보도록 하겠습니다. 1.Vue CLI 설치 및 사용방법입니다. cli.vuejs.org/guide/installation.html Installation | Vue CLI Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove cli.v.. Vue.js 여러개 인스턴스 , 컴퍼넌트 개념과 컴포넌트 간 통신 오늘 학습할 내용은 Vue .js인스턴스, Vue 컴포넌트 개념과 컴포넌트 간 통신입니다. 1. 여러 개의 Vue 인스턴스 사용하기. {{name}} {{name}} 이렇게 하면 name이 나오지 않는다. id 가 app이 아닌 div에서 뷰인스턴스를 사용하는 방법은 무엇이 있을까요? !DOCTYPE html> {{name}} {{name}} {{name}} 변수에 뷰인스턴스를 넣어줌으로써 함수에서 다른 뷰 인스턴스의 데이터를 바꿔줄 수 있다. 그렇다면 여기서 app에서 app-1 인스턴스 데이터로 접근하는 방법이 있을까?? {{name}} 변환 {{name}} 변환 뷰인 스턴스를 변수 안에 넣어주면 각 인스턴스 안의 메서드에서 접근할 수 있다. 여러 개의 뷰인스턴스를 다룰 때는 변수 안에 넣어주는 것이.. 이전 1 2 3 다음
