no 잼 no gain

디렉티브 : vue 엘리먼트의 데이터, 함수 또는 event를 html tag와 연결 v-on 엘리먼트에 이벤트 리스너를 연결 DOM에 이벤트가 발생했을때 javascript를 실행 약어 : "v-on" ->> "@" html Hello Hello Hello javascript new Vue({ el: '#app', methods: { hello: function(){ alert('hello'); }, helloMsg: function(msg, e){ e.stopPropagation(); alert('hello' + ' ' + msg); } } }); v-bind html tag의 속성과 vue 데이터를 연결 약어 : "v-bind" ->> ":" html hello javascript new Vue({..

디렉티브 : vue 엘리먼트의 데이터, 함수 또는 event를 html tag와 연결 v-text 콧수염괄호와 동일 {{ message }} html {{message}} javascript new Vue({ el: '#app', data: { message: 'hello' } }); v-html Vue의 데이터를 html로 삽입 html javascript new Vue({ el: '#app', data: { message: 'hello Vue' } }); v-show css display 속성의 "block"/"none" 또는 jquery의 show()/hide() html show hide javascript new Vue({ el: '#app', data: { show: true, hide: fa..

템플릿 문법 html num >>> {{ num }} num + 1 >>> {{ num + 1 }} num == 1 >>> {{ num == 1 ? 'Y' : 'N' }} javascript new Vue({ el: '#app', data: { num: 1 } }); 결과

router-view 사용자가 url을 직접 입력하여 해당하는 url로 이동 html javascript var router = new VueRouter({ routes: [ { path: '/foo', component: { template: 'foo' } }, { path: '/bar', component: { template: 'bar' } } ] }); new Vue({ el: '#app', router: router }); view-link url 입력없이 링크를 클릭하여 해당하는 url로 이동 html foo bar javascript var router = new VueRouter({ routes: [ { path: '/foo', component: { template: 'foo' } }, ..

전역컴포넌트 등록 html javascript // 전역컴포넌트 한번 등록해서 Vue.component('g-component', { template:'전역컴포넌트' }); // 여러 인스턴스에 사용 가능 new Vue({el:'#app'}); new Vue({el:'#app2'}); 지역컴포넌트 등록 html javascript var data = { template:'지역컴포넌트' } new Vue({ el:'#app', components:{ 'l-component':data } });

Vue.js 인스턴스 생성 html {{num}} + javascript new Vue({ el:'#app', // Vue인스턴스와 html 요소를 연결 data:{ num:1 }, methods:{ addnum:function(){ this.num++; } } });