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 >

< html > < head > < title > test18 </ title > </ head > < body > < div id = "app" > < a href = "http://www.google.com" @click.once.prevent = "showAlert" > google </ a > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , methods: { showAlert : function (){ alert ( "있을때 잘하자" ) } } }) < / script > </ body > </ html >

< html > < head > < title > test17 </ title > </ head > < body > < div id = "app" > < a href = "http://www.google.com" > google </ a > < a href = "http://www.naver.com" @click = "prevent" > naver </ a > < a href = "http://www.daum.net" @click.prevent > daum </ a > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , methods: { prevent : function (){ event . preventDefault (); } } }) < / script > </ body > </ html >

< html > < head > < title > test13 </ title > < style > div { padding : 20px ;} #outer { background : blue ;} #middle { background : green ;} #inner { background : white ;} < / style > </ head > < body > < div id = "app" > < div id = "outer" @click.self = "func1" > 1 < div id = "middle" @click = "func2" > 2 < div id = "inner" @click.self = "func3" > 3 </ div > </ div > </ div > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > ...

< html > < head > < title > test13 </ title > < style > div { padding : 20px ;} #outer { background : blue ;} #middle { background : green ;} #inner { background : white ;} < / style > </ head > < body > < div id = "app" > < div id = "outer" @click = "func1" > 1 < div id = "middle" @click.stop = "func2" > 2 < div id = "inner" @click = "func3" > 3 </ div > </ div > </ div > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > ...

< html > < head > < title > test13 </ title > < style > div { padding : 20px ;} #outer { background : blue ;} #middle { background : green ;} #inner { background : white ;} < / style > </ head > < body > < div id = "app" > < div id = "outer" @click.capture = "func1" > 1 < div id = "middle" @click = "func2" > 2 < div id = "inner" @click = "func3" > 3 </ div > </ div > </ div > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > ...

< html > < head > < title > test13 </ title > </ head > < body > < div id = "app" > < div id = "outer" @click = "func1" > 1 < div id = "middle" @click = "func2" > 2 < div id = "inner" @click = "func3" > 3 </ div > </ div > </ div > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , methods: { func1 : function (){ console . log ( '1-outer' ) ...

< html > < head > < title > test12 </ title > </ head > < body > < div id = "app" > < button @click = "issue1" > Issue1 </ button > < button @click = "solution1" > Solution1 </ button > < button @click = "issue2" > issue2 </ button > < button @click = "solution2" > Solution2 </ button > < div v-for = "item in items" > {{item}} </ div > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , data: { items: [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 ] }, ...

< html > < head > < title > test11 </ title > </ head > < body > < div id = "app" > < button @click = "changeSet" > Change Set </ button > < div v-for = "item in items" :key = "item.key" @click = "paint" > key:{{item.key}} / ID:{{item.id}} </ div > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , mounted : function (){ this . changeSet (); }, data: { presetNumber : 0 , items: [], preset: [ [{ id: 1 , key: 1 }, ...

< html > < head > < title > test10 </ title > </ head > < body > < div id = "app" > < ul > < li v-for = "todo in todos" v-if = "todo.when!='tommorow'" > {{todo.when}} {{todo.what}} </ li > </ ul > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , data: { todos: [ { when: 'today' , what: 'study' }, { when: 'tommorow' , what: 'balling' }, { when: 'week' , ...

< html > < head > < title > test9 </ title > </ head > < body > < div id = "app" > < ul > < li v-for = "(number, index) in numbers" > {{index}}, {{number}} </ li > </ ul > < br > < ul > < li v-for = "(item,key) in object" > {{key}}, {{item}} </ li > </ ul > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , data: { numbers: [ 1 , 2 , 3 , 4 , 5 , 6 , 1 , 2 , 3 , 5 ], object: { name: 'Son' , age: 10 , ...

< html > < head > < title > test8 </ title > </ head > < body > < div id = "app" > < span v-show = "isShow" > Hello </ span > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , data: { isShow: false } }) < / script > </ body > </ html >

< html > < head > < title > test7 </ title > </ head > < body > < div id = 'app' > < template v-if = "bFlag == true" > < p > 아침식사 됩니다. </ p > < p > 09:00~11:00 </ p > </ template > < template v-if = "bFlag == false" > < p > 저녁식사 됩니다. </ p > < p > 17:00~21:00 </ p > </ template > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , data: { bFlag: true } }) < / script > </ body > </ html >

< html > < head > < title > test6 </ title > </ head > < body > < div id = 'app' > < span v-if = "Alphabet=='a'" > A 입니다 </ span > < span v-else-if = "Alphabet=='b'" > B 입니다 </ span > < span v-else > 그외 나머지 입니다 </ span > </ div > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < script > new Vue ({ el: '#app' , data: { Alphabet: 'a' } }) < / script > </ body > </ html >