vuejs

CONTENTS
3. A Flavor of Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.1 v-show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2 v-if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.1 Template v-if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 v-else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.4 v-if vs. v-show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4. List Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1 Install & Use Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2 v-for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2.1 Range v-for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.3 Array Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.3.1 Loop Through an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.3.2 Loop Through an Array of Objects . . . . . . . . . . . . . . . . . . . . . . . 27
4.4 Object v-for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4.5 Filtered Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.6 Ordered Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.7 Custom Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.8 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5. Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.1 Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.1.1 Handling Events Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.1.2 Handling Events using Methods . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.1.3 Shorthand for v-on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.2 Event Modifiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.3 Key Modifiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.4 Computed Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.4.1 Using Computed Properties to Filter an Array . . . . . . . . . . . . . . . . . 59
5.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
6. Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
6.1 What are Components? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
6.2 Using Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
6.3 Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
6.4 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
6.5 Reusability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
6.6 Altogether now . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
6.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
7. Class and Style Bindings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
7.1 Class binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
7.1.1 Object Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83