Vue Document: English 中文
life cycle
Basic structure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <template>
<div></div>
</template>
<script>
export default {
name: '',
props: [...],
data() {
return {};
},
computed:{
...
}
methods: {
...
}
};
</script>
<style lang="css"></style>
|
Basic vue function
v-bind
1
2
3
4
5
6
7
| <option
v-for="(user, idx) in Users"
:key="idx"
:value="user.id"
@mousedown.prevent="multiSelectEvent"
>{{ user.name }}</option
>
|
v-bind:value is equal to :value
v-on
1
2
3
4
5
6
7
| <option
v-for="(user, idx) in Users"
:key="idx"
:value="user.id"
@mousedown.prevent="multiSelectEvent"
>{{ user.name }}</option
>
|
v-on:click is equal to @click
v-for
1
2
3
4
5
| <div
class="oneline"
v-for="(each, idx) in sortSummary(summary)"
:key="idx"
></div>
|
Not use v-for & v-if in one tag
Document
v-for have higher priority than v-if, Therefore, v-if will be run multiple times and all element will be render. However, you only need to render the element which v-if return true.
The solution is to make a method or computed that filter the element and return them
v-if
1
2
3
4
5
6
| <div v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="(error, idx) in errors" :key="idx">{{ error }}</li>
</ul>
</div>
|
v-show
1
2
3
| <span v-show="unevenlySplit && amount === ''" style="color: red"
>(amount should not empty)</span
>
|
v-model
1
2
3
4
5
| <select class="sortSummary" v-model="sortModel">
<option value="0">Not sort</option>
<option value="1">Sort by Payer</option>
<option value="2">Sort by receiver</option>
</select>
|
In input tag v-model = "something" is equal to :value="something @input="something = $event.target.value
v-text
1
| <span v-text="variable"></span>
|
This is equal to <span> {{variable}} </span>
Vuex
See my another post: Vuex Overview
Question facing
Vue can not use [] to modify an object in data;
We have to use this.$set(<object name>, <key>, <val>)
https://www.telerik.com/blogs/so-what-actually-is-vue-set
