seulcoding

Vue Components 사용법기초 세팅 (main.js, App.vue)이번 component 예제에는 webpack을 사용하였다. 자세한 내용은 vue webpack에서 다룰 예정.src 디렉토리에 main.js와 App.vue를 만들고, main.js에 App.vue를 등록해 주어야 한다.index.html main.jsimport Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }) Vue components 만들기vue component는 template, script, style 크게 세가지로 구성된다.다음은 vue component의 예시. App.vue에 다음과 같이 입력한다.App.v..

vue.js에서 부모 컴포넌트에서 자식 컴포넌트 내부의 데이터를 추가하고 싶은 경우, 을 사용하면 된다.App.vueApp.vue에서 아래 있는 Quote 컴포넌트를 호출하여 해당 컴포넌트에 태그를 넣어보자. Quote Test import Quote from './components/Quote.vue'; export default { components: { appQuote: Quote } } Quote.vuetemlpate 안에 을 추가 해 주면 자동으로 데이터가 들어온다. export default { } Scope 특징1. Style은 자식 컴포넌트에서만 적용된다.위의 Quote에 스타일을 적용시키고 싶다면 자식 컴포넌트인 Quote.vue에서 style을 적용시켜야만 적용된다. export de..

vue에서 디버깅하는 두 가지 방법chrome의 개발자 도구 사용 vue-cli(webpack)을 사용하는 경우 크롬의 개발자 도구를 활용하여 쉽게 디버깅 가능.vue dev tools (https://github.com/vuejs/vue-devtools) vue dev tools을 설치하면 크롬 개발자 도구에서 뷰 컴포넌트, 이벤트 등을 쉽게 확인이 가능하다.설치도 extension 형태로 아주 쉽게 설치할 수 있다. (현재 Chrome, Safari, Firefox를 지원)크롬 extension 설치파이어폭스 애드온 설치사파리 workaround 설치: npm install이 필요하다.이후 개발자 모드로 들어가 보면 Vue탭이 생긴 것을 볼 수 있다.

2강Directives 이해, v-oncenew Vue ({ el: "#app", data: { title: "Hello world", link: "https://seulcode.tistory.com", }, methods: { sayHello: function() { this.title = "Hello"; return this.title; }, }, }) 다음 코드에서 sayHello()를 호출하면 기존의 Hello world가 hello로 대체된다. 이를 막기 위해서는 v-once를 통해 re-rendering을 방지 가능하다.Raw html 표시하기: v-htmlvue에서 다음과 같이 finishedLink에 html을 넣고 html에서 double curly로 불러오면 string으로 불러진다. ..