Vue.js

    [NUXT.JS/VUE.JS] 시작하기(4) - linked between page

    [NUXT.JS/VUE.JS] 시작하기(4) - linked between page

    선택된 게시글이 아닌 다른 게시글들을 네비게이션으로 활용할것이기 때문에 선택되지 않은 친구들을 filter로 걸러준다 return this.posts.filter(post => post.id !== this.id) 그다음 옆에다가 붙여주자 v-for문은 꽤 독특한 문법을 가지고있는데, 리스트 렌더링 https://kr.vuejs.org/v2/guide/list.html 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 여기에서 자세한 내용을 확인할 수 있다. 실행시키면 오른쪽에 다른 포스팅으로 연결해주는 링크가 생긴다.

    [NUXT.JS/VUE.JS] 시작하기(3) - Dynamic Routes

    [NUXT.JS/VUE.JS] 시작하기(3) - Dynamic Routes

    pages 폴더에 posts폴더를 만들고, post.vue를 posts폴더에 옮겨놓자 그리고 _id.vue로 이름 변경 그안의 exprot default - data result로 내보낼 값을 설정한다 id 값과 보여질 title, content부분 그다음 Route에서 matching 시켜줄 코드를 작성 id: this.$route.params.id 동적 route에 관한 설명은 https://ko.nuxtjs.org/guide/routing/ nuxtjs.org Nuxt.js official website ko.nuxtjs.org computed:{ post(){ return this.posts.find(post=>post.id===this.id) } } 들어온 값의 id즉 balut, whereIs..

    [NUXT.JS/VUE.JS] 시작하기(2) - Navigation Bar를 만들자

    [NUXT.JS/VUE.JS] 시작하기(2) - Navigation Bar를 만들자

    저번 포스팅에 localhost:3000에 성공했다면 프로젝트폴더가 생성되어 있을것이다. 지난 포스팅에서 따로 설정 안했다면 C드라이브 -> USER -> ADMIN(또는 USER) -> 프로젝트명 폴더 nuxt라는것이 vue.js를 위한 서버사이드렌더링 프레임워크이기 때문에 .vue로 되어있는 파일들을 수정하려면 프로그램이 필요한데, 여기서는 visual studio code 라는 프로그램을 사용하려고 한다 비쥬얼스튜디오코드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud appl..