seulcoding

vue filter with multiple object value.... computed: { filteredData: function() { let result = this.data; var search = this.search; var column_list = ['email', 'name'] if (search) { // with ES5 // result = result.filter(function (item) { // return column_list.map(function (key) { // return item[key].includes(search); // }).includes(true); // }); // ES6 result = result.filter(item => column_list.m..

... methods: { resetData: function() { Object.assign(this.$data, this.$options.data()); }, } ... Object.assign()Object.assign(target, ...sources) Properties in the target object will be overwritten by properties in the sources if they have the same key.More detail MDN web docs

Vue 인스턴스Vue 인스턴스 만들기var vm = new Vue({ // opt }) vue 앱은 new Vue로 만들어진 컴포넌트들로 구성속성과 메소드data 객체에 있는 속성을 프록시 처리data가 변경되면 화면이 다시 렌더링인스턴스 속성, 메소드 목록이 나와있는 API reference 정리 필요인스턴스 라이프사이클 훅vue는 따로 컨트롤러가 없음.vue 인스턴스의 단계에서 라이프사이클 훅이 호출 => 사용자 지정 로직을 사용할 수 있다라이프사이클 다이어그램템플릿 문법렌더링 함수 직접 작성 가능, JSX도 지원.보간법(Interpolation)``(이중 중괄호)를 사용한 Mustache.일반 텍스트이기 때문에 html 출력하려면 v-html 디렉티브 사용 (mustache는 사용 불가하며 v-bi..

install vue-routernpm install --save vue-router set up vue-routermain.js에서 Vue.use를 통해 사용할 수 있다.import Vue from 'vue' import VueRouter from 'vue-router'; import App from './App.vue' Vue.use(VueRouter); new Vue({ el: '#app', render: h => h(App) }) routes.js 만들기src/routes.js에 라우트를 선언해준다.import User from './components/user/User.vue'; import Home from './components/Home.vue'; export const routes = [..

Vue Resource공식 github pageVue Resource 설치하기npm으로 설치하기npm install --save vue-resource cdn Vue Resource 전역에 불러오기main.jsimport Vue from 'vue' import VueResource from 'vue-resource'; import App from './App.vue' Vue.use(VueResource); new Vue({ render: h => h(App) }) Post server data이번 예시에서는 간단하게 filebase database를 사용해 보겠다. (Firebase 콘솔에서 아주 쉽게 데이터베이스를 만들 수 있다. 간단한 테스트 용도로는 무료로 사용이 가능하다.) Http testing..

Input data bind basicinput tag에 데이터를 바인딩 하기 위해서는 v-model이 필요하다. v-model을 사용하면 아주 쉽게 데이터를 바인딩 시킬 수 있다.App.vueApp.vue에 email input 필드를 추가한 후, email 데이터를 만들고 v-model="email"로 해당 인풋 필드와 연결시켜준다. Email Mail: export default { data() { return { email: "" } } } 이제 input 필드에 값을 입력하면 아래 `` 데이터에 바인딩 되는 것을 볼 수 있다.v-model.lazyv-model은 기본적으로 모든 key stroke가 발생할 때마다 값을 업데이트 시킨다. 이를 방지하고 싶다면 v-model.lazy를 사용하면 된다..

Filtersvue.js는 default filter가 없기 때문에 사용하기 위해서는 직접 만들어야 한다.Local filter 만들기methods를 만드는 것처럼 아주 간단하게 만들 수 있다.lower case를 모두 upper case로 만들어 주는 필터를 만들어보겠다. export default { data() { return { text: 'Hello There!' } }, filters: { toUppercase(value) { return value.toUpperCase(); } } } 이제 HELLO THERE라고 출력되는 것을 볼 수 있다.Global filter 만들기, Filter chainglobal filter도 비슷하게 만들 수 있다. main.js에 Vue.filter()로 등록..

vue는 v-for, v-text 등 13가지 vue Directive들 이외에도, 커스텀 directive를 만들 수 있다는 큰 장점이 있다. 이는 여러 방면에서 유용하게 사용이 가능하다.vue의 기본 directive들은 이 글에서 다루었다.vue directive 만들기vue directive는 main.js에서 전역으로 만든다.Vue.directive();로 등록이 가능하다.main.js에서import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', {}); new Vue({ el: '#app', render: h => h(App) } hooks위의 directive 정의 객체는 5가지 훅 함수를 제공한다. 어떤 상황에서..

를 사용해서 컴포넌트 파트를 동적으로 변화시킬 수 있다.컴포넌트를 변경하면 매번 컴포넌트가 Destory되고 새로 생성된다.App.jsApp.js에서 selectedComponent라는 데이터를 생성하고, 3개의 컴포넌트를 해당 데이터에 바인딩해주는 버튼을 생성.를 이용해서 동적으로 템플릿에 뿌려주는 component를 변화시킬 수 있다. Quote Author New Default content dynamic component 동작원리위에서 언급했듯이, dynamic component를 사용하여 다른 컴포넌트로 전환하면 항상 해당 컴포넌트는 destory되고, 새 컴포넌트가 create 된다. destroyed lifecycle로 이를 확인해 볼 수 있다.couter 데이터를 증가시키는 간단한 방법으로..

Direcitve: “지시문”이라는 뜻으로 vue 엘리멘트에 사용되는 특별한 속성이다. 지금까지 다뤄온 v-model, v-for 등이 모두 지시문.디렉티브는 총 13가지가 있다. vue 2.0의 모든 디렉티브 리스트는 vue.js 공식 문서의 directives에서 자세한 확인이 가능하다.v-text내부의 값이 Vue 엘리멘트의 변수로 지정된다. ``와 v-text="text"는 동일하다고 볼 수 있다.v-htmlvue의 테이터는 태그 자체가 html에 표시된다. vue 엘리먼트의 데이터에 Hello를 넣고 html에 뿌려보면 그대로 출력되는 것을 볼 수 있다.이를 렌더링해서 Hello로 출력하고 싶을 때 v-html 디렉티브를 사용하면 된다.v-show해당 엘리멘트의 display: none을 활성화..