Skeleton의 세상

이전글 : [ITSkeleton][vue.js] v-for(열거)를 사용해봅시다 , 바인딩 [ITSkeleton][vue.js] v-for(열거)를 사용해봅시다 , 바인딩 지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 데이터 바인딩 [ITSkeleton][vue.js] 데이터 바인딩 지난 글에 이어서 데이터 바인딩에 대하여 한번 알아봅시다 지난글: [Vue.js ( nuxt.js )] - [ITSkelet.. itskeleton.tistory.com v-on:click 시작하기에 앞서 v-on:click은 @click으로도 표현이 가능합니다 먼저 간단하게 클릭 이벤트를 만들어 봅시다 testButtom new Vue({ el: '#app', methods: { t..

지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 데이터 바인딩 [ITSkeleton][vue.js] 데이터 바인딩 지난 글에 이어서 데이터 바인딩에 대하여 한번 알아봅시다 지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 기초 (Hello World!) [ITSkeleton][vue.js] 기초 (Hello World!) 기초중의 기초인 Hello World.. itskeleton.tistory.com 지난글에 이어서 이번에는 v-for를 이용하여 열거 하는 방법을 한번 알아보려합니다. 쉽게 얘기해서 열거는 빠르게 HTML을 작성하도록 도움을 줍니다 아래와 같은 HTML 코드가 있습니다 Hello1 Hello2 Hello3 He..

지난 글에 이어서 데이터 바인딩에 대하여 한번 알아봅시다 지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 기초 (Hello World!) [ITSkeleton][vue.js] 기초 (Hello World!) 기초중의 기초인 Hello World를 작성해서 화면에 띄워봅시다 visual code를 통해서 만들어도 상관은 없지만 웹에서 바로 작성해서 확인해 볼 수 있는 JSFiddle을 사용하여 작성해 보겠습니다 jsfiddle.net �� itskeleton.tistory.com 이전 글에 설명이 되어있듯이 이번에도 jsfiddle을 이용하여 설명을 해보겠습니다 일단 html에 아래와 같이 적습니다 ITskeleton Vue.js 100 {{ 'Hello' + 100..

기초중의 기초인 Hello World를 작성해서 화면에 띄워봅시다 visual code를 통해서 만들어도 상관은 없지만 웹에서 바로 작성해서 확인해 볼 수 있는 JSFiddle을 사용하여 작성해 보겠습니다 jsfiddle.net 에 접속을 합니다 jsfiddle.net/ JSFiddle - Code Playground jsfiddle.net 접속하면 위의 화면이 나타나는데 왼쪽 아래 저 부분을 클릭하여 FRAMEWORKS & EXTENSIONS 해당 필드를 클릭합니다 vue 2.2.1을 선택해줍니다 그후 HTML영역에 다음과 같이 작성해 줍니다 {{ 'Hello ' + 'world' }} Javascript 영역에 아래 코드를 작성해 줍니다 new Vue({ el: '#app' }) 이렇게 작성후 run..

vue-awesome-swiper https://www.npmjs.com/package/vue-awesome-swiper vue-awesome-swiper Swiper component for Vue www.npmjs.com nuxt에서의 사용방법은 config파일에 plugins: [{ src: '@/plugins/vue-awesome-swiper', mode: 'client' }] css: [ 'swiper/css/swiper.css' ] 을 적어줍니다(이미 존재한다면 뒤의 코드를 추가해주시면 됩니다) 적어두었다면 plugins에 vue-awesome-swiper.js 파일을 만들어줍니다. vue-awesome-swiper.js 파일에 import Vue from 'vue' import VueAwes..

https://itskeleton.tistory.com/category/HTML/Vue.js%20%28%20nuxt.js%20%29 포스팅에 이어서 페이지 수정을 해보겠습니다. vue는 컴포넌트 재활용이 아주 뛰어난 자바스크립트 언어입니다. 컴포넌트를 활용해주면 많은 페이지를 쉽고 빠르게 만들수있죠. nuxt.js 언듯보면 다른 자바스크립트 처럼 보입니다. 하지만 vue를 기반으로 하는 자바스크립트로 사용하는 방법은 vue와 크게 다르지 않습니다. 페이지 수정하기에 들어가기에 앞서 프로젝트에 설정해주어야 할부분이 있습니다. pug - pug는 html을 쉽고 빠르게 작성하도록 도와줍니다. 페이지를 만들면서 설명하겠습니다. less - less는 css를 쉽고 빠르게 작성하도록 도와줍니다. 인터넷에 les..

안녕하세요! nuxt.js (vue의 서버사이드렌더링) 프로젝트를 만드는것에대해 설명하려 합니다. 먼저 설치되어있어야 하는부분은 npm -> 인터넷에 치시면 설치가 가능합니다. https://www.npmjs.com/get-npm visual code -> 이건 다른 프로그램이 있다면 대체 가능합니다. https://code.visualstudio.com/download 먼저 npm을 설치하셧다면 검색 -> 원격 or cmd 를 검색하셔서 열어주세요 powershell도 가능합니다. 윈도우에서는 원하는 폴더에서 원격 or powershell을 열 수 있습니다. 아래의 명령어를 입력합니다. (npm설정은 기본적으로 설치할때 알아서 path적용이 되기때문에 따로 적용을 하거나 할 필요는 없습니다. 만약 동작..