신입개발자_장민기

v-once1: {{ username }} v-once2: {{ username }} {{ changeName() }} export default { data:function(){ return { username: "홍길동" } }, methods: { changeName: function(){ this.username = "이순신" } } }

v-on:이벤트명="처리 함수" @이벤트명="처리 함수" v-on:click="handleEvent" v-on:click="xxx('홍길동')" v-on:click="yyy('홍길동', $event)" @click="handleEvent" @click="xxx('홍길동')" @click="yyy('홍길동', $event)" 속성을 이용한 데이터 전송 export default { data:function(){ return { num: 100 } }, methods: { handleEvent :function(data){ console.log("ok" + this.num, data) }, xxx :function(name){ console.log("ok" + this.num, name) }, yyy :fu..

v-for="값 in 값들" [v-bind]:key="유일값" {{값}} return {값들 : [] } return {값들 : [] } {{ name }} {{idx+1}} {{ name }} export default { data: function(){ return { names : ['홍길동', '이순신', '유관순'] //값들 } } } images-App.vue import HelloWorld from './components/HelloWorld.vue' export default { components:{ HelloWorld }, data: function(){ return { list : [ {id:"p01", name:"위험한 식탁", price:2000, data:"20170401", i..

v-Show="조건" true1 true2 !false false !true flag export default { data: function(){ return { flag: true } } } h1{ color: red } v-if="조건" hidden처럼 감춰짐(랜더링 되지 않음) hello1 hello2 hello1 export default { data: function(){ return { amount: 1 } } } h1{ color: red } v-if 응용 {{name}} 정상 입력 이름은 4글자까지 입니다. {{age}} 정상 입력 나이는 10세이상 100세 이하까지입니다. 이름의 길이: {{ name.length }} 나이: {{ age }} export default { data: f..

v-bind: 단방향 바인딩 [v-bind]: 속성명 = 객체 데이터 mesg: v-bind:value="mesg": :value="mesg": export default { data: function(){ return { mesg: "메세지" } } } h1{ color: red } 쌍방향 바인딩 v-model: '객체의 속성명' 속성: {{ mesg }} v-model="mesg": v-model="mesg": v-bind:value="mesg": :value="mesg": export default { data: function(){ return { mesg: "메세지" } }, methods:{ getMesg: function(){ return this.mesg; } } } h1{ color: r..

최초 형성 시 beforeCreate created beforeMount mounted 과정을 거침 부모 - beforeCreate - created - beforeMount 자식 - beforeCreate - created - beforeMount - mounted 부모 - mounted =================== 자식 - beforeUpdate - updated HelloWorld {{ mesg }} App

HelloWorld.vue {{mesg}} {{ username }} {{ age }} {{ sayEcho() }} {{ info() }} export default { props:{ mesg: String }, data:function(){ return { username: "홍길동", age: "20" } }, methods: { sayEcho: function(){ console.log("sayEcho"); return this.username + "\t" + this.age; }, info: () => { console.log("info "+this); //this는 undefinded return this; } }, }

App.vue HelloWorld.vue {{ username }} {{ age }} {{ mesg }} {{ xxx() }} {{ yyy('y함수 내부') }}

App.vue {{ x }} {{ y }} {{ p }} {{ p.username }} {{ p.age }} 람다식 data: () => [{] 함수 내부 [}] v-bind를 사용하지 않으면 function의 변수임을 인식할 수 없다.

App.vue {{ x }} {{ y }} {{ z }} {{ k }} {{ k.aa }} {{ k.bb }} {{ p }} Person.js export class Person{ constructor(username, age){ this.username = username; this.age = age; } getUsername(){ return this.username; } getAge(){ return this.age; } } HelloWorld.vue {{ username }} {{ age }} {{ myAddress }}