basic/Vue.js (6) 썸네일형 리스트형 스크롤 이벤트 사용하기 created() { window.addEventListener('scroll', this.handleScroll); } destroyed() { window.removeEventListener('scroll', this.handleScroll); }, history모드 설정하기 https://router.vuejs.org/kr/guide/essentials/history-mode.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6 HTML5 히스토리 모드 | Vue Router HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의 router.vuejs.org https://ekgoddldi.tistory.com/179 ha.. Vue CLI Manually select features Choose Vue Version Babel : ES5 이후 버전으로 코딩하면 ES5문법으로 자동변환해 줌 TypeScript Progressive Web App (PWA) Supports : 웹앱 개발 지원 Router : Vue-Router Vuex : 상태관리 CSS Pre-processors : CSS전처리기 SASS SCSS LESS Stylus 등 Linter/Formatter : 자바스크립트 코딩 표준 가이드 Unit Testing : 단위 테스트 플러그인 Mocha 등 E2E Testing : End to End 테스트, 통합테스트 플러그인 https://cli.vuejs.org/guide/creating-a-project.html Creatin.. sample Sample Vue Dummy Sample App Bring Dummy Data {{dummy.id}} {{dummy.title}} {{dummy.userId}} {{content.id}}{{content.title}} × {{content.body}} Close new Vue({ el: '#app', data() { return { dummies: [], content: {} } }, methods: { getData() { axios.get('https://jsonplaceholder.typicode.com/posts') .then(res => { this.dummies = res.data }) .catch(err => { alert(`error: ${err.message}`) }) }, getDet.. [Vue.js] Life Cycle beforeCreate() { //컴포넌트 생성전 데이터 사용 불가 }, created() { //컴포넌트 생성후 }, beforeMount() { //html과 연결전 DOM요소 사용불가 }, mounted() { //html과 연결 후 }, created() {}, //컴포넌트가 생성되면 실행 mounted() {}, //template에 정의된 html 코드가 랜더링된 후 실행 unmounted() {}, //unmount가 완료된 후 실행 package.json "start": "webpack-dev-server --mode development --open --port 3000", 이전 1 다음
