FRAME WORK/Vue.js (17) 썸네일형 리스트형 Vuejs 2 . 뷰 데이터 (data) 와 메소드 (methods) 데이터안에 변수를 넣어 웹브라우저에 표현하는 방법입니다. 아래 두 코드 모두 같은 결과를 보여줍니다. 메소드 안에는 함수를 넣을 수 있습니다. 메소드 안에 nextYear라는 함수를 넣어 출력하였습니다. nextYear함수에 greeting이라는 매개변수를 넣어주었습니다. 그리고 '안녕하세요'라는 인자를 넣었주었습니다. **인자란? 함수를 사용할때 넣어주는 값(아규먼트) **매개변수란? 함수안에서 설정된 변수(파라미터) function을 생략하여 적을 수 있습니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! Vuejs 2 . 뷰 인스턴스 생성하기 아래의 링크에서 CDN을 복사하여 헤드에 넣어주면 뷰를 사용할 수 있습니다. https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 데이터 오브젝트안에 name이라는 변수를 만들어서 웹브라우저안에 보여주는 방법입니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브강의를 들으면서 정리된 글을 보면 더 좋을것같아요! Vue.js 3 이벤트 웹 개발을 할 때 이벤트라는것은 어떤 행동을 했을 때 어떤 일이 일어나는것을 의미합니다. 클릭이벤트가 일어나는 예제입니다. 먼저 css는 부트스트랩을 이용하였습니다. index.html에 부트스트랩 CDN을 링크해주었습니다. 태그를 만들고 class를 넣어주어 부트스트랩의 css를 이용한 버튼을 만들었습니다. 태그 속성에 v-on:click 속성을 넣어주고 속성값으로 consoleLog함수를 넣어주었습니다. consoleLog함수는 버튼을 클릭하였을때 console.log에 'hello world'라는 스트링값이 뜨도록 만들었고 이 함수가 에 접근할 수 있도록 return에 넣어주었습니다. 이번에는 버튼을 클릭하면 버튼위의 'inyoung'이 'inyoung world'로 바뀌게 코드를 작성해보겠습니다... Vue.js 3 함수를 사용하는 방법 함수를 이용하여 name값을 변경할것이다. greeting이라는 변수에 함수를 넣어주었다. 함수는 화살표 함수로 만들었다. 'Hello'라는 값을 리턴하도록 하였다. 그리고 greeting이라는 함수를 setup함수에서 리턴을 해주었다. 이렇게 하면 greeting이라는 함수가 template에 접근이 가능하다. name 데이터 대신 greeting()을 넣어 'Hello'가 출력되도록 만들었다. 이번에는 greeting에서 name이라는 매개변수를 받도록 하였다. 그리고 'Hello, '+name 이라는 값을 리턴하는 함수로 만들었다. 그다음 name을 greeting인자로 넣어 Hello, inyoung이 출력되도록 하였다. 위의 예제를 아래처럼 작성해도 같은 결과를 도출할 수 있다. 함수를 여러개 .. Vue.js2 => Vue.js3 바뀐점 Vue.js2 에서는 안에 컨텐츠를 작성할 때 반드시 모든 태그를 감싸는 태그가 필요했다. 의미가 없더라도. 그러나 Vue.js3에서는 루트태그가 없더라도 정상적으로 인식된다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! Vue.js 3 컴포넌트 1. Vue 컴포넌트란? 이름에서도 알 수 있듯이 부품이라는 뜻이다. 즉 개발을 할 때 컴포넌트를 필요할 때 언제든 가져다 사용할 수 있다. 컴포넌트 파일을 만들때 확장자는 .vue가 들어간다. 2. 컴포넌트 구조 컴포넌트의 구조는 , , 3가지 태그로 구성된다. 3. 컴포넌트 작성 컴포지션 API를 사용하였다. 컴포지션 API는 Vue.js 3 에 새롭게 추가된 API이다. => setup() **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! Vue.js 3 폴더구조 Vue 프로젝트를 생성하여 열면 아래의 사진처럼 폴더가 구조되어있다. 예외로 jsconfig.json 파일은 https://vuejs.github.io/vetur/guide/setup.html#project-setup 사이트를 참고하여 추가한 파일이다. 1. package.json 중요한 부분은 'dependencies' 와 'devDependencies' 부분인데 이 부분은 필요한 패키지의 리스트들을 저장해 놓은 공간이다. 'dependencies'는 개발을 할 때와 프로덕션에 올릴 때에 필요한 패키지이고, 'devDependencies'는 개발을 할 때에만 필요한 패키지여서 개발이 끝나면 없어도된다. 여기 있는 패키지들은 설치와 동시에 'node-modules'폴더 안에 자동으로 설치된다. 2. in.. Vue - Directive란? 1. Vue에서 디렉티브(Directive)란? Directive를 번역하면 지령이라는 뜻이다. 디렉티브란 Vue엘리먼트에게 어떻게 작동하라는 지령을 내리는 지시문이다. 디렉티브는 Vue의 기능들을 사용하기 위해 HTML태그 안에 들어가는 속성이며 'v-'라는 앞글자를 지닌다. 2. 종류 v-text 엘리먼트의 textContent를 업데이트 합니다. v-html 엘리먼트의 innerHTML을 업데이트 합니다. v-show 토글은 표현식 값의 참에 기반을 둔 display CSS 속성입니다. v-if 표현식 값의 참 거짓을 기반으로 엘리먼트를 조건부 렌더링 합니다. v-else v-if 또는v-if /v-else-if 체인을위한 “else 블록”을 나타냅니다. v-else-if v-if에 대한 “else.. 이전 1 2 3 다음
