본문 바로가기

분류 전체보기

 (185)
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..
DOM이란? 1. DOM이란 무엇인가? DOM이란 Document Object Model의 약자로 번역하면 문서 객체 모델이다. 그렇다면 문서 객체가 무엇을 의미할까? 문서 객체는 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(Object)로 만든것을 의미한다. 모델(Model)은 모듈정도로 해석하면 될것같다. 정의해보자면 문서 객체 모델은 HTML, XML 문서의 프로그래밍 인터페이스(접속기)이다. DOM은 웹 브라우저(크롬, 사파리 등)가 HTML페이지를 인식하는 방식을 의미하며 document 객체와 관련된 객체의 집합체이다. DOM은 아래의 사진처럼 위에서 아래로 뻗어나가는 트리구조로 생겼다. 우리는 DOM의 객체에 먼저 접근하고 키워드를 통해 필요한 요소에 접근하여 우리가 필요..
Vue.js 기본 개발 환경 설정하고 프로젝트 생성하기 1. Node.js 설치 https://nodejs.org/ko/ 에서 서 최신기능이 아닌 안정적,신뢰도 높은 LTS 버전으로 설치한다. Node.js와 함께 설치되는 npm을 이용해 Vue.js 와 관련 도구를 설치하고 관리하게 된다. 2. Vue.js dev tools 설치 Vue.js devtools는 크롬의 확장기능으로 Vue에 적용되어 있는 값들, 컴포넌트들을 개발자도구에서 실시간으로 추적하고, 사용자가 눈으로 확인할 수 있도록 GUI로 출력시켜주는 툴이다. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 에서 설치한다. 3. 비주얼 스튜디오 코드(vscode) 확장프로그램 설치 비주..

티스토리툴바