HOYA COMMENT

< html > < head > < title > test23 </ title > </ head > < body > < div id = "app" > < counter :initial-counter = "counter" ></ counter > < checkbox ></ checkbox > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > Vue . component ( 'counter' ,{ props: [ 'initialCounter' ], template: '<button @click = "addCounter">{{counter}}</button>' , data : function (){ return { counter: this . initialCounter }; }, methods: { addCounter : function (){ this . counter += 1 ; ...

< html > < head > < title > test22 </ title > </ head > < body > < div id = "app" > < child-component v-bind:propsdata = "msg1" ></ child-component > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > var component1 ={ template: "<div>hello{{msg2}} {{propsdata}}</div>" , props: [ 'propsdata' ], data : function (){ return { msg2 : '111' } } } new Vue ({ el: '#app' , data: { msg1: '안녕!!' }, components: { ...

< html > < head > < title > test22 </ title > </ head > < body > < div id = "app" > < child-component v-bind:propsdata = "msg1" ></ child-component > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > var component1 ={ template: "<div>hello{{propsdata}}</div>" , props: [ 'propsdata' ] } new Vue ({ el: '#app' , data: { msg1: '안녕!!' }, components: { 'child-component' :component1 } }) < / script > </ body > </ html >

< html > < head > < title > test21 </ title > </ head > < body > < div id = "app" > < child-component1 ></ child-component1 > < child-component2 ></ child-component2 > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > var child1 = { template : '<div>만나서 반가워요{{message1}}</div>' , data : function (){ return { message1: '안녕1' } } } var child2 = { template : '<div>고맙습니다 {{message2}}</div>' , data : function (){ return { message2: '안녕2' ...

< html > < head > < title > test21 </ title > </ head > < body > < div id = "app" > < child-component1 ></ child-component1 > < child-component2 ></ child-component2 > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > var child1 = { template : '<div>만나서 반가워요</div>' } var child2 = { template : '<div>고맙습니다</div>' } new Vue ({ el: '#app' , components: { 'child-component1' :child1 , 'child-component2' :child2 } }) < / script > </ body > ...

< html > < head > < title > test20 </ title > </ head > < body > < div id = "app" > < global-component ></ global-component > < local-component ></ local-component > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > var globalComponent = { template: '<div>안녕하세요!!</div>' }; var localComponent = { template: '<div>날씨가 좋아요</div>' } //전역 컴포넌트 //Vue.component('globalComponent', globalComponent); Vue . component ( 'global-component' , globalComponent ); new Vue ({ el: '#app' , //지역 컴포넌트 ...

< html > < head > < title > test19 </ title > </ head > < body > < div id = "app" > {{message}} < input @input = "inputMessage" :value = "message" > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , data: { message: '안녕하세요' }, methods: { inputMessage : function ( event ){ this . message = event . target . value ; } } }) < / script > </ body > </ html >