template μμ±μ μ¬μ©νμ§ μλ κ²½μ°
<div id="app"> <h3>{{message}}}}</h3> </div> <script> new Vue({ el:'#app', data:{ message: 'Hello Vue.js!' } }); </script>
template μμ±μ μ¬μ©ν κ²½μ°
<div id="app"></div> <script> new Vue({ el:'#app', data: { message: 'Hello Vue.js!' }, template: '<h3>{{ message }}</h3>' }); </script>
<div id="app" v-once>
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data:{
message:'Hello vue.js!'
}
})
</script>
{{ }} - μ½§μμΌ κ΄νΈ
- λ·° μΈμ€ν΄μ€μ λ°μ΄ν°λ₯Ό HTML νκ·Έμ μ°κ²°νλ κ°μ₯ κΈ°λ³Έμ μΈ ν μ€νΈ μ½μ λ°©μμ΄λ€.
- data μμ±μ message κ°μ΄ λ°λλ©΄ λ·° λ°μμ±μ μν΄ νλ©΄μ΄ μλμΌλ‘ κ°±μ λλ€.
- λ·° λ°μ΄ν°κ° λ³κ²½λμ΄λ κ°μ λ°κΎΈκ³ μΆμ§ μμ λ, v-once μμ±μ μ¬μ©νλ€.
<div id="app">
<p v-bind:id="idA">μμ΄λ λ°μΈλ©</p>
<p v-bind:class="classA">ν΄λμ€ λ°μΈλ©</p>
<p v-bind:style="styleA">μ€νμΌ λ°μΈλ©</p>
</div>
<script>
new Vue({
el:'#app',
data:{
idA: 10,
classA: 'container',
styleA: 'color:blue'
}
});
</script>
v-bind
- μμ΄λ, ν΄λμ€, μ€νμΌ λ±μ HTMLμμ± κ°μ λ·° λ°μ΄ν° κ°μ μ°κ²°ν λ μ¬μ©νλ λ°μ΄ν° μ°κ²° λ°©μμ΄λ€.
- 'v-bind:' λ¬Έλ²μ ':'λ‘ κ°μνν μ μλ€.
<div id="app">
<p>{{message}}</p>
<p>{{message + '!!!'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message: 'Hello Vue!'
}
});
</script>
π’ μλ°μ€ν¬λ¦½νΈ ννμμμ μ£Όμν μ
- μλ°μ€ν¬λ¦½νΈμ μ μΈλ¬Έκ³Ό λΆκΈ° ꡬ문μ μ¬μ©ν μ μλ€.
- 볡μ‘ν μ°μ°μ μΈμ€ν΄μ€ μμμ μ²λ¦¬νκ³ νλ©΄μλ κ°λ¨ν μ°μ° κ²°κ³Όλ§ νμν΄μΌνλ€.
<div id="app">
{{ var a = 10; }} <!-- X, μ μΈλ¬Έμ μ¬μ© λΆκ°λ₯ -->
{{ if (true) {return 100} }} <!-- X, λΆκΈ° ꡬ문μ μ¬μ© λΆκ°λ₯ -->
{{ true ? 100 : 0 }} <!-- O, μΌν μ°μ°μλ‘ νν κ°λ₯ -->
{{ message.split('').reverse().join('') }} <!-- X, 볡μ‘ν μ°μ°μ μΈμ€ν΄μ€ μμμ μν -->
{{ reversedMessage }} <!-- O, μ€ν¬λ¦½νΈμμ computed μμ±μΌλ‘ κ³μ°ν ν μ΅μ’
κ°λ§ νν -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message: 'Hello Vue!'
},
computed : { //λ°μ΄ν° μμ±μ μλμΌλ‘ κ³μ°ν΄ μ£Όλ μμ±
reversedMessage : function() { // {{ reversedMessage }}μ ννλμ§ μ μ μ°μ°μ μννλ ν¨μ
return this.message.split('').reverse().join('');
}
}
});
</script>
λλ ν°λΈ μ΄λ¦ | μν |
---|---|
v-if | μ§μ ν λ·° λ°μ΄ν° κ°μ μ°Έ, κ±°μ§ μ¬λΆμ λ°λΌ ν΄λΉ html νκ·Έλ₯Ό νλ©΄μ νμνκ±°λ νμνμ§ μλλ€. |
v-for | μ§μ ν λ·° λ°μ΄ν°μ κ°μλ§νΌ ν΄λΉ htmlνκ·Έλ₯Ό λ°λ³΅ μΆλ ₯νλ€. |
v-show | v-ifμ μ μ¬νκ² λ°μ΄ν°μ μ§μ μ¬λΆμ λ°λΌ ν΄λΉ html νκ·Έλ₯Ό νλ©΄μ νμνκ±°λ νμνμ§ μλλ€. λ€λ§, v-ifλ ν΄λΉ νκ·Έλ₯Ό μμ ν μμ νμ§λ§ v-showλ display:none μ²λ¦¬λ₯Ό νμ¬ νκ·Έλ λ¨μμκ³ νλ©΄ μμλ§ λ³΄μ΄μ§ μκ² λλ€. |
v-bind | html νκ·Έμ κΈ°λ³Έ μμ±κ³Ό λ·° λ°μ΄ν° μμ±μ μ°κ²°νλ€. |
v-on | νλ©΄ μμμ μ΄λ²€νΈλ₯Ό κ°μ§νμ¬ μ²λ¦¬ν λ μ¬μ©νλ€. μλ₯Ό λ€μ΄ v-on:clickμ ν΄λΉ νκ·Έμ ν΄λ¦ μ΄λ²€νΈλ₯Ό κ°μ§νμ¬ νΉμ λ§€μλλ₯Ό μ€ν ν μ μλ€. |
v-model | νΌ(form)μμ μ£Όλ‘ μ¬μ©λλ μμ±μ΄λ€. νΌμ μ λ ₯ν κ°μ λ·° μΈμ€ν΄μ€μ λ°μ΄ν°μ μ¦μ λκΈ°ν νλ€. νλ©΄μ μ λ ₯λ κ°μ μ μ₯νμ¬ μλ²μ 보λ΄κ±°λ μΆκ° λ‘μ§μ μνν μ μλ€. input, selsect, textarea νκ·Έμλ§ μ¬μ©ν μ μλ€. |
<div id="app">
<a v-if="flag">λμ vue</a>
<ul>
<li v-for="system in systems">{{ system }}</li>
<!-- v-for = "μμ΄ν
λͺ
in array" -->
</ul>
<p v-show="flag">λμ vue</p>
<h5 v-bind:id = "uid">λ·° μ
λ¬Έμ</h5>
<!-- v-bind:μμ± = "μμ±μ΄λ¦" -->
<button v-on:click = "popupAlert">κ²½κ³ μ°½ λ²νΌ</button>
<!-- v-on:μ΄λ²€νΈμ΄λ¦ = "λ©μλμ΄λ¦" -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
flag:true,
systems : ['andoroid', 'ios', 'window'],
uid: 10
},
methods : {
popupAlert : function() {
return alert('κ²½κ³ μ°½ νμ');
}
}
});
</script>
computed μμ±μ μ₯μ
computed μμ±κ³Ό methods μμ±μ μ°¨μ΄μ
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMsg">λ¬Έμμ΄ μμ</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message:'Hello Vue!'
},
// methods μμ±
methods: {
reverseMsg: function(){
this.message = this.message.split('').reverse().join('');
return this.message;
}
}
});
</script>
π’ λΉλκΈ° μ²λ¦¬λ?
μΉμμ λ°μ΄ν°λ₯Ό νΈμΆν λ, μλ²μ λ³΄λΈ μμ²μ΄ μΈμ μλ΅μ΄ μ¬μ§ μ μ μκΈ° λλ¬Έμ, μλ°μ€ν¬λ¦½νΈ μ°μ°μ μν₯μ μ£Όμ§ λͺ»νλλ‘ λ³λμ μμμμ ν΄λΉ λ°μ΄ν°λ₯Ό μμ²νκ³ μλ΅μ κΈ°λ€λ¦¬λ κ²μ λ§νλ€.
<div id="app">
<input v-model="message">
<!-- v-model λ·° μΈμ€ν΄μ€μ λ°μ΄ν°μ μ¦μ λκΈ°ννλ€. νλ©΄μ μ
λ ₯λ κ°μ μ μ₯νμ¬ μλ²μ 보λ΄κ±°λ watchμ κ°μ κ³ κΈ μμ±μ μ΄μ©νμ¬ μΆκ° λ‘μ§μ μννλ€ -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message: 'Hello Vue!'
},
watch: {
message: function(data){
console.log("messageμ κ°μ΄ λ°λλλ€ :", data);
}
}
});
</script>