Download as PDF, PPTX
![const routes = [
{ path: '/products', component: Products },
{ path: '/products/:id', component: ProductDetail }
]
5 . 11](https://cdn.statically.io/img/image.slidesharecdn.com/vuejsvuex-180518001118/75/Vue-fundamentasl-with-Testing-and-Vuex-86-2048.jpg)
![const routes = [
{ path: '/products', component: Products, name: 'products' }
{ path: '/products/:id', name: 'product', component: Product
{ path: '/**', component: NotFound }
]
5 . 17](https://cdn.statically.io/img/image.slidesharecdn.com/vuejsvuex-180518001118/75/Vue-fundamentasl-with-Testing-and-Vuex-92-2048.jpg)
![default - refers to an unnamed router-view
footer - is our named router-view
const routes = [
{ path: '/products',
components: {
default: Products,
footer: Footer
},
},
]
5 . 23](https://cdn.statically.io/img/image.slidesharecdn.com/vuejsvuex-180518001118/75/Vue-fundamentasl-with-Testing-and-Vuex-98-2048.jpg)
![<template>
<div class="about">
<h1>{{msg}}</h1>
<h2>{{title}}</h2>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return { msg: 'about page of the app' }
},
props: ['title']
}
</script>
6 . 7](https://cdn.statically.io/img/image.slidesharecdn.com/vuejsvuex-180518001118/75/Vue-fundamentasl-with-Testing-and-Vuex-107-2048.jpg)
![mutations: {
addProduct(state, payload) {
this.products = [ ...this.state.products, { ...payload }]
}
}
7 . 20](https://cdn.statically.io/img/image.slidesharecdn.com/vuejsvuex-180518001118/75/Vue-fundamentasl-with-Testing-and-Vuex-143-2048.jpg)
Uploaded byChristoffer Noring
Vue fundamentasl with Testing and Vuex
Vue and Vuex allow you to build interactive web applications. The document discusses Vue basics like creating components, passing data between components using props and events, and routing between multiple pages. It also covers more advanced topics such as validating component inputs, watching for data changes, and using route parameters and query strings.
Vue fundamentasl with Testing and Vuex
- 1. VUE AND VUEXVUEAND VUEX CHRIS NORINGCHRIS NORING Google Developer Expert @chris_noring McKinsey 1
- 2. WHY SHOULD YOUWHYSHOULD YOU CARE?CARE? Vue.js 93000 stars on github, React 95000 stars on github, Angular 36000 stars on github AngularJS 58000 stars on github It's really easy, great documentation The interest is there, now we are just waiting for adoption 2 . 1
- 3.
- 4. Let's start withthe DOM 3 . 2
- 5. <html> <body> <div id="app"> {{ message}} {{ other message }} </div> <!-- development version, includes helpful console warning <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" <script src="app.js"></script> </body> </html> 3 . 3
- 6. Now let's createour Vue app ! 3 . 4
- 7. el - HTMLelement where the app is rendered data - where the data is var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', otherMessage: 'other message' } }) 3 . 5
- 8.
- 9.
- 10. What happened here? Weinstantiated an App component to create our Vue app new Vue({ ... definition }) We used interpolation {{}} - to show data 3 . 7
- 11. HOW DO WERENDER A LIST?HOW DO WE RENDER A LIST? 3 . 8
- 12. Use the structuraldirective v-for Add a list to our data property 3 . 9
- 13. var app =new Vue({ el: '#app', data: { message: 'Hello Vue!', items: [{ id: 1, title: 'an item' }, { id: 2, title: 'a ne } }) 3 . 10
- 14. v-for renders list <divv-for="item in items"> {{item.title}} </div> 3 . 11
- 15. How do wedo Conditional rendering? 3 . 12
- 16. Should I v-ifit or v-else it? v-if render if true v-else render if false 3 . 13
- 17. <div v-if="hasError"> {{ error}} </div> <div v-else> All good here </div> 3 . 14
- 18. WORKING WITH FORMWORKINGWITH FORM CONTROLSCONTROLS 3 . 15
- 19.
- 20. v-model two-way binding data:{ newItem: '' } <input v-model="newItem" /> 3 . 17
- 21. Checkbox element <input type="checkbox"id="checkbox" v-model="checked"> 3 . 18
- 22. You can binda list of checkboxes to an array 3 . 19
- 23. ['Donatello', 'Michelangelo', 'Rafael'] <divid='example-3'> <input type="checkbox" id="Donatello" value="Donatello" v-model="checkedTurtles"> <label for="Donatello">Donatello</label> <input type="checkbox" id="Michelangelo" value="Michelangelo v-model="checkedTurtles"> <label for="Michelangelo">Michelangelo</label> <input type="checkbox" id="Rafael" value="Rafael" v-model="checkedTurtles"> <label for="Rafael">Rafael</label> <br> <span>Checked turtles: {{ checkedTurtles }}</span> </div> 3 . 20
- 24. You can binda list of radio buttons to the same v- model 3 . 21
- 25. side = Shredderor Splinter <input type="radio" id="Shredder" value="Shredder" v-model="side"> <label for="Shredder">Bad guys</label> <br> <input type="radio" id="Splinter" value="Splinter" v-model="side"> <label for="Splinter">Good guys</label> 3 . 22
- 26. we can easilycapture the selected value in a Select with v-model 3 . 23
- 27. <select v-model="selectedTeam"> <option v-for="optionin teams" v-bind:value="option.value"> {{ option.text }} </option> </select> 3 . 24
- 28. What about methods? 3 . 25
- 29. v-on:event long name @eventshort hand this.newItem no need for this.data.newItem data: { newItem: '' }, methods: { save() { console.log('value of input ' + this.newItem); } } <button v-on:click="save">Save</button> 3 . 26
- 30. So we learnedthe Vue basics on creating an app, structural directives and so on. Am I a Vue ninja now? 3 . 27
- 31. Patience my youngturtle, we need to learn about components first 3 . 28
- 32.
- 33. Vue.component() Vue.component('componentName', { ... objectdefinition }) 4 . 2
- 34.
- 35. template, methods ... Vue.component('product',{ template: ` <div> <input v-model="product" /> <button v-on:click="save">Save</button> </div> `, data() { return { product: void 0 } }, methods: { async save() { await api.createProduct(this.product); this.product = ''; } } }) 4 . 4
- 36. COMPONENT WITH ACHILDCOMPONENT WITH A CHILD COMPONENTCOMPONENT 4 . 5
- 37. Vue.component('parent', { template: ` <div> Parent:<child /> </div> ` }) Vue.component('child', { template: ` <div> <strong>Child</strong> </div> ` }) 4 . 6
- 38. CREATING COMPONENTS WITHCREATINGCOMPONENTS WITH ES6 MODULE/ VUE-CLIES6 MODULE/ VUE-CLI APPROACHAPPROACH 4 . 7
- 39. 1 file =1 component 4 . 8
- 40. Component consists ofthe following: template - tag , this is where your HTML markup lives script -tag, this is where the component JS lives style - tag , this is where the styles are defined 4 . 9
- 41. <template> <div class="hello"><h1>{{ msg}}</h1></div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Vue' } } } </script> <style scoped> .hello { padding: 10px; } </style> 4 . 10
- 42. No CSS leakagewith scoped styles WINNING 4 . 11
- 43. What about childcomponents? 4 . 12
- 44. To be ableto use child component we need to: import the child component register it with its parent component 4 . 13
- 45. import - importmodule components - place child component here import Test from './Test.vue' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Vue' } }, components: { Test } } 4 . 14
- 46. Then we arefree to use it in our template, like so 4 . 15
- 47. <template> <div class="hello"> <h1>{{ msg}}</h1> <test></test> </div> </template> 4 . 16
- 48.
- 49. props: ['input1', 'input2'] v-bind:propNameor :propName v-bind - bind input props - declare input name Vue.component('product', { template : ` <div> Product name {{ item.name }} </div> `, props: ['item'] }) // usage <product v-bind:item="product"></product> 4 . 18
- 50. COMPONENT INPUT VALIDATIONCOMPONENTINPUT VALIDATION Gives off warning in the console if validation fails 4 . 19
- 51.
- 52. props propName: dataType props:{ year: Number, title: String ... } 4 . 21
- 53.
- 54. object type, required props: { title : { type: String, required: true } } 4 . 23
- 55. Specify a defaultobject, if input is missing 4 . 24
- 56. default if propis missing, this is what gets assigned props : { product : { type: Object, default: function() { return { name: 'Unknown product' }; } } } 4 . 25
- 57. pro tip -use :product instead of v-bind:product // product set, will use supplied value <product-detail :product="product"></product-detail>> // product NOT set, will use default value <product-detail></product-detail> 4 . 26
- 58.
- 59. validator must returntrue/false props : { age : { type: Number, validator: function(value){ return value >=18; } } } 4 . 28
- 60. data: { age: 11 } //validation kicks in, reports error <product-detail :age="age"></product-detail> data: { age: 19 } // everything is good <product-detail></product-detail> 4 . 29
- 61.
- 62. let's start withthe parent 4 . 31
- 63. template: ` <product-detail :product="product"@save="handleSave" /> `, data() { return { product: { name: 'something' } } }, methods: { handleSave(payload) { console.log('called from child', payload) } } 4 . 32
- 64. now for thechild component 4 . 33
- 65. $emit('eventName', payload) Vue.component('product-detail', { template: ` <div> Product name {{ item }} <button v-on:click="$emit('save', someData)">Save</button> </div> `, props: ['item'], data() { return { someData: Object.assign({}, this.item); } } }) 4 . 34
- 66. SCENARIOSCENARIO We want tochange a product locally and save it when we are done editing 4 . 35
- 67. We call select()when we select an item in a list Vue.component('parent', { template: ` <div v-for="product in products"> {{ product.title }} <button v-on:click="select(product)">Select</button> </div> <product-detail v-on:save="save" :product="selectedProduct `, methods : { select(product) { this.selectedProduct = product; }, save(p) { this.product = p; } }, data: { selectedProduct: void 0, products: [...] } }) 4 . 36
- 68. We copy ourinput to a local object p Vue.component('product-detail', { template: ` <div> <input v-model="p.title" /> <button v-on:click="$emit('save',p)">Save changes</butto </div> `, data() { return { p: { ...this.product }; } }, props: ['product'] }) 4 . 37
- 69. It doesn't updatewhen I do a new selection :( 4 . 38
- 70. Let's look atthe parent template again The input :product doesn't seem to listen to changes template: ` <div v-for="product in products"> {{ product.title }} <button v-on:click="select(product)"></button> </div> <product-detail v-on:save="save" :product="selectedProduct" ` 4 . 39
- 71. Solution: use awatch property to fix that 4 . 40
- 72. Our p propertyis reset on change Vue.component('product-detail', { ... watch: { p(newVal, oldVal) { this.p = { ...this.product }; } } props: ['product'] }) 4 . 41
- 73. Everything works now,yeah :) 4 . 42
- 74. Alright I'm ready.Let's do this 4 . 43
- 75. Wait, your appis going to need more than one page, it's time to learn about routing 4 . 44
- 76. ROUTINGROUTING We need multiplepages in our app right? 5 . 1
- 77. SET UP THEROUTESSET UP THE ROUTES 5 . 2
- 78. Define a routesarray 5 . 3
- 79. path - isthe url component - is the component that should respond const routes = [ { path: '/products', component: Products }, { path: '/treasure', component: Treasure } ] 5 . 4
- 80. const router =new VueRouter({ routes // short for `routes: routes` }) 5 . 5
- 81. DEFINE A VIEWPORTDEFINEA VIEWPORT Use router-outlet element 5 . 6
- 82. <div id="app"> <div>Menu</div> <router-outlet /><!-- render route content here --> <div>Footer</div> </div> 5 . 7
- 83. How to navigate? Answer:Define a link 5 . 8
- 84.
- 85. What about routingwith params in them, aka wildcard routing ? 5 . 10
- 86. const routes =[ { path: '/products', component: Products }, { path: '/products/:id', component: ProductDetail } ] 5 . 11
- 87. Ok so wecan now match /products/11 or /products/114 How do we dig out the parameter? 5 . 12
- 88. this.$route.params.id gives usthe parameter const ProductDetail = { template: ` <div> Product {{ product.name }} </div> `, data() { let product = products.find(p => this.$route.params.id); return { product }; } } 5 . 13
- 89. What about queryparams? /products?pageSize=10&page=2 $route.query.queryParam 5 . 14
- 90. this.$route.query.queryParam gives usthe parameter const ProductDetail = { template: ` <div> Product {{ product.name }} </div> `, async data() { let product = await getProducts($route.query.page, $route. return { product }; } } 5 . 15
- 91. Let's face it,our user will mistype the url at some point, we need a 'Catch all route' 5 . 16
- 92. const routes =[ { path: '/products', component: Products, name: 'products' } { path: '/products/:id', name: 'product', component: Product { path: '/**', component: NotFound } ] 5 . 17
- 93. Programmatic routing, wecan navigate by url as well as name 5 . 18
- 94. methods: { back() { this.$router.push('/products?a=1&b=2'); }, backName(){ this.$router.push({ name: 'products' }); } } 5 . 19
- 95. You can haveMultiple view ports 5 . 20
- 96. <div> <router-view class="header" name="header"></router-view> </div> <div> <router-viewclass="body"></router-view> </div> <div> <router-view class="footer" name="footer"></router-view> </div> 5 . 21
- 97. Give router-view aname and we can route to it 5 . 22
- 98. default - refersto an unnamed router-view footer - is our named router-view const routes = [ { path: '/products', components: { default: Products, footer: Footer }, }, ] 5 . 23
- 99. Don't tell me,there is more right? 5 . 24
- 100. Well yes, weneed to learn how test our app... 5 . 25
- 101.
- 102. The easiest wayto get started with testing is using vue- cli 6 . 2
- 103. Type of testingyou can do Unit testing, Karma, Mocha, Chai or Jest E2E testing, Nightwatch 6 . 3
- 104. HOW DO WECONSTRUCT A UNIT TEST?HOW DO WE CONSTRUCT A UNIT TEST? Get a constructor reference Instantiate constructor Call mount Find the element in question Assert 6 . 4
- 105. import Vue from'vue' import Test from '@/components/Test' describe('Test.vue', () => { it('should render correct contents', () => { const Constructor = Vue.extend(Test) const vm = new Constructor().$mount() expect(vm.$el.querySelector('.test h1').textContent) .to.equal('Testing...') }) }) 6 . 5
- 106. Scenario: we havea component with input props 6 . 6
- 107. <template> <div class="about"> <h1>{{msg}}</h1> <h2>{{title}}</h2> </div> </template> <script> export default{ name: 'About', data () { return { msg: 'about page of the app' } }, props: ['title'] } </script> 6 . 7
- 108. And now tothe test 6 . 8
- 109. propsData needs tobe set describe('About.vue', () => { it('should render correct contents', () => { const Constructor = Vue.extend(About) const vm = new Constructor({ propsData: { title: 'abc' } }).$mount() expect(vm.$el.querySelector('.about h2').textContent) .to.equal('abc') }) }) 6 . 9
- 110. How do wedeal with events? 6 . 10
- 111. <template> <div class="test"> <h1>{{msg}}</h1> <button class="change-button"@click="change">Change</butt </div> </template> <script> export default { name: 'Test', data () { return { msg: 'Testing...' } }, methods: { change () { this.msg = 'clicked' } } } </script> 6 . 11
- 112. Now for thetest - we need to trigger a click event: 6 . 12
- 113. it('should render clickedif button is clicked', () => { const Constructor = Vue.extend(Test) const vm = new Constructor().$mount() const button = vm.$el.querySelector('.test .change-button') const clickEvent = new window.Event('click') button.dispatchEvent(clickEvent) vm._watcher.run() expect(vm.$el.querySelector('.test h1').textContent) .to.equal('clicked') }) 6 . 13
- 114. e2e test -Nightwatch enables us to spin up a browser. Interact with our app and assert on the result 6 . 14
- 115. Scenario: take ourtest component, click the button and assert it shows 'clicked' 6 . 15
- 116. browser .url(devServer) .waitForElementVisible('#app', 5000) .assert.elementPresent('.test') .assert.containsText('.test h1','Testing...') .assert.elementPresent('.change-button') .click('.change-button') .assert.containsText('.test h1', 'clicked') .end() 6 . 16
- 117. Scenario: take ourtest component, write in the input field, assert our component shows that data 6 . 17
- 118.
- 119. Core team member,@eddyerburgh Edd Yerburgh, https://www.manning.com/books/testing-vuejs- applications
- 120.
- 121.
- 122.
- 123. Just one morething, state management with VUEX 6 . 22
- 124. VUEXVUEX CENTRALIZED STATE MANAGEMENTFOR VUE.JSCENTRALIZED STATE MANAGEMENT FOR VUE.JS 7 . 1
- 125. All of ourapplication state live in a store 7 . 2
- 126.
- 127. <html> <body> <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/ <scriptsrc="https://unpkg.com/vuex"></script> <script src="app.js"></script> <script src="//0.0.0.0:35729/livereload.js?snipver=1" async= </html> 7 . 4
- 128.
- 129. const store =new Vuex.Store({ state: { count: 0, }, }) 7 . 6
- 130.
- 131. In a component setup a computed property show through interpolation {{}} 7 . 8
- 132. var app =new Vue({ el: '#app', data: { message: 'Hello Vue!' }, computed: { count: function() { return this.$store.count; } }, store }) 7 . 9
- 133. And showing it 7. 10
- 134. {{ count }}// 0 7 . 11
- 135.
- 136.
- 137. const store =new Vuex.Store({ state: { count: 0, }, mutations: { increment (state) { state.count++; // mutating state }, decrement (state) { state.count--; // mutating state } } }) 7 . 14
- 138.
- 139. this.$store.commit('mutationName') Vue.component('Counter', { template: ` <div> <button@click="increment">Increment</button> <button @click="decrement">Decrement</button> </div>> `, methods: { increment() { this.$store.commit('increment'); }, decrement() { this.$store.commit('decrement'); } } 7 . 16
- 140. We can alsocommit() with a payload 7 . 17
- 141.
- 142. How do weaccess the payload in the store? 7 . 19
- 143. mutations: { addProduct(state, payload){ this.products = [ ...this.state.products, { ...payload }] } } 7 . 20
- 144.
- 145. Does NOT mutatestate Calls .commit() when done Can be asynchronous we dispatch() actions 7 . 22
- 146.
- 147. const store =new Vuex.Store({ state: { count: 0 }, mutations: { // called 2nd increment() { this.state.count++; } }, actions: { // called 1st on dispatch() increment(context) { context.commit('increment') } 7 . 24
- 148. Calling an actionfrom a component 7 . 25
- 149. Vue.component('product', { template: ` <div> {{count }} <button v-on:click="increment">Increment</button> </div> `, methods: { increment() { this.$store.dispatch('increment'); // calling action } } }) 7 . 26
- 150.
- 151. set loading stateto true ( e.g show spinner ) fetch our data set data or error set loading to false 7 . 28
- 152. actions: { loadProducts({ commit,state }) { commit('loading'); try{ const products = await api.getProducts(); commit('products', products); } catch (err) { commit('error', err); } } } 7 . 29
- 153. our state canbe over crowded 7 . 30
- 154.
- 155. We go fromhaving all the state in one store to having many stores 7 . 32
- 156. modules const store =new Vuex.Store({ state: { count: 0 }, modules : { moduleA, moduleB } }) 7 . 33
- 157. We define astore module, just like a normal store 7 . 34
- 158. const moduleB ={ state: { b: 'bbbb' }, mutations: { change(state, val) { console.log('local state', state.b); console.log('global state', this.state.moduleB.b); this.state.moduleB.b = val; } } } 7 . 35
- 159.
- 160. We had alook at Vue and we tried to cover Components Routing Testing Vuex 8 . 2
- 161.
- 162. Official documentation, https://vuejs.org/v2/guide/ Therest of the core team, well worth following, https://vuejs.org/v2/guide/team.html 8 . 4
- 163. Good bye andthank you for listening @chris_noring, https://github.com/so chris/vuejs-book 8 . 5