1. 기본구조
<div id="app"></div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#app',
created() {
// This code will run on startup
}
});
</script>
vue-loader and webpack module load
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue',
},
// ... your other loaders ...
]
}
2. template and data
<div id="app">
<p>Hello, {{ greetee }}!</p>
</div>
<script>
new Vue({
el: '#app',
data: {
greetee: 'world'
}
});
</script>
3. v-if / v-else / v-for
<div v-if="state === 'loading'">Loading…</div>
<div v-else-if="state === 'error'">An error occurred</div>
<div v-else>…our content!</div>
<li v-for="dog in dogs">{{ dog }}</li>
<li v-for="(rent, city) in averageRent">
4. v-bind
<div id="app">
<button v-bind:type="buttonType">Test button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
buttonType: 'submit'
}
});
</script>
<div id="app">
<button v-bind:disabled="buttonDisabled">Test button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
buttonDisabled: true
}
});
</script>
<div id="app">
<p>{{ seconds }} seconds have elapsed since you opened the page.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seconds: 0
},
created() {
setInterval(() => {
this.seconds++;
}, 1000);
}
});
</script>
5. properties
const vm = new Vue({
data: {
formData: {
username: 'someuser'
}
}
});
Vue.set(vm.formData, 'name', 'Some User');
const vm = new Vue({
data: {
dogs: ['Rex', 'Rover', 'Henrietta', 'Alan']
}
});
vm.dogs[2] = 'Bob'
6. data binding
<div id="app">
<input type="text" v-bind:value="inputText">
<p>inputText: {{ inputText }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
inputText: 'initial value'
}
});
</script>
<display-number v-bind:number="10"></display-number>
<div id="app">
<input type="text" v-model="inputText">
<p>inputText: {{ inputText }}</p>
</div>
7. html 표시
<div v-html="yourHtml"></div>
8. method
<div id="app">
<p>Current status: {{ statusFromId(status) }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
status: 2
},
methods: {
statusFromId(id) {
const status = ({
0: 'Asleep',
1: 'Eating',
2: 'Learning Vue'
})[id];
return status || 'Unknown status: ' + id;
}
}
});
</script>
<div id="app">
<ul>
<li v-for="number in filterPositive(numbers)">{{ number }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
numbers: [-5, 0, 2, -1, 1, 0.5]
},
methods: {
filterPositive(numbers) {
return numbers.filter((number) => number >= 0);
}
}
});
</script>
<div id="app">
<p>The sum of the positive numbers is {{ getPositiveNumbersSum() }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
numbers: [-5, 0, 2, -1, 1, 0.5]
},
methods: {
getPositiveNumbers() {
// Note that we're now using this.numbers
// to refer directly to the data object.
return this.numbers.filter((number) => number >= 0);
},
getPositiveNumbersSum() {
return this.getPositiveNumbers().reduce((sum, val) => sum + val);
}
}
});
</script>
<div id="app">
<p>Sum of numbers: {{ numberTotal }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
numbers: [5, 8, 3]
},
computed: {
numberTotal() {
return numbers.reduce((sum, val) => sum + val);
}
}
});
</script>
9. filter
<div id="app">
<p>Product one cost: {{ productOneCost | formatCost }}</p>
<p>Product two cost: {{ productTwoCost | formatCost }}</p>
<p>Product three cost: {{ productThreeCost | formatCost }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
productOneCost: 998,
productTwoCost: 2399,
productThreeCost: 5300
},
filters: {
formatCost(value) {
return '$' + (value / 100).toFixed(2);
}
}
});
</script>
<div id="app">
<input type="text" v-bind:value="productCost | formatCost('$')">
</div>
Vue.filter('formatCost', function (value, symbol) {
return symbol + (value / 100).toFixed(2);
});
10. event
<div id="app">
<button v-on:click="increase">Click to increase counter</button>
<p>You've clicked the button {{ counter }}</p> times.
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increase(e) {
this.counter++;
}
}
});
</script>
<a @click.prevent="handleClick">...</a>
<button @click.stop="handleClick">...</button>
<div id="app">
<form @keyup="handleKeyup">...</form>
</div>
<script>
new Vue({
el: '#app',
methods: {
handleKeyup(e) {
if (e.keyCode === 27) {
// do something
}
}
}
});
</script>
<form @keyup.27="handleEscape">...</form>
<form @keyup.shift-left="handleShiftLeft">...</form>
<div id="app">
<p>Hello world</p>
</div>
<script>
new Vue({
el: '#app',
mounted() {
// Element might not have been added to the DOM yet
this.$nextTick(() => {
// Element has definitely been added to the DOM now
});
}
});
</script>
11. class binding
<div id="app">
<div v-bind:class="[firstClass, secondClass]">
...
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
firstClass: 'foo'
},
computed: {
secondClass() {
return 'bar';
}
}
});
</script>
12. component
<div id="app">
<custom-button></custom-button>
</div>
<script>
const CustomButton = {
template: '<button>Custom button</button>'
};
new Vue({
el: '#app',
components: {
CustomButton
}
});
</script>
Vue.component('price-display', {
props: {
price: Number,
unit: String
}
});
13) lifecycle hooks
- beforeCreate : Vue instance 만들어질때 call (vue 무엇인가 작업하기 전)
- created : Vue instance 준비되고 나서 call ( vue instance는 dom에 포함되지 않음 )
- beforeMount : Vue instance가 web pages 추가 되기 전 call
- mounted : Vue instance가 web page에 추가되고 dom에서 visable할때 call
- beforeUpdate : data 또는 computed property가 변경될때 call (instance에 update 필요할때)
- updated : data 변경이 template 적용된후 call (dom에는 아직 반영 되지 않음)
- beforeDestory : Vue instance가 다운되기 전 call
- destroyed : Vue instance가 remove 될때 call
* 동일한 이름으로 함수 생성
99) etc
const UserView = {
template: `
<div>
<p v-if="user">User name: {{ user.name }}</p>
<p v-else>Loading...</p>
</div>`,
props: {
userId: {
type: Number,
required: true
}
},
data: () => ({
user: undefined
},
mounted() {
fetch(`/api/user/${this.userId}`)
.then((res) => res.json())
.then((user) => {
this.user = user;
});
}
};
'기타' 카테고리의 다른 글
| node.js 설치 (0) | 2018.11.26 |
|---|---|
| telegraf 설정 예제 (0) | 2018.07.13 |
| grafana 구성 (0) | 2018.03.26 |
| certbot (0) | 2018.02.02 |
| DNS 설정 (0) | 2018.01.11 |