Vue 기본 문법
Front-end/Vue.js 2019. 2. 22. 14:09변수 Binding
<html>
<head>
</head>
<Body>
<div id="app">
<h2>{{product}} is in shock</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
product: 'Boots'
}
})
</script>
</Body>
</html>
for loop
<html>
<head>
</head>
<Body>
<div id="app">
<ul>
<li v-for="product in products">
{{product}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
'Boots',
'Jacket',
'Hiking Socks'
]
}
})
</script>
</Body>
</html>
서비스의 JSON 데이터 처리
<html>
<head>
</head>
<Body>
<div id="app">
<ul>
<li v-for="product in products">
{{product.quantity}} {{product.name}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
]
},
created () {
fetch('https://api.myjson.com/bins/74l63')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
</script>
</Body>
</html>
IF 문
<html>
<head>
</head>
<Body>
<div id="app">
<ul>
<li v-for="product in products">
{{product.quantity}} {{product.name}}
<span v-if="product.quantity === 0">
- OUT OF STOCK
</span>
</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
]
},
created () {
fetch('https://api.myjson.com/bins/74l63')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
</script>
</Body>
</html>
compute (합계 구하기)
<html>
<head>
</head>
<Body>
<div id="app">
<ul>
<li v-for="product in products">
{{product.quantity}} {{product.name}}
<span v-if="product.quantity === 0">
- OUT OF STOCK
</span>
</li>
</ul>
<h2>Total Inventory: {{totalProducts}}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
]
},
computed: {
totalProducts() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}
},
created () {
fetch('https://api.myjson.com/bins/74l63')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
</script>
</Body>
</html>
Control (버튼 추가)
<html>
<head>
</head>
<Body>
<div id="app">
<ul>
<li v-for="product in products">
{{product.quantity}} {{product.name}}
<span v-if="product.quantity === 0">
- OUT OF STOCK
</span>
<button @click="product.quantity += 1">
Add
</button>
<button @click="product.quantity -= 1">
Sub
</button>
</li>
</ul>
<h2>Total Inventory: {{totalProducts}}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
]
},
computed: {
totalProducts() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}
},
created () {
fetch('https://api.myjson.com/bins/74l63')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
</script>
</Body>
</html>
Control (입력상자 Input)
<html>
<head>
</head>
<Body>
<div id="app">
<ul>
<li v-for="product in products">
<input type="number" v-model.number="product.quantity">
{{product.name}}
<span v-if="product.quantity === 0">
- OUT OF STOCK
</span>
<button @click="product.quantity += 1">
Add
</button>
<button @click="product.quantity -= 1">
Sub
</button>
</li>
</ul>
<h2>Total Inventory: {{totalProducts}}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
]
},
computed: {
totalProducts() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}
},
created () {
fetch('https://api.myjson.com/bins/74l63')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
</script>
</Body>
</html>