title
Learn Vue.js - Full Course for Beginners - 2019

description
Learn to use Vue.js in this full tutorial course for beginners. 🚨 NEW version of this course: https://youtu.be/FXpIoQ_rT_c Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. 💻 Code - Quiz App: https://github.com/gwenf/vue-quiz 💻 Code - Pet App: https://github.com/gwenf/vue-adopt-pets ⭐️ Contents ⭐️ (0:32) Part 1: ⌨️ The Vue Instance ⌨️ Directives ⌨️ Methods ⌨️ Data-binding ⌨️ Events ⌨️ Filters ⌨️ Computed Properties ⌨️ Components ⌨️ Component Lifecycle (35:33) Part 2: ⌨️ Vue-cli ⌨️ Vue devtools ⌨️ Props & Slots ⌨️ Making API calls ⌨️ Vue-router ⌨️ Vuex ⌨️ Unit Testing ⌨️ Recommended Resources ⭐️ Links: ⭐️ 🔗 TheJaredWilcurt Twitch Channel: https://www.twitch.tv/thejaredwilcurt 🔗 Sarah Drasner, Vue Animations: https://www.youtube.com/watch?v=LLnVLjpY6gE 🔗 Views on Vue podcast: https://devchat.tv/views-on-vue/ 🔗 State of Vue.js Report: https://www.monterail.com/state-of-vuejs-report ✏ Course from Gwen Faraday. Check out her YouTube channel: https://www.youtube.com/channel/UCxA99Yr6P_tZF9_BgtMGAWA 🐦 Gwen on Twitter: https://twitter.com/gwen_faraday 📬 Email Gwen: gwenfaraday@pm.me -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org And subscribe for new videos on technology: https://youtube.com/subscription_center?add_user=freecodecamp

detail
{'title': 'Learn Vue.js - Full Course for Beginners - 2019', 'heatmap': [{'end': 7197.436, 'start': 7082.746, 'weight': 1}], 'summary': "Tutorial 'learn vue.js - full course for beginners - 2019' covers vue.js introduction, directives, functionality, vue application development, displaying/navigating questions, component styling/user interaction/lifecycle, react props, global state management, form handling/submission, sass setup, and more, providing comprehensive coverage of vue.js essentials and practical application development.", 'chapters': [{'end': 139.126, 'segs': [{'end': 63.064, 'src': 'embed', 'start': 33.849, 'weight': 0, 'content': [{'end': 38.352, 'text': "On a basic level, it's a front-end library to help you build JavaScript applications.", 'start': 33.849, 'duration': 4.503}, {'end': 46.517, 'text': 'Now, Vue.js is more robust than something like jQuery, since it gives you specific recommended patterns for code organization,', 'start': 39.032, 'duration': 7.485}, {'end': 51.661, 'text': 'although it did borrow a lot of good ideas from jQuery, Angular React and others.', 'start': 46.517, 'duration': 5.144}, {'end': 55.022, 'text': "It's usually not found in the wild by itself.", 'start': 52.601, 'duration': 2.421}, {'end': 63.064, 'text': "You'll see it used with lots of other libraries and combined to make sort of a framework and alternative to React, Angular, and others.", 'start': 55.462, 'duration': 7.602}], 'summary': 'Vue.js is a robust front-end library with recommended patterns for code organization, borrowing good ideas from jquery, angular, and react, often used in combination with other libraries as an alternative to react and angular.', 'duration': 29.215, 'max_score': 33.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc33849.jpg'}, {'end': 109.832, 'src': 'embed', 'start': 84.542, 'weight': 2, 'content': [{'end': 90.665, 'text': 'So this is if I was just writing a plain HTML or jQuery application, I might put something like this.', 'start': 84.542, 'duration': 6.123}, {'end': 103.192, 'text': "So how do I attach this to the Vue instance? Here I've preloaded the Vue library, so I can just choose it from frameworks and extensions.", 'start': 92.426, 'duration': 10.766}, {'end': 105.173, 'text': "I'm just pulling in the latest version.", 'start': 103.372, 'duration': 1.801}, {'end': 109.832, 'text': 'And from that library, I have a view instance.', 'start': 107.31, 'duration': 2.522}], 'summary': 'Attaching plain html or jquery to vue instance with preloaded library.', 'duration': 25.29, 'max_score': 84.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc84542.jpg'}], 'start': 5.796, 'title': 'Vue.js introduction', 'summary': 'Introduces vue.js as a robust front-end library, highlighting its integration with jquery, angular, and react. it demonstrates the instantiation of a vue instance on a web page using jsfiddle.net.', 'chapters': [{'end': 139.126, 'start': 5.796, 'title': 'Introduction to vue.js', 'summary': 'Introduces vue.js as a front-end library for building javascript applications, emphasizing its robustness and integration with other libraries like jquery, angular, and react, and demonstrating the instantiation of a vue instance on a web page using jsfiddle.net.', 'duration': 133.33, 'highlights': ['Vue.js is a front-end library to help build JavaScript applications, offering specific recommended patterns for code organization and borrowing good ideas from other libraries like jQuery, Angular, and React.', 'Vue.js is often used in combination with other libraries to create a framework and is considered an alternative to React, Angular, and others.', 'The Vue instance can be instantiated and attached to a specific element in the DOM, as demonstrated on jsfiddle.net using a root element.']}], 'duration': 133.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5796.jpg', 'highlights': ['Vue.js offers recommended patterns for code organization, borrowing from jQuery, Angular, and React.', 'Vue.js is commonly used with other libraries, serving as an alternative to React and Angular.', 'The Vue instance can be attached to a specific DOM element, demonstrated on jsfiddle.net.']}, {'end': 2065.505, 'segs': [{'end': 288.167, 'src': 'embed', 'start': 247.323, 'weight': 0, 'content': [{'end': 249.565, 'text': 'V model is something called a directive.', 'start': 247.323, 'duration': 2.242}, {'end': 254.549, 'text': "There are a lot of directives in Vue and they're used to interact with the DOM.", 'start': 250.165, 'duration': 4.384}, {'end': 257.43, 'text': "Let's look at another common directive.", 'start': 255.79, 'duration': 1.64}, {'end': 260.414, 'text': 'V if.', 'start': 259.892, 'duration': 0.522}, {'end': 267.84, 'text': 'V if evaluates an expression to a Boolean value, either true or false.', 'start': 261.954, 'duration': 5.886}, {'end': 272.56, 'text': "So let's start with something that we know is true.", 'start': 269.318, 'duration': 3.242}, {'end': 288.167, 'text': "So if one equals one, you're telling Vue to display this div and render it to the page.", 'start': 279.223, 'duration': 8.944}], 'summary': 'Vue has various directives, such as v model and v if, which interact with the dom and evaluate expressions to display content based on boolean values.', 'duration': 40.844, 'max_score': 247.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc247323.jpg'}, {'end': 889.536, 'src': 'embed', 'start': 851.56, 'weight': 6, 'content': [{'end': 856.886, 'text': 'And the directive to handle looping in the DOM in Vue is called v4.', 'start': 851.56, 'duration': 5.326}, {'end': 870.72, 'text': "So let me come down here and get something to actually loop through, which is an array of cats I've already written.", 'start': 865.014, 'duration': 5.706}, {'end': 873.944, 'text': 'Paste it there.', 'start': 873.363, 'duration': 0.581}, {'end': 884.793, 'text': "the syntax for this will be you need to take your array cats and you're gonna say item in items.", 'start': 876.128, 'duration': 8.665}, {'end': 889.536, 'text': 'so it will just be like a for in loop in JavaScript.', 'start': 884.793, 'duration': 4.743}], 'summary': "In vue, v-for directive is used to loop through arrays, like 'cats', using syntax 'item in items'.", 'duration': 37.976, 'max_score': 851.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc851560.jpg'}, {'end': 1313.36, 'src': 'embed', 'start': 1285.202, 'weight': 5, 'content': [{'end': 1289.887, 'text': "So there's many more events and modifiers that you can chain onto events.", 'start': 1285.202, 'duration': 4.685}, {'end': 1297.899, 'text': 'For example, view has an API for chaining things onto the click event.', 'start': 1290.768, 'duration': 7.131}, {'end': 1307.051, 'text': 'you could do dot prevent, which means prevent default, and you can also do stop for stop propagation.', 'start': 1297.899, 'duration': 9.152}, {'end': 1313.36, 'text': 'basically all of the common things you might do that are associated with that type of event, which is super useful.', 'start': 1307.051, 'duration': 6.309}], 'summary': 'Events and modifiers can be chained onto the click event, such as dot prevent for prevent default and stop for stop propagation, offering useful functionality.', 'duration': 28.158, 'max_score': 1285.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc1285202.jpg'}, {'end': 1370, 'src': 'embed', 'start': 1339.586, 'weight': 3, 'content': [{'end': 1342.328, 'text': 'Both ways work, this is just adding a shortcut to it.', 'start': 1339.586, 'duration': 2.742}, {'end': 1347.835, 'text': "So let's say you want to update something that's rendering to the DOM.", 'start': 1344.554, 'duration': 3.281}, {'end': 1350.395, 'text': 'Vue has something called filters.', 'start': 1348.495, 'duration': 1.9}, {'end': 1356.357, 'text': "So I'm just going to write a simple filter to illustrate what it does.", 'start': 1352.716, 'duration': 3.641}, {'end': 1364.739, 'text': "And I'll come down here after methods, I can add another object.", 'start': 1360.298, 'duration': 4.441}, {'end': 1368.2, 'text': 'And this one is similar to methods.', 'start': 1365.499, 'duration': 2.701}, {'end': 1370, 'text': "It's an object of functions.", 'start': 1368.62, 'duration': 1.38}], 'summary': 'Illustrates how to use vue filters to update dom rendering.', 'duration': 30.414, 'max_score': 1339.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc1339586.jpg'}, {'end': 1656.279, 'src': 'embed', 'start': 1629.571, 'weight': 2, 'content': [{'end': 1634.212, 'text': "So later on you'll be using computed a lot when you deal with Vuex.", 'start': 1629.571, 'duration': 4.641}, {'end': 1639.674, 'text': "It's also extremely useful if you have a lot of logic in the DOM.", 'start': 1635.393, 'duration': 4.281}, {'end': 1646.536, 'text': "Let's say you were doing a lot of computation or updating inside of this block.", 'start': 1639.794, 'duration': 6.742}, {'end': 1655.739, 'text': 'then you could clean it up, take all of the logic outside of the DOM here, put it inside of a computed property and then just display it in the DOM,', 'start': 1646.536, 'duration': 9.203}, {'end': 1656.279, 'text': "like we're doing.", 'start': 1655.739, 'duration': 0.54}], 'summary': 'Computed properties in vuex can help move logic from the dom, making it cleaner and more efficient.', 'duration': 26.708, 'max_score': 1629.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc1629571.jpg'}, {'end': 2038.207, 'src': 'embed', 'start': 1986.727, 'weight': 1, 'content': [{'end': 1991.868, 'text': "So the idea of having components is that they're reusable modular pieces.", 'start': 1986.727, 'duration': 5.141}, {'end': 1999.89, 'text': "And when you're developing Vue locally, Vue CLI creates a really nice project with you with a modular architecture.", 'start': 1992.528, 'duration': 7.362}, {'end': 2002.67, 'text': 'that kind of handles this under the hood for you.', 'start': 1999.89, 'duration': 2.78}, {'end': 2008.191, 'text': 'To wrap up here, I just want to talk quickly about Vue lifecycle methods.', 'start': 2003.97, 'duration': 4.221}, {'end': 2013.952, 'text': "Vue will trigger certain functions to run, which can be very useful when you're developing an application.", 'start': 2008.931, 'duration': 5.021}, {'end': 2025.101, 'text': "So I have four functions here, created, mounted, updated, and destroyed, and they're just logging things.", 'start': 2019.758, 'duration': 5.343}, {'end': 2028.162, 'text': "I'm going to run this.", 'start': 2027.402, 'duration': 0.76}, {'end': 2038.207, 'text': "And if I look at the console, it shows created when the component is created, and when it's mounted to the DOM, it runs mounted.", 'start': 2030.923, 'duration': 7.284}], 'summary': 'Vue cli creates modular architecture for reusable components, triggering lifecycle methods for application development.', 'duration': 51.48, 'max_score': 1986.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc1986727.jpg'}], 'start': 139.766, 'title': 'Vue directives, functionality, event chaining, filters, and vue.js lifecycle', 'summary': 'Covers vue directives like data binding, v model, v if/else, vshow, v-bind, v-text, v-html, vonce, looping through arrays, adding functions, dynamically adding/removing classes/attributes, handling user input events, event chaining, filters, computed properties, custom components, and vue lifecycle methods, providing comprehensive coverage of their usage and impact on dom interaction and rendering.', 'chapters': [{'end': 482.64, 'start': 139.766, 'title': 'Introduction to vue directives', 'summary': 'Introduces vue directives, including data binding, v model, v if, v else if, v else, and vshow, emphasizing their usage to interact with the dom and their impact on rendering and live updates.', 'duration': 342.874, 'highlights': ['Vue directives like V model and V if facilitate data binding and conditional rendering, enabling live updates and interaction with the DOM.', "V if evaluates an expression to a Boolean value, either true or false, and V show renders elements with 'display: none' in the DOM, offering flexibility in rendering behavior.", 'V else if and V else can be used in conjunction with V if to create if-else logic for conditional rendering, providing a structured approach to rendering based on specific conditions.']}, {'end': 1282.459, 'start': 482.64, 'title': 'Vue directives and functionality', 'summary': 'Covers various vue directives such as v-bind, v-text, v-html, and vonce, as well as looping through arrays and adding functions to vue applications, with examples and explanations provided for each. additionally, it demonstrates dynamically adding and removing classes and attributes, and handling user input events.', 'duration': 799.819, 'highlights': ['Vue directives covered include v-bind, v-text, v-html, and vonce, providing functionality to dynamically add and remove classes and attributes, render static HTML, and handle user input events.', 'Demonstration of using v4 directive to loop through arrays and objects, showcasing the syntax and functionality of iterating through and displaying data in Vue applications.', 'Explanation and implementation of adding functions to Vue applications using vonclick and von directives, including handling user input events and executing functions based on user actions.']}, {'end': 1490.141, 'start': 1285.202, 'title': 'Vue event chaining & filters', 'summary': "Explores event chaining in vue, demonstrating the use of shortcuts like 'at' for commonly used events, and also delves into the utilization of filters to manipulate displayed data on the dom.", 'duration': 204.939, 'highlights': ['Vue provides various methods for event chaining, such as dot prevent and stop for stop propagation, offering convenience and efficiency in event handling.', "The 'at' shortcut in Vue allows for easy binding of events, providing a more concise syntax and enhancing code readability and maintainability.", 'Filters in Vue enable the manipulation of displayed data on the DOM without altering the actual data stored in the view state, showcasing the flexibility of data rendering in Vue components.']}, {'end': 2065.505, 'start': 1490.542, 'title': 'Vue.js components and lifecycle', 'summary': 'Covers the use of computed properties, filters, custom components, and vue lifecycle methods, emphasizing their application and benefits in vue.js development.', 'duration': 574.963, 'highlights': ['Vue CLI creates a modular architecture for developing Vue locally, handling reusable modular pieces under the hood.', 'Computed properties are useful for cleaning up logic in the DOM and can be extensively used when dealing with Vuex, offering efficiency in rendering and updating the DOM.', 'Vue lifecycle methods, including created, mounted, updated, and destroyed, provide a structured approach to trigger functions, which is beneficial for application development and debugging.', 'Filters in Vue.js allow for modifying the display output without altering the actual value stored in the view state, offering flexibility in manipulating the display on the DOM.', 'Custom components in Vue.js facilitate the reuse of code through a component architecture, providing a modular approach to developing applications.']}], 'duration': 1925.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc139766.jpg', 'highlights': ['Vue directives like V model and V if facilitate data binding and conditional rendering, enabling live updates and interaction with the DOM.', 'Vue CLI creates a modular architecture for developing Vue locally, handling reusable modular pieces under the hood.', 'Computed properties are useful for cleaning up logic in the DOM and can be extensively used when dealing with Vuex, offering efficiency in rendering and updating the DOM.', 'Filters in Vue enable the manipulation of displayed data on the DOM without altering the actual data stored in the view state, showcasing the flexibility of data rendering in Vue components.', 'Vue lifecycle methods, including created, mounted, updated, and destroyed, provide a structured approach to trigger functions, which is beneficial for application development and debugging.', 'Vue provides various methods for event chaining, such as dot prevent and stop for stop propagation, offering convenience and efficiency in event handling.', 'Demonstration of using v4 directive to loop through arrays and objects, showcasing the syntax and functionality of iterating through and displaying data in Vue applications.', 'Custom components in Vue.js facilitate the reuse of code through a component architecture, providing a modular approach to developing applications.', "V if evaluates an expression to a Boolean value, either true or false, and V show renders elements with 'display: none' in the DOM, offering flexibility in rendering behavior."]}, {'end': 3538.013, 'segs': [{'end': 2122.732, 'src': 'embed', 'start': 2096.933, 'weight': 1, 'content': [{'end': 2107.904, 'text': "There are many other functions that run, including before mounted, before destroyed, and I think they're very well drawn out in the Vue documentation.", 'start': 2096.933, 'duration': 10.971}, {'end': 2110.906, 'text': 'so vuejs.org the version 2 guide.', 'start': 2107.904, 'duration': 3.002}, {'end': 2122.732, 'text': 'And if you look at the lifecycle diagram section, it shows you exactly when each function is going to be run during the lifecycle of the component.', 'start': 2111.847, 'duration': 10.885}], 'summary': 'Vue documentation details lifecycle functions, version 2 guide provides clear diagrams.', 'duration': 25.799, 'max_score': 2096.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc2096933.jpg'}, {'end': 2184.434, 'src': 'embed', 'start': 2153.837, 'weight': 2, 'content': [{'end': 2159.019, 'text': 'And it prompts you to npm install dash g Vue CLI globally.', 'start': 2153.837, 'duration': 5.182}, {'end': 2165.385, 'text': 'So if you copy this command, and come over to your terminal.', 'start': 2159.259, 'duration': 6.126}, {'end': 2169.226, 'text': 'You can enter this and install Vue CLI.', 'start': 2166.605, 'duration': 2.621}, {'end': 2170.507, 'text': "I've already done this.", 'start': 2169.687, 'duration': 0.82}, {'end': 2175.069, 'text': "So I'm just going to check my version.", 'start': 2171.648, 'duration': 3.421}, {'end': 2179.091, 'text': "My version's 3.1.", 'start': 2177.39, 'duration': 1.701}, {'end': 2181.772, 'text': "1 So now I'm going to create a Vue app.", 'start': 2179.091, 'duration': 2.681}, {'end': 2184.434, 'text': 'And I can do this with the Vue create command.', 'start': 2182.233, 'duration': 2.201}], 'summary': 'Installing vue cli globally allows creating vue app using vue create command.', 'duration': 30.597, 'max_score': 2153.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc2153837.jpg'}, {'end': 2362.229, 'src': 'embed', 'start': 2335.407, 'weight': 0, 'content': [{'end': 2340.952, 'text': 'It bundles them all together and then it injects a script into your HTML file for you.', 'start': 2335.407, 'duration': 5.545}, {'end': 2344.555, 'text': "That's one of the really nice things about using Vue CLI.", 'start': 2341.452, 'duration': 3.103}, {'end': 2351.922, 'text': 'You have all of this boilerplate and setup done for you, like Webpack and Babel, so you can just start building right away.', 'start': 2345.095, 'duration': 6.827}, {'end': 2354.003, 'text': 'If you want to look at the Vue scripts,', 'start': 2352.542, 'duration': 1.461}, {'end': 2362.229, 'text': 'These are the different scripts that Vue is calling to run your application locally or to build it for production or to lint it for you.', 'start': 2354.744, 'duration': 7.485}], 'summary': 'Vue cli bundles scripts, sets up webpack and babel, easing development.', 'duration': 26.822, 'max_score': 2335.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc2335407.jpg'}, {'end': 2428.06, 'src': 'embed', 'start': 2400.819, 'weight': 4, 'content': [{'end': 2407.205, 'text': 'So in that way, you can divide up your application into components and then put them all together.', 'start': 2400.819, 'duration': 6.386}, {'end': 2411.248, 'text': "They're all bundled into this main.js and rendered to the page.", 'start': 2407.265, 'duration': 3.983}, {'end': 2414.672, 'text': "So here's the first project we're going to be building.", 'start': 2412.731, 'duration': 1.941}, {'end': 2421.656, 'text': "It's a quiz application that keeps track of the number of total questions you have answered and the number you got correct.", 'start': 2415.473, 'duration': 6.183}, {'end': 2428.06, 'text': 'The questions are pulled in from an API and displayed along with the answers.', 'start': 2422.417, 'duration': 5.643}], 'summary': 'Build a quiz app with api, tracking total questions and correct answers.', 'duration': 27.241, 'max_score': 2400.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc2400819.jpg'}, {'end': 2614.12, 'src': 'embed', 'start': 2520.679, 'weight': 5, 'content': [{'end': 2549.257, 'text': "I'm going to say header and header To be able to use the component in the template section, I need to add header here.", 'start': 2520.679, 'duration': 28.578}, {'end': 2555.04, 'text': 'And then question box.', 'start': 2549.277, 'duration': 5.763}, {'end': 2560.882, 'text': 'And now I can get rid of the hello world and image.', 'start': 2557.741, 'duration': 3.141}, {'end': 2563.644, 'text': "And I'm going to add the header here.", 'start': 2562.043, 'duration': 1.601}, {'end': 2568.926, 'text': 'As well as the question box.', 'start': 2566.325, 'duration': 2.601}, {'end': 2574.447, 'text': 'All right, let me run this.', 'start': 2573.547, 'duration': 0.9}, {'end': 2579.249, 'text': 'npm run serve.', 'start': 2574.467, 'duration': 4.782}, {'end': 2588.812, 'text': 'And in the browser, we can see we have both components header and question box.', 'start': 2584.771, 'duration': 4.041}, {'end': 2597.095, 'text': "So before I update any of the components anymore, I'm going to install a third party library called bootstrap view.", 'start': 2589.873, 'duration': 7.222}, {'end': 2607.253, 'text': "Bootstrap View has a lot of built-in components and CSS already written, so we don't have to worry about styling.", 'start': 2600.967, 'duration': 6.286}, {'end': 2614.12, 'text': "If you're interested to see more, you can go to their docs or see all the components that they offer, like buttons,", 'start': 2607.533, 'duration': 6.587}], 'summary': 'Added header and question box components, installed bootstrap view library for styling.', 'duration': 93.441, 'max_score': 2520.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc2520679.jpg'}, {'end': 3117.59, 'src': 'embed', 'start': 3092.3, 'weight': 7, 'content': [{'end': 3099.181, 'text': 'So putting it inside a bootstrap container just automatically centers an element on the page and gives it a little bit of padding on either side.', 'start': 3092.3, 'duration': 6.881}, {'end': 3101.302, 'text': 'So inside the container, we have 12 columns.', 'start': 3099.641, 'duration': 1.661}, {'end': 3104.883, 'text': "We're using 6 and offsetting by 3.", 'start': 3102.482, 'duration': 2.401}, {'end': 3111.587, 'text': "Great, now let's jump into the API for the questions and start pulling some actual data for the application.", 'start': 3104.883, 'duration': 6.704}, {'end': 3117.59, 'text': 'OpenTDB.com is a quiz API that we can pull questions from.', 'start': 3113.008, 'duration': 4.582}], 'summary': 'Using a bootstrap container with 12 columns, using 6 columns and offsetting by 3. also, accessing quiz data from opentdb.com api.', 'duration': 25.29, 'max_score': 3092.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc3092300.jpg'}], 'start': 2065.925, 'title': 'Vue.js application development', 'summary': 'Covers vue component lifecycle, vue cli application development, building a quiz application, and setting up vue bootstrap components and fetching api data, with references to vue documentation and version 2 guide, and featuring key highlights such as auto-injection of script files by vue cli and integrating bootstrap vue library.', 'chapters': [{'end': 2122.732, 'start': 2065.925, 'title': 'Vue component lifecycle', 'summary': 'Discusses the vue component lifecycle, including the functions like created, mounted, and destroyed, with references to vue documentation and the version 2 guide, which provides a detailed lifecycle diagram.', 'duration': 56.807, 'highlights': ['The Vue component lifecycle includes functions like created, mounted, and destroyed.', "References to Vue documentation and the version 2 guide provide detailed insights into the component's lifecycle.", "The lifecycle diagram section in the Vue documentation precisely illustrates when each function is executed during the component's lifecycle."]}, {'end': 2400.459, 'start': 2122.973, 'title': 'Vue cli application development', 'summary': 'Covers creating a vue.js application using vue cli globally, including installation, application creation, folder structure, running the application, and file organization, with a key highlight being the auto-injection of script files by vue cli.', 'duration': 277.486, 'highlights': ['Vue CLI auto-injects script files, creating a bundle from main.js and Vue files, and injects them into the HTML file, simplifying the setup process for developers.', "Creating a Vue.js application involves installing Vue CLI globally using 'npm install -g Vue CLI', then using the 'Vue create' command to create the application, with the default option providing basic setup including Babel and ESLint.", "The 'npm run serve' command runs the Vue application on port 8080, providing a boilerplate application and enabling developers to start building right away with the pre-configured setup.", "The application structure includes a 'source' directory for JS and Vue rendering, a 'public' directory for the index.html file, and a 'package.json' file to reference third-party libraries, simplifying the organization of code and resources."]}, {'end': 2780.691, 'start': 2400.819, 'title': 'Building quiz application with vue', 'summary': 'Covers building a quiz application in vue, featuring components, api integration, user interactions, and integrating bootstrap view library.', 'duration': 379.872, 'highlights': ['Building a quiz application with components and API integration', 'Integrating Bootstrap View library for styling and components', 'Creating and using Vue components for header and question box', 'User interactions like selecting answers and resetting question count']}, {'end': 3538.013, 'start': 2782.631, 'title': 'Setting up vue bootstrap components and fetching api data', 'summary': 'Details the process of setting up vue bootstrap components for the header and question box, including adding tabs, jumbotron, and a grid system, and then demonstrates fetching quiz questions from the opentdb.com api using the mounted lifecycle method and handling the fetched data.', 'duration': 755.382, 'highlights': ['Setting up Vue Bootstrap components for the header and question box', 'Fetching quiz questions from the OpenTDB.com API', 'Using Vue.js DevTools to inspect data on components']}], 'duration': 1472.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc2065925.jpg', 'highlights': ['Vue CLI auto-injects script files, simplifying setup for developers', 'References to Vue documentation and version 2 guide provide detailed insights', "Creating a Vue.js application involves installing Vue CLI globally using 'npm install -g Vue CLI'", 'The Vue component lifecycle includes functions like created, mounted, and destroyed', 'Building a quiz application with components and API integration', 'Integrating Bootstrap View library for styling and components', 'Setting up Vue Bootstrap components for the header and question box', 'Fetching quiz questions from the OpenTDB.com API']}, {'end': 4602.421, 'segs': [{'end': 3629.912, 'src': 'embed', 'start': 3586.043, 'weight': 0, 'content': [{'end': 3592.928, 'text': "So as you're clicking next through questions, I just want the question box component to know about the current question.", 'start': 3586.043, 'duration': 6.885}, {'end': 3600.773, 'text': "So I'm going to keep an index of the question here, which will start at zero.", 'start': 3593.808, 'duration': 6.965}, {'end': 3615.312, 'text': 'And then Vue lets me pass data variables and methods to my child components by using V bind with custom attributes.', 'start': 3603.226, 'duration': 12.086}, {'end': 3624.996, 'text': 'So I can say the question I want to pass equals my questions array.', 'start': 3616.172, 'duration': 8.824}, {'end': 3629.912, 'text': 'the index.', 'start': 3627.65, 'duration': 2.262}], 'summary': 'Vue allows passing data to child components using v bind with custom attributes.', 'duration': 43.869, 'max_score': 3586.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc3586043.jpg'}, {'end': 4117.819, 'src': 'embed', 'start': 4086.594, 'weight': 2, 'content': [{'end': 4087.916, 'text': 'when the component mounts,', 'start': 4086.594, 'duration': 1.322}, {'end': 4102.006, 'text': "it's still undefined and it's a moment later when the questions come back from the server and it goes into the state in this component and then it gets passed to the question box component.", 'start': 4087.916, 'duration': 14.09}, {'end': 4109.232, 'text': 'So an easy thing to do would be not to render the question box component until these questions are defined.', 'start': 4102.185, 'duration': 7.047}, {'end': 4117.819, 'text': 'So wait until we fetch the questions and save them in the component state until we render this component.', 'start': 4109.772, 'duration': 8.047}], 'summary': 'Component mounts as undefined, wait to render until questions are defined', 'duration': 31.225, 'max_score': 4086.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc4086594.jpg'}, {'end': 4324.818, 'src': 'embed', 'start': 4300.084, 'weight': 3, 'content': [{'end': 4306.85, 'text': "and here it's going to complain because for any v4 loop i'm going to need a key attribute.", 'start': 4300.084, 'duration': 6.766}, {'end': 4311.614, 'text': 'so view requires this for accessing these elements in the dom.', 'start': 4306.85, 'duration': 4.764}, {'end': 4318.724, 'text': 'so i can do a v bind key And usually you want to do something unique.', 'start': 4311.614, 'duration': 7.11}, {'end': 4324.818, 'text': 'Here we kind of know all of the answers or each answer is going to be unique.', 'start': 4319.005, 'duration': 5.813}], 'summary': 'V4 loop requires key attribute for accessing elements in the dom.', 'duration': 24.734, 'max_score': 4300.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc4300084.jpg'}], 'start': 3538.273, 'title': 'Displaying and navigating vue questions', 'summary': 'Demonstrates displaying 10 questions from an api in a vue app, passing question data to a child component, setting up navigation between questions, and fixing errors, resulting in successful rendering and navigation through questions.', 'chapters': [{'end': 3658.88, 'start': 3538.273, 'title': 'Displaying questions in vue app', 'summary': 'Demonstrates how to display 10 questions pulled from an api in a vue app, passing the question data to a child component and using v bind to incrementally display questions, with the structure of the data including correct and incorrect answers.', 'duration': 120.607, 'highlights': ['The chapter demonstrates how to display 10 questions pulled from an API in a Vue app, passing the question data to a child component and using V bind to incrementally display questions, with the structure of the data including correct and incorrect answers.', 'The API provided 10 questions in a specific format, including incorrect answers and a single correct answer for each question.', 'Vue allows passing data variables and methods to child components using V bind with custom attributes, enabling the incremental display of questions by keeping an index of the current question.']}, {'end': 3984.146, 'start': 3658.92, 'title': 'Passing question text and navigation setup', 'summary': 'Demonstrates how to pass question text and set up navigation between questions using props and methods, resulting in the ability to display and navigate through the questions in the child component.', 'duration': 325.226, 'highlights': ['Passing question text and methods through props and setting up navigation between questions using JavaScript and Vue.js.', "Using props to receive and reference variables passed from the parent component, ensuring proper display in the child component's HTML.", 'Setting up a method to increment the index value to navigate through the questions, and passing this method as a prop to the child component.', 'Inspecting the props in the view dev tools to verify the passed current question object and its display in the question box component.']}, {'end': 4300.084, 'start': 3984.146, 'title': 'Fixing undefined error in question box component', 'summary': "Discusses identifying and resolving the issue of 'cannot read property question of undefined' in the question box component by utilizing lifecycle hooks and conditional rendering, resulting in the successful rendering of the component and the ability to navigate between questions.", 'duration': 315.938, 'highlights': ['Utilizing lifecycle hooks and conditional rendering to prevent rendering the question box component until the questions are defined', 'Implementing computed method to display all four answers in the question box component', 'Identifying the issue of exceeding index causing an error when navigating between questions']}, {'end': 4602.421, 'start': 4300.084, 'title': 'Vue looping and styling', 'summary': 'Covers the process of looping through elements in vue, fixing errors, and styling components, resulting in the successful display of a list of clickable items, resolving previous errors and demonstrating the use of scoped css.', 'duration': 302.337, 'highlights': ['The chapter covers the process of looping through elements in Vue', 'Fixing errors and accessing data variables in Vue', 'Styling components and using scoped CSS in Vue']}], 'duration': 1064.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc3538273.jpg', 'highlights': ['The chapter demonstrates how to display 10 questions pulled from an API in a Vue app, passing the question data to a child component and using V bind to incrementally display questions, with the structure of the data including correct and incorrect answers.', 'Passing question text and methods through props and setting up navigation between questions using JavaScript and Vue.js.', 'Utilizing lifecycle hooks and conditional rendering to prevent rendering the question box component until the questions are defined', 'The chapter covers the process of looping through elements in Vue']}, {'end': 5739.419, 'segs': [{'end': 4669.04, 'src': 'embed', 'start': 4603.522, 'weight': 4, 'content': [{'end': 4619.554, 'text': "And I'm going to paste the class that I copied and say that for the list group i want to have a margin, let's say margin bottom, of 15 pixels.", 'start': 4603.522, 'duration': 16.032}, {'end': 4624.757, 'text': "save that, see how it looks and there's a little bit of padding.", 'start': 4619.554, 'duration': 5.203}, {'end': 4635.658, 'text': "now for the buttons, i'm going to put a sideways margin and i'm going to reference these as btn from the button class.", 'start': 4624.757, 'duration': 10.901}, {'end': 4638.44, 'text': "so I'll put margin.", 'start': 4635.658, 'duration': 2.782}, {'end': 4642.982, 'text': "I'll just make the top and bottom zero and then left and right.", 'start': 4638.44, 'duration': 4.542}, {'end': 4647.105, 'text': "maybe I'll give it five pixels.", 'start': 4642.982, 'duration': 4.123}, {'end': 4651.347, 'text': 'save that and now it looks a little bit better spaced out.', 'start': 4647.105, 'duration': 4.242}, {'end': 4660.333, 'text': "so now to make the buttons clickable, let's go back to the question box component And I want to add an atClick function here.", 'start': 4651.347, 'duration': 8.986}, {'end': 4669.04, 'text': "So atClick equals a new function I'm going to create called selectAnswer.", 'start': 4660.613, 'duration': 8.427}], 'summary': 'Styling adjustments made for list group and buttons, buttons made clickable.', 'duration': 65.518, 'max_score': 4603.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc4603522.jpg'}, {'end': 4751.082, 'src': 'embed', 'start': 4709.867, 'weight': 6, 'content': [{'end': 4714.81, 'text': 'the next thing is to save the select index on the component.', 'start': 4709.867, 'duration': 4.943}, {'end': 4734.755, 'text': "so I'm going to create a function here and return an object of our data variables, and the first one I'm going to say is selected index,", 'start': 4714.81, 'duration': 19.945}, {'end': 4737.096, 'text': "and for right now I'll just set it to null.", 'start': 4734.755, 'duration': 2.341}, {'end': 4751.082, 'text': "and now down here in the selected index method, I'm going to say this dot, selected index equals index And we can see this in the View DevTools.", 'start': 4737.096, 'duration': 13.986}], 'summary': 'Creating a function to save the selected index as an object and initially setting it to null.', 'duration': 41.215, 'max_score': 4709.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc4709867.jpg'}, {'end': 4827.228, 'src': 'embed', 'start': 4798.482, 'weight': 3, 'content': [{'end': 4807.448, 'text': "And first of all, there's no visual feedback to the user to let them know to first click on an answer or that they've selected an answer.", 'start': 4798.482, 'duration': 8.966}, {'end': 4809.989, 'text': "So let's first create a hover style.", 'start': 4807.948, 'duration': 2.041}, {'end': 4822.207, 'text': "And I'm going to go below here, copy this and say list group item hover, hover state.", 'start': 4810.73, 'duration': 11.477}, {'end': 4827.228, 'text': 'So when the user hovers over it, I want to just change the background color slightly.', 'start': 4822.307, 'duration': 4.921}], 'summary': 'Improving user experience by adding hover style for better interaction.', 'duration': 28.746, 'max_score': 4798.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc4798482.jpg'}, {'end': 4924.536, 'src': 'embed', 'start': 4892.817, 'weight': 0, 'content': [{'end': 4905.823, 'text': "and I'm going to give this a background color, let's just say blue, for right now, background color of blue and then a correct answer.", 'start': 4892.817, 'duration': 13.006}, {'end': 4915.267, 'text': "when the answer is correct, I'm going to give it a background color of green and one more.", 'start': 4905.823, 'duration': 9.444}, {'end': 4924.536, 'text': "when the answer is incorrect, I'll give it a background color of red.", 'start': 4915.267, 'duration': 9.269}], 'summary': 'Setting background colors: blue for initial, green for correct, and red for incorrect answers.', 'duration': 31.719, 'max_score': 4892.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc4892817.jpg'}, {'end': 5059.627, 'src': 'embed', 'start': 5026.748, 'weight': 8, 'content': [{'end': 5029.809, 'text': "A second bug is that our answers aren't shuffled.", 'start': 5026.748, 'duration': 3.061}, {'end': 5035.432, 'text': 'So we actually know that every fourth answer here is the correct one.', 'start': 5030.45, 'duration': 4.982}, {'end': 5039.253, 'text': "And then on top of that, our submit button doesn't do anything yet.", 'start': 5036.332, 'duration': 2.921}, {'end': 5044.436, 'text': "So let's go back to the code and fix these three things, starting with the answer shuffling.", 'start': 5039.594, 'duration': 4.842}, {'end': 5053.522, 'text': "To shuffle the answers for every single time that the question changes, I'm going to add something called a watch method here.", 'start': 5045.336, 'duration': 8.186}, {'end': 5059.627, 'text': "It's just like computed or methods in that it takes an object of functions.", 'start': 5055.484, 'duration': 4.143}], 'summary': 'Issues identified: answers not shuffled, every fourth answer is correct, submit button not functional. plan to fix by adding a watch method for answer shuffling.', 'duration': 32.879, 'max_score': 5026.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5026748.jpg'}, {'end': 5169.64, 'src': 'embed', 'start': 5135.778, 'weight': 7, 'content': [{'end': 5142.146, 'text': "but there's actually a really nice helper library that I can use for this to help me shuffle an array, and it's called Lodash.", 'start': 5135.778, 'duration': 6.368}, {'end': 5154.053, 'text': "Lodash is a very popular JavaScript library that's full of useful utilities that might take you a while to write on your own and that are common in many projects,", 'start': 5142.748, 'duration': 11.305}, {'end': 5155.674, 'text': 'like having to shuffle an array.', 'start': 5154.053, 'duration': 1.621}, {'end': 5158.335, 'text': "So I'm going to go to the Lodash GitHub.", 'start': 5156.354, 'duration': 1.981}, {'end': 5169.64, 'text': "And right now we're just going to do npm i lodash in the terminal.", 'start': 5158.355, 'duration': 11.285}], 'summary': 'Lodash is a popular javascript library with a useful array shuffle function, commonly used in many projects.', 'duration': 33.862, 'max_score': 5135.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5135778.jpg'}, {'end': 5257.032, 'src': 'embed', 'start': 5222.566, 'weight': 1, 'content': [{'end': 5226.327, 'text': 'if you want to look through some well-written algorithms in JavaScript.', 'start': 5222.566, 'duration': 3.761}, {'end': 5228.368, 'text': 'So it should be done installing.', 'start': 5226.927, 'duration': 1.441}, {'end': 5233.191, 'text': 'Let me go back to my server and pm run serve.', 'start': 5228.928, 'duration': 4.263}, {'end': 5239.915, 'text': "And now back in my code, I'm going to add the Lodash library.", 'start': 5235.733, 'duration': 4.182}, {'end': 5245.839, 'text': "I need another data property where I'm going to put shuffled answers.", 'start': 5239.935, 'duration': 5.904}, {'end': 5249.862, 'text': "This is going to be an array and I'm just going to call it shuffled answers.", 'start': 5246.239, 'duration': 3.623}, {'end': 5257.032, 'text': "and here I'll put this dot.", 'start': 5252.507, 'duration': 4.525}], 'summary': 'Adding the lodash library to shuffle answers in a javascript algorithm.', 'duration': 34.466, 'max_score': 5222.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5222566.jpg'}, {'end': 5402.323, 'src': 'embed', 'start': 5372.638, 'weight': 2, 'content': [{'end': 5373.499, 'text': 'and that would work.', 'start': 5372.638, 'duration': 0.861}, {'end': 5382.287, 'text': 'that would shuffle answers on the first component, mount, and then every time after that, when the current question is updated in props.', 'start': 5373.499, 'duration': 8.788}, {'end': 5384.849, 'text': 'it would shuffle the answers, which is fine.', 'start': 5382.287, 'duration': 2.562}, {'end': 5390.093, 'text': "it gets the same functionality, but there's also another way that might be a little bit better.", 'start': 5384.849, 'duration': 5.244}, {'end': 5394.657, 'text': "so i'm just going to show you in these watch functions.", 'start': 5390.093, 'duration': 4.564}, {'end': 5402.323, 'text': 'instead of making them a function, you can make it an object and set some options on the object.', 'start': 5394.657, 'duration': 7.666}], 'summary': 'Proposed using an object with options instead of a function for watch functions, providing a potentially better approach.', 'duration': 29.685, 'max_score': 5372.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5372638.jpg'}, {'end': 5508.095, 'src': 'embed', 'start': 5478.692, 'weight': 10, 'content': [{'end': 5487.966, 'text': "I'm going to clean it up a little bit first take away this href that we're not going to use and then put it on separate lines,", 'start': 5478.692, 'duration': 9.274}, {'end': 5489.749, 'text': "because we're going to add a couple more things here.", 'start': 5487.966, 'duration': 1.783}, {'end': 5499.671, 'text': "For right now, if you remember, there's the V on directive, which I can attach to events like click.", 'start': 5491.348, 'duration': 8.323}, {'end': 5501.652, 'text': 'So V on click.', 'start': 5500.392, 'duration': 1.26}, {'end': 5508.095, 'text': "And then I want to run a function that I'm going to create called submit answer.", 'start': 5503.093, 'duration': 5.002}], 'summary': 'Cleaning up the code by removing unused href and adding v on click for the submit answer function.', 'duration': 29.403, 'max_score': 5478.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5478692.jpg'}, {'end': 5660.146, 'src': 'embed', 'start': 5633.487, 'weight': 9, 'content': [{'end': 5643.79, 'text': 'And here I need to keep track of two things, the number of total user submissions for answers, and also the total number that are correct.', 'start': 5633.487, 'duration': 10.303}, {'end': 5645.851, 'text': "So first I'm going to check if it's correct.", 'start': 5644.15, 'duration': 1.701}, {'end': 5657.165, 'text': "So if is correct, I'm going to increment a new data variable for the number of correct.", 'start': 5645.931, 'duration': 11.234}, {'end': 5660.146, 'text': "So up here in data, I'll go ahead and add these.", 'start': 5657.986, 'duration': 2.16}], 'summary': 'Tracking total user submissions and correct answers.', 'duration': 26.659, 'max_score': 5633.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5633487.jpg'}], 'start': 4603.522, 'title': 'Vue.js component styling, user interaction, and lifecycle', 'summary': 'Covers styling components, improving user interaction, and demonstrating component lifecycle hooks and watch options in vue.js. it includes adding margins, padding, onclick function, hover styles, feedback on answer selection, shuffling answers, and achieving shuffled answers on a quiz app.', 'chapters': [{'end': 4798.122, 'start': 4603.522, 'title': 'Vue.js component styling and functionality', 'summary': "Covers styling a vue.js component by adding margins and padding, making buttons clickable by adding an onclick function, and setting and displaying the selected index in the component's state.", 'duration': 194.6, 'highlights': ['Styling the Vue.js component by adding margins and padding', 'Making buttons clickable with an onClick function', "Setting and displaying the selected index in the component's state"]}, {'end': 5295.484, 'start': 4798.482, 'title': 'Improving user interaction and functionality', 'summary': 'Discusses improving user interaction by adding hover styles, feedback on answer selection, and functionality like shuffling answers and using a library for array shuffling.', 'duration': 497.002, 'highlights': ['Added hover style to provide visual feedback when hovering over answers, enhancing user interaction.', 'Implemented feedback on answer selection with different background colors for selected, correct, and incorrect answers, enhancing user experience and engagement.', 'Utilized the Lodash library to shuffle answers, improving functionality and ensuring randomness in answer selection.', 'Introduced a watch method to shuffle answers every time the question changes, enhancing user experience and ensuring fair gameplay.', 'Explored the Lodash library for its utility functions, demonstrating a strategic approach to leveraging external libraries for common tasks.']}, {'end': 5739.419, 'start': 5295.484, 'title': 'Vue.js component lifecycle', 'summary': 'Demonstrates the use of component lifecycle hooks and watch options in vue.js to shuffle and submit answers on a quiz app, achieving shuffled answers on the first question, and enabling tracking of correct answers and total submissions.', 'duration': 443.935, 'highlights': ['Shuffling answers on the first question', 'Submitting and tracking correct answers', 'Utilizing Vue.js directives and methods']}], 'duration': 1135.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc4603522.jpg', 'highlights': ['Implemented feedback on answer selection with different background colors for selected, correct, and incorrect answers, enhancing user experience and engagement.', 'Utilized the Lodash library to shuffle answers, improving functionality and ensuring randomness in answer selection.', 'Introduced a watch method to shuffle answers every time the question changes, enhancing user experience and ensuring fair gameplay.', 'Added hover style to provide visual feedback when hovering over answers, enhancing user interaction.', 'Styling the Vue.js component by adding margins and padding', 'Making buttons clickable with an onClick function', "Setting and displaying the selected index in the component's state", 'Explored the Lodash library for its utility functions, demonstrating a strategic approach to leveraging external libraries for common tasks.', 'Shuffling answers on the first question', 'Submitting and tracking correct answers', 'Utilizing Vue.js directives and methods']}, {'end': 6519.798, 'segs': [{'end': 5871.456, 'src': 'embed', 'start': 5739.419, 'weight': 0, 'content': [{'end': 5753.909, 'text': "and I'm going to do props as an array this time just to have both different ways and I'm receiving the number of correct answers from the parent as well as the number of total answers,", 'start': 5739.419, 'duration': 14.49}, {'end': 5757.531, 'text': 'and I can put them here with double curly braces.', 'start': 5753.909, 'duration': 3.622}, {'end': 5766.248, 'text': 'so the number of correct out of the number of total.', 'start': 5757.531, 'duration': 8.717}, {'end': 5768.39, 'text': 'Now we changed a lot of things.', 'start': 5767.249, 'duration': 1.141}, {'end': 5769.991, 'text': "Let's look in the browser and see if this works.", 'start': 5768.45, 'duration': 1.541}, {'end': 5775.116, 'text': "Let's see what it's complaining about.", 'start': 5773.594, 'duration': 1.522}, {'end': 5777.197, 'text': 'It seems to be okay right now.', 'start': 5775.136, 'duration': 2.061}, {'end': 5780.94, 'text': "I'm going to select an answer, click Submit.", 'start': 5778.438, 'duration': 2.502}, {'end': 5783.783, 'text': 'Click Next.', 'start': 5783.122, 'duration': 0.661}, {'end': 5788.767, 'text': "Now I wonder why it's not incrementing.", 'start': 5786.465, 'duration': 2.302}, {'end': 5791.589, 'text': "I'm correct on total.", 'start': 5788.787, 'duration': 2.802}, {'end': 5798.112, 'text': 'And it seems to only be incrementing the number of correct.', 'start': 5793.769, 'duration': 4.343}, {'end': 5802.115, 'text': "So let's look back in the code and see why the total number is not incrementing.", 'start': 5798.813, 'duration': 3.302}, {'end': 5807.559, 'text': 'So we have the numTotal as props.', 'start': 5804.517, 'duration': 3.042}, {'end': 5808.62, 'text': 'That should be fine.', 'start': 5807.759, 'duration': 0.861}, {'end': 5812.803, 'text': "Let's look in app numTotals getting past.", 'start': 5809.801, 'duration': 3.002}, {'end': 5816.786, 'text': "We have numTotal here and here I'm just doing total.", 'start': 5813.664, 'duration': 3.122}, {'end': 5820.949, 'text': "So I'm going to put numTotal and that should fix the problem.", 'start': 5816.886, 'duration': 4.063}, {'end': 5824.179, 'text': 'Let me refresh just in case.', 'start': 5822.807, 'duration': 1.372}, {'end': 5831.57, 'text': 'click on an answer, submit, and now my num total is incrementing.', 'start': 5826.127, 'duration': 5.443}, {'end': 5840.635, 'text': "Although we shouldn't be able to submit a question more than once, because right now there's nothing stopping us from continuously submitting,", 'start': 5832.19, 'duration': 8.445}, {'end': 5844.857, 'text': 'or even submitting before we have selected anything.', 'start': 5840.635, 'duration': 4.222}, {'end': 5850.22, 'text': 'So really we should be disabling this submit button until we make a selection.', 'start': 5844.957, 'duration': 5.263}, {'end': 5852.141, 'text': "So let's go ahead and do that.", 'start': 5850.76, 'duration': 1.381}, {'end': 5859.283, 'text': 'I want it to set as disabled if they have not answered the question yet.', 'start': 5853.401, 'duration': 5.882}, {'end': 5871.456, 'text': "so I'm going to do V bind and then the HTML attribute of disabled, and I want this to be true if I they haven't answered the question yet,", 'start': 5859.283, 'duration': 12.173}], 'summary': 'Fixing increment issue and adding submit button disable feature in the code.', 'duration': 132.037, 'max_score': 5739.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5739419.jpg'}, {'end': 5951.933, 'src': 'embed', 'start': 5924.636, 'weight': 4, 'content': [{'end': 5932.041, 'text': 'What we are doing here just checking if the selected index is null only accounts for the case where the user has not answered the question yet.', 'start': 5924.636, 'duration': 7.405}, {'end': 5941.306, 'text': "So we're going to have to add another check to see if the question has already been answered and if it has then also disable this.", 'start': 5932.961, 'duration': 8.345}, {'end': 5951.933, 'text': "So I'm going to add another data variable called just answered and set this equal to false.", 'start': 5942.427, 'duration': 9.506}], 'summary': "Adding a check for answered questions, setting 'just answered' variable to false.", 'duration': 27.297, 'max_score': 5924.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5924636.jpg'}, {'end': 6202.377, 'src': 'embed', 'start': 6172.885, 'weight': 1, 'content': [{'end': 6181.027, 'text': 'Let me go to the next question, and the correct index changes per question.', 'start': 6172.885, 'duration': 8.142}, {'end': 6190.467, 'text': "Unfortunately, as a user, how do I know if what I selected was correct? There's no way for me to know.", 'start': 6183.087, 'duration': 7.38}, {'end': 6192.289, 'text': 'It just moves on to the next question.', 'start': 6190.847, 'duration': 1.442}, {'end': 6198.554, 'text': "So let's add some functionality and styling so the user can see feedback that the answer is correct or not.", 'start': 6192.649, 'duration': 5.905}, {'end': 6202.377, 'text': "And in doing this, we'll need to make the submit button work as well.", 'start': 6199.274, 'duration': 3.103}], 'summary': 'Improve user experience by adding feedback for correct/incorrect answers and making the submit button functional.', 'duration': 29.492, 'max_score': 6172.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc6172885.jpg'}], 'start': 5739.419, 'title': 'React props, incrementing total number, disabling submit button, and providing answer feedback', 'summary': "Involves using props as an array to receive the number of correct answers and the total answers, debugging the code to ensure the total number increments correctly, with particular focus on fixing the incrementing issue and preventing multiple submissions. it also discusses disabling the submit button until a selection is made, preventing multiple submissions, storing and displaying the correct answer, and providing feedback on the correctness of the user's answer using dynamic css classes.", 'chapters': [{'end': 5840.635, 'start': 5739.419, 'title': 'React props and incrementing total number', 'summary': 'Involves using props as an array to receive the number of correct answers and the total answers, debugging the code to ensure the total number increments correctly, with particular focus on fixing the incrementing issue and preventing multiple submissions.', 'duration': 101.216, 'highlights': ['Using props as an array to receive the number of correct answers and the total answers', 'Debugging the code to ensure the total number increments correctly', 'Preventing multiple submissions']}, {'end': 6519.798, 'start': 5840.635, 'title': 'Disabling submit button and providing answer feedback', 'summary': "Discusses disabling the submit button until a selection is made, preventing multiple submissions, storing and displaying the correct answer, and providing feedback on the correctness of the user's answer using dynamic css classes.", 'duration': 679.163, 'highlights': ['The submit button is disabled until the user makes a selection, preventing premature submissions.', 'Preventing multiple submissions by checking if the question has already been answered.', "Storing and displaying the correct answer and providing feedback on the user's choice."]}], 'duration': 780.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc5739419.jpg', 'highlights': ['Using props as an array to receive the number of correct answers and the total answers', "Storing and displaying the correct answer and providing feedback on the user's choice", 'Debugging the code to ensure the total number increments correctly', 'The submit button is disabled until the user makes a selection, preventing premature submissions', 'Preventing multiple submissions by checking if the question has already been answered', 'Preventing multiple submissions']}, {'end': 7681.788, 'segs': [{'end': 6545.638, 'src': 'embed', 'start': 6519.798, 'weight': 7, 'content': [{'end': 6525.861, 'text': "let me clean this up and let's see if that still works.", 'start': 6519.798, 'duration': 6.063}, {'end': 6529.739, 'text': 'Yes, so the answered is not defined.', 'start': 6527.216, 'duration': 2.523}, {'end': 6535.626, 'text': "And that's because, again, I forgot to put this dot answered.", 'start': 6530.64, 'duration': 4.986}, {'end': 6543.535, 'text': "So remember in the template you can use any of these variables, but if you're referencing them in the JavaScript,", 'start': 6536.647, 'duration': 6.888}, {'end': 6545.638, 'text': 'you have to reference them as this dot.', 'start': 6543.535, 'duration': 2.103}], 'summary': "Error in code due to missing 'this' dot", 'duration': 25.84, 'max_score': 6519.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc6519798.jpg'}, {'end': 6675.208, 'src': 'embed', 'start': 6601.741, 'weight': 0, 'content': [{'end': 6611.089, 'text': "Now we're going to build an app that's slightly more complicated to demonstrate how Vue Routing and Vue X, which is Vue's state management system,", 'start': 6601.741, 'duration': 9.348}, {'end': 6611.309, 'text': 'work.', 'start': 6611.089, 'duration': 0.22}, {'end': 6614.631, 'text': "It's going to be a basic four-screen application.", 'start': 6611.729, 'duration': 2.902}, {'end': 6622.658, 'text': "Its theme is getting cats and dogs to be adopted, and we're going to be performing basic CRUD operations to get used to state management.", 'start': 6615.092, 'duration': 7.566}, {'end': 6632.767, 'text': "Now there's a home screen, two screens, one for cats and one for dogs, and then you can click on any animal name, either cat or dog,", 'start': 6623.118, 'duration': 9.649}, {'end': 6635.369, 'text': 'and it will load a screen just for that animal.', 'start': 6632.767, 'duration': 2.602}, {'end': 6646.219, 'text': "So here in the terminal, I'm going to create another Vue application using Vue create, and I'm going to call it adopt pets.", 'start': 6636.53, 'duration': 9.689}, {'end': 6651.038, 'text': 'Now if you remember last time, we used the default boilerplate.', 'start': 6647.637, 'duration': 3.401}, {'end': 6653.86, 'text': "This time we're going to manually select features.", 'start': 6651.639, 'duration': 2.221}, {'end': 6659.462, 'text': 'To manually select, you can go up and down with the arrow keys and press spacebar.', 'start': 6654.28, 'duration': 5.182}, {'end': 6663.444, 'text': 'Such as here, I want to select router so I press spacebar.', 'start': 6659.842, 'duration': 3.602}, {'end': 6666.105, 'text': 'I also want view X.', 'start': 6664.264, 'duration': 1.841}, {'end': 6669.106, 'text': 'If I wanted to use SAS or something, I would select this one.', 'start': 6666.105, 'duration': 3.001}, {'end': 6674.308, 'text': "And then I think I'm going to leave testing out of this particular application.", 'start': 6670.026, 'duration': 4.282}, {'end': 6675.208, 'text': "So that's all I want.", 'start': 6674.428, 'duration': 0.78}], 'summary': 'Building a four-screen app with vue routing and vue x for basic crud operations, themed on adopting cats and dogs.', 'duration': 73.467, 'max_score': 6601.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc6601741.jpg'}, {'end': 6797.925, 'src': 'embed', 'start': 6766.784, 'weight': 3, 'content': [{'end': 6772.17, 'text': 'A few differences here are that in the main.js, instead of only rendering the app,', 'start': 6766.784, 'duration': 5.386}, {'end': 6779.578, 'text': "we're setting our store for Vuex as well as our Vue router configuration in our Vue options.", 'start': 6772.17, 'duration': 7.408}, {'end': 6787.914, 'text': "Another difference is you'll notice that here we have a views directory and a components directory.", 'start': 6780.845, 'duration': 7.069}, {'end': 6797.925, 'text': "Now, if you look in the router, you'll notice that home and about, which are the two routes, are both views.", 'start': 6788.855, 'duration': 9.07}], 'summary': 'Main.js sets vuex store and vue router, with views and components directories.', 'duration': 31.141, 'max_score': 6766.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc6766784.jpg'}, {'end': 7197.436, 'src': 'heatmap', 'start': 7036.512, 'weight': 4, 'content': [{'end': 7053.246, 'text': "I'm just going to get rid of both of these and just say home, get rid of this and this, and now I'll delete the hello world component.", 'start': 7036.512, 'duration': 16.734}, {'end': 7064.878, 'text': 'Perfect Now, just like before, I want to import view bootstrap to help do the styling for me and lay out the pages.', 'start': 7055.908, 'duration': 8.97}, {'end': 7081.565, 'text': "I'm going to go to the browser, view bootstrap, get started, install it with npm.", 'start': 7064.898, 'duration': 16.667}, {'end': 7087.288, 'text': 'So stop my server and npm i bootstrap view.', 'start': 7082.746, 'duration': 4.542}, {'end': 7104.854, 'text': "Now back in my browser, I can copy the import in view.use and I'll put it in my main.js file.", 'start': 7088.789, 'duration': 16.065}, {'end': 7112.727, 'text': "I'll put it up here with my other library imports.", 'start': 7106.96, 'duration': 5.767}, {'end': 7118.613, 'text': "And since I don't have a section for view.use, I'll put it right there.", 'start': 7114.188, 'duration': 4.425}, {'end': 7121.937, 'text': 'Now I need to import the CSS as well.', 'start': 7119.594, 'duration': 2.343}, {'end': 7129.447, 'text': "So I'll go and grab these links and put them here.", 'start': 7122.978, 'duration': 6.469}, {'end': 7130.587, 'text': "And that's it.", 'start': 7130.147, 'duration': 0.44}, {'end': 7140.092, 'text': "Now that I'm importing view bootstrap, I'm going to use some of their table components to display the tables of cats and dogs.", 'start': 7131.007, 'duration': 9.085}, {'end': 7144.554, 'text': 'So if I scroll down here, see they have table.', 'start': 7140.232, 'duration': 4.322}, {'end': 7148.176, 'text': 'And this table looks fine to me.', 'start': 7146.535, 'duration': 1.641}, {'end': 7160.983, 'text': "So I'm going to copy this B table and save it and go back to my code and let me close some of these.", 'start': 7151.158, 'duration': 9.825}, {'end': 7167.206, 'text': "Now let me start with cats and here I'm going to add that table component.", 'start': 7161.463, 'duration': 5.743}, {'end': 7168.926, 'text': 'And now of course I need the data.', 'start': 7167.606, 'duration': 1.32}, {'end': 7170.107, 'text': "So I'll add a script tag.", 'start': 7168.946, 'duration': 1.161}, {'end': 7183.19, 'text': 'and close it and export default, this object, data function and return an object.', 'start': 7172.186, 'duration': 11.004}, {'end': 7192.473, 'text': 'And now back in the browser, you can see I need an array of objects, which I already have in another file.', 'start': 7184.23, 'duration': 8.243}, {'end': 7197.436, 'text': "And I'm just going to copy paste that into my application.", 'start': 7192.873, 'duration': 4.563}], 'summary': 'Imported and used vue bootstrap to style and layout pages, added table components to display cat and dog data.', 'duration': 50.776, 'max_score': 7036.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc7036512.jpg'}, {'end': 7359.262, 'src': 'embed', 'start': 7324.324, 'weight': 9, 'content': [{'end': 7329.308, 'text': 'let me look back at item and yes, i did so.', 'start': 7324.324, 'duration': 4.984}, {'end': 7334.978, 'text': 'let me run npm run serve again, Great.', 'start': 7329.308, 'duration': 5.67}, {'end': 7336.66, 'text': 'Now my browser.', 'start': 7335.979, 'duration': 0.681}, {'end': 7342.965, 'text': "All right, it's working.", 'start': 7336.68, 'duration': 6.285}, {'end': 7347.71, 'text': 'And now I have a cats table showing all of my cats.', 'start': 7344.106, 'duration': 3.604}, {'end': 7352.514, 'text': "I'm just going to clean this up a little bit so it doesn't go all the way to the edges of the page here.", 'start': 7348.15, 'duration': 4.364}, {'end': 7359.262, 'text': "And I'm going to add a bcontainer in my app.vue.", 'start': 7355.197, 'duration': 4.065}], 'summary': "Successfully ran 'npm run serve' and displayed cats table in browser.", 'duration': 34.938, 'max_score': 7324.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc7324324.jpg'}, {'end': 7502.866, 'src': 'embed', 'start': 7477.537, 'weight': 1, 'content': [{'end': 7486.001, 'text': 'So if I go to cats, for example, then the pet page should be something like cat slash one for the ID of that cat.', 'start': 7477.537, 'duration': 8.464}, {'end': 7489.362, 'text': "So let's learn how to do this through the view router.", 'start': 7486.661, 'duration': 2.701}, {'end': 7494.02, 'text': 'ViewRouter has something called dynamic route matching.', 'start': 7491.158, 'duration': 2.862}, {'end': 7502.866, 'text': 'What it does, instead of hard coding the whole route, you actually have a dynamic route variable as part of the route.', 'start': 7494.701, 'duration': 8.165}], 'summary': 'Viewrouter uses dynamic route matching for flexible route handling.', 'duration': 25.329, 'max_score': 7477.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc7477537.jpg'}], 'start': 6519.798, 'title': 'Vue.js application development overview', 'summary': 'Provides an overview of vue.js application development, including setting up vuex for global state management, vue router for page navigation, integrating vue bootstrap for styling, and dynamic route matching for individual pet profiles.', 'chapters': [{'end': 6581.394, 'start': 6519.798, 'title': 'Debugging javascript in template', 'summary': 'Describes the process of debugging javascript in a template, emphasizing the importance of referencing variables as this dot and successfully fixing the code to ensure it works correctly in the browser.', 'duration': 61.596, 'highlights': ['Emphasizing the importance of referencing variables as this dot in JavaScript.', 'Successfully fixing the code to ensure it works correctly in the browser.', 'Describing the process of debugging JavaScript in a template.']}, {'end': 6766.183, 'start': 6581.474, 'title': 'Building four-screen vue app', 'summary': 'Discusses building a basic four-screen application for adopting cats and dogs, incorporating vue routing and vue x for state management, and manually selecting features like router and view x while creating a vue application.', 'duration': 184.709, 'highlights': ['Building a basic four-screen application for adopting cats and dogs', 'Incorporating Vue Routing and Vue X for state management', 'Manually selecting features like router and view X while creating a Vue application']}, {'end': 7681.788, 'start': 6766.784, 'title': 'Vue.js application development overview', 'summary': 'Discusses setting up a vue.js application with vuex for global state management, vue router for page navigation, and creating reusable components. it also covers integrating vue bootstrap for styling and layout, and dynamic route matching for individual pet profiles.', 'duration': 915.004, 'highlights': ['Setting up Vuex and Vue router for global state management and page navigation', 'Creating reusable components and distinct views in Vue.js application', 'Integrating Vue Bootstrap for styling and layout', 'Implementing dynamic route matching for individual pet profiles']}], 'duration': 1161.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc6519798.jpg', 'highlights': ['Setting up Vuex and Vue router for global state management and page navigation', 'Implementing dynamic route matching for individual pet profiles', 'Incorporating Vue Routing and Vue X for state management', 'Creating reusable components and distinct views in Vue.js application', 'Integrating Vue Bootstrap for styling and layout', 'Building a basic four-screen application for adopting cats and dogs', 'Manually selecting features like router and view X while creating a Vue application', 'Emphasizing the importance of referencing variables as this dot in JavaScript', 'Describing the process of debugging JavaScript in a template', 'Successfully fixing the code to ensure it works correctly in the browser']}, {'end': 8605.327, 'segs': [{'end': 7774.359, 'src': 'embed', 'start': 7742.81, 'weight': 2, 'content': [{'end': 7753.719, 'text': 'Now, if I go and hover over it, I can see the link gives me the index and if I go here, you can see in the URL I have pet slash zero,', 'start': 7742.81, 'duration': 10.909}, {'end': 7755.701, 'text': 'which is the ID of the pet in the array.', 'start': 7753.719, 'duration': 1.982}, {'end': 7761.846, 'text': 'So now I want to populate this page with the details on the individual pet.', 'start': 7756.301, 'duration': 5.545}, {'end': 7774.359, 'text': 'So what I could do is take these pets arrays and import them into my pet component and then get the index off of the router variable and just look in the array in this component.', 'start': 7762.586, 'duration': 11.773}], 'summary': "Hovering over the link reveals the id '0' for the pet in the url. the goal is to populate the page with individual pet details.", 'duration': 31.549, 'max_score': 7742.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc7742810.jpg'}, {'end': 7819.358, 'src': 'embed', 'start': 7789.011, 'weight': 0, 'content': [{'end': 7793.593, 'text': 'but I just want to show you how I generally set this up.', 'start': 7789.011, 'duration': 4.582}, {'end': 7800.597, 'text': 'I make a new folder called store and in store I make a separate file for everything.', 'start': 7793.593, 'duration': 7.004}, {'end': 7814.495, 'text': "so I'll have a file for state.js and one for mutations.js and then one for actions.js.", 'start': 7800.597, 'duration': 13.898}, {'end': 7819.358, 'text': "And now I'll make an index file to tie these together, index.js.", 'start': 7815.115, 'duration': 4.243}], 'summary': 'Setting up a new store with separate files for state, mutations, and actions, all tied together in an index file.', 'duration': 30.347, 'max_score': 7789.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc7789011.jpg'}, {'end': 7990.804, 'src': 'embed', 'start': 7946.54, 'weight': 4, 'content': [{'end': 7954.814, 'text': "And instead of importing cats from here, I'm actually going to import something from view X called map state.", 'start': 7946.54, 'duration': 8.274}, {'end': 7968.482, 'text': "And down here I'm going to use a computed object.", 'start': 7960.637, 'duration': 7.845}, {'end': 7974.686, 'text': 'And the syntax for mapState is to use a spread operator.', 'start': 7969.883, 'duration': 4.803}, {'end': 7986.322, 'text': 'and call the function and pass it an array of the items on state you would like to be able to access from this component.', 'start': 7976.756, 'duration': 9.566}, {'end': 7990.804, 'text': 'So here I want to access cats from state.', 'start': 7987.362, 'duration': 3.442}], 'summary': "Import 'mapstate' from view x to access 'cats' from state.", 'duration': 44.264, 'max_score': 7946.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc7946540.jpg'}, {'end': 8115.475, 'src': 'embed', 'start': 8080.408, 'weight': 1, 'content': [{'end': 8082.31, 'text': 'So let me go back to the browser.', 'start': 8080.408, 'duration': 1.902}, {'end': 8084.593, 'text': "And I'll refresh.", 'start': 8083.451, 'duration': 1.142}, {'end': 8090.081, 'text': "Great Now it's working and I'm getting the appropriate pets.", 'start': 8085.434, 'duration': 4.647}, {'end': 8093.586, 'text': "So now I'm going to do the same thing for dogs.", 'start': 8091.022, 'duration': 2.564}, {'end': 8106.428, 'text': "So I'm going to take this, actually the whole computed here, and go to dogs and I'm going to add the computed object here.", 'start': 8096.661, 'duration': 9.767}, {'end': 8115.475, 'text': 'And I also need map state to connect the Vuex state from the store to this component.', 'start': 8106.448, 'duration': 9.027}], 'summary': 'Refreshed browser, displayed appropriate pets, added computed object for dogs, connected vuex state.', 'duration': 35.067, 'max_score': 8080.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc8080408.jpg'}, {'end': 8226.093, 'src': 'embed', 'start': 8182.012, 'weight': 3, 'content': [{'end': 8185.875, 'text': "let me just make sure that's working back in the browser.", 'start': 8182.012, 'duration': 3.863}, {'end': 8195.581, 'text': 'now, if I click on one of these, it takes me to the species and then the ID, and now I can access these from my component.', 'start': 8185.875, 'duration': 9.706}, {'end': 8209.391, 'text': "so back in my pet component I'm going to say this dot route.", 'start': 8195.581, 'duration': 13.81}, {'end': 8213.474, 'text': "actually, because I'm in the template, I don't need this.", 'start': 8209.391, 'duration': 4.083}, {'end': 8226.093, 'text': "so I'll just say route dot I believe it's params dot species and then duplicate this row and.", 'start': 8213.474, 'duration': 12.619}], 'summary': 'Testing browser functionality for accessing species and ids in component.', 'duration': 44.081, 'max_score': 8182.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc8182012.jpg'}], 'start': 7683.208, 'title': 'Managing pet data and vue component integration', 'summary': 'Covers updating links and populating pages, resulting in successful link generation and individual pet details. it also discusses setting up a vuex store for managing pet data and integrating vuex state into vue components for successful display of pet information.', 'chapters': [{'end': 7761.846, 'start': 7683.208, 'title': 'Updating links and populating pages', 'summary': 'Describes updating links from names to ids, utilizing router links instead of a tags for consistency, resulting in successful link generation and displaying the id in the url, enabling population of the page with individual pet details.', 'duration': 78.638, 'highlights': ['The chapter demonstrates updating links from pet names to IDs, resulting in successful link generation and displaying the ID in the URL.', 'The use of router links instead of a tags for consistency is recommended for better functionality.', 'The process involves accessing the index of the row in the array to retrieve the ID of the pet for displaying on the individual pet details page.']}, {'end': 8079.867, 'start': 7762.586, 'title': 'Setting up vuex store for managing pet data', 'summary': 'Discusses setting up a vuex store to manage pet data, including creating separate files for state, mutations, and actions, importing cat and dog data into state, and using mapstate in a vue component to access the pet data.', 'duration': 317.281, 'highlights': ['Creating separate files for state, mutations, and actions in the store folder to manage the application state, following the convention of structuring Vuex store.', 'Importing cat and dog data into the state as separate arrays to be able to pull the data into any component where needed.', "Using mapState in a Vue component to access the cats array directly from the Vuex store, eliminating the need to import it into the component's data.", 'Encountering an issue where the cats array is undefined in the Vuex DevTools and troubleshooting by checking the mapping of the state and inspecting the Vuex DevTools for the base state.']}, {'end': 8605.327, 'start': 8080.408, 'title': 'Vue component development', 'summary': 'Covers the process of integrating vuex state into vue components, including mapping state, accessing router parameters, and using lifecycle methods, resulting in the successful display of pet information based on species and id.', 'duration': 524.919, 'highlights': ["The component is integrated with Vuex state using map state to access cats and dogs, enhancing the component's capability to display pet information.", 'The router parameters are accessed using this.route.params.species and this.route.params.id to retrieve the species and ID of the selected pet, facilitating accurate data retrieval.', "A lifecycle method is employed to set the 'animal' object in the component's data, enabling the display of pet details such as name, age, and breed upon component mounting.", "A 'pet' method is created to dynamically retrieve the correct animal based on the provided index, ensuring accurate display of pet information."]}], 'duration': 922.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc7683208.jpg', 'highlights': ['Creating separate files for state, mutations, and actions in the store folder to manage the application state, following the convention of structuring Vuex store.', "The component is integrated with Vuex state using map state to access cats and dogs, enhancing the component's capability to display pet information.", 'The chapter demonstrates updating links from pet names to IDs, resulting in successful link generation and displaying the ID in the URL.', 'The router parameters are accessed using this.route.params.species and this.route.params.id to retrieve the species and ID of the selected pet, facilitating accurate data retrieval.', "Using mapState in a Vue component to access the cats array directly from the Vuex store, eliminating the need to import it into the component's data."]}, {'end': 10735.682, 'segs': [{'end': 8690.342, 'src': 'embed', 'start': 8635.035, 'weight': 0, 'content': [{'end': 8641.239, 'text': "To do this, we're going to have to append the new pet to the array in store, to one of the arrays.", 'start': 8635.035, 'duration': 6.204}, {'end': 8650.265, 'text': "Now the pattern that you'll generally see for doing this is definitely not updating state directly because that's what mutations are for.", 'start': 8641.84, 'duration': 8.425}, {'end': 8652.887, 'text': 'Mutations are there to update state for you.', 'start': 8650.385, 'duration': 2.502}, {'end': 8660.052, 'text': 'And generally speaking, you will call an action that calls a mutation which updates state.', 'start': 8653.427, 'duration': 6.625}, {'end': 8668.074, 'text': "And a lot of the time the actions that you call will be where you're also making API calls because they're asynchronous.", 'start': 8660.832, 'duration': 7.242}, {'end': 8673.915, 'text': "So we're just going to use that pattern of using actions that call mutations that update state.", 'start': 8668.654, 'duration': 5.261}, {'end': 8679.736, 'text': "So in actions I'm going to add an add pet method.", 'start': 8674.275, 'duration': 5.461}, {'end': 8684.197, 'text': 'And view gives me a context object here.', 'start': 8681.336, 'duration': 2.861}, {'end': 8690.342, 'text': 'And then I can use an argument when I call this function.', 'start': 8685.74, 'duration': 4.602}], 'summary': 'Using actions to call mutations and update state in vue.js.', 'duration': 55.307, 'max_score': 8635.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc8635035.jpg'}, {'end': 8909.173, 'src': 'embed', 'start': 8864.672, 'weight': 6, 'content': [{'end': 8879.485, 'text': "so I'm going to go to home and add a button here with a bootstrap class of btn, and i think btn primary to give it some color.", 'start': 8864.672, 'duration': 14.813}, {'end': 8885.869, 'text': "i'm going to say add new pet and this should toggle and add new pet form.", 'start': 8879.485, 'duration': 6.384}, {'end': 8906.492, 'text': "and now in my javascript i'm going to add a methods object and say toggle pet form, and this.petForm equals the opposite of this.petForm.", 'start': 8885.869, 'duration': 20.623}, {'end': 8909.173, 'text': 'And of course, this is going to be a Boolean.', 'start': 8906.912, 'duration': 2.261}], 'summary': 'Added a button with bootstrap class to toggle new pet form, and implemented a javascript method to handle the form toggle.', 'duration': 44.501, 'max_score': 8864.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc8864672.jpg'}, {'end': 8970.86, 'src': 'embed', 'start': 8941.247, 'weight': 3, 'content': [{'end': 8943.389, 'text': 'So now we actually need the form.', 'start': 8941.247, 'duration': 2.142}, {'end': 8946.711, 'text': "And for that, I'm going to copy a view bootstrap form.", 'start': 8943.829, 'duration': 2.882}, {'end': 8952.395, 'text': "And I'm just going to take this most basic form at the top and then modify it.", 'start': 8948.268, 'duration': 4.127}, {'end': 8959.346, 'text': "So I'll come down here and copy everything in B form.", 'start': 8953.296, 'duration': 6.05}, {'end': 8967.376, 'text': 'up be form and now back to the code.', 'start': 8963.472, 'duration': 3.904}, {'end': 8970.86, 'text': "I'm going to add that form here.", 'start': 8967.376, 'duration': 3.484}], 'summary': 'Creating a form using bootstrap for modification.', 'duration': 29.613, 'max_score': 8941.247, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc8941247.jpg'}, {'end': 9334.6, 'src': 'embed', 'start': 9304.028, 'weight': 8, 'content': [{'end': 9313.533, 'text': 'and now here I should be getting all of my right information, passing it as an object, with species and pet as the payload,', 'start': 9304.028, 'duration': 9.505}, {'end': 9320.997, 'text': "and then this will go into the actions here as my custom payload that I'm passing through to a mutation,", 'start': 9313.533, 'duration': 7.464}, {'end': 9328.579, 'text': 'And the mutation will have species and pet pulled off payload.', 'start': 9322.918, 'duration': 5.661}, {'end': 9334.6, 'text': 'So I can update state.cats or state.dogs and push the new pet.', 'start': 9329.199, 'duration': 5.401}], 'summary': 'Using custom payload to update state with new pet information.', 'duration': 30.572, 'max_score': 9304.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc9304028.jpg'}, {'end': 9483.618, 'src': 'embed', 'start': 9458.185, 'weight': 1, 'content': [{'end': 9473.794, 'text': "this time I'm going to submit a dog 12 submit and now it's resetting the form after it's submitted and let me go to dogs here and it correctly added the dog.", 'start': 9458.185, 'duration': 15.609}, {'end': 9478.936, 'text': "of course there's a lot of other things we could add, but that's basically How VueX works.", 'start': 9473.794, 'duration': 5.142}, {'end': 9483.618, 'text': "is that you'll call an action from a component and actions are asynchronous.", 'start': 9478.936, 'duration': 4.682}], 'summary': 'Vuex allows asynchronous actions to submit dog data and reset form.', 'duration': 25.433, 'max_score': 9458.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc9458185.jpg'}, {'end': 9537.031, 'src': 'embed', 'start': 9506.687, 'weight': 4, 'content': [{'end': 9514.494, 'text': "There is actually another object that goes into the store and it's called getters.", 'start': 9506.687, 'duration': 7.807}, {'end': 9520.98, 'text': 'So getters are like computed properties but for your Vuex store.', 'start': 9515.355, 'duration': 5.625}, {'end': 9531.188, 'text': "What does that mean? Perhaps you want to pull state into a component, but you want to modify what the component receives while you're pulling it.", 'start': 9521.461, 'duration': 9.727}, {'end': 9537.031, 'text': "So it won't actually update state, but it will get back something that you want out of state.", 'start': 9531.608, 'duration': 5.423}], 'summary': 'Getters in vuex store allow modifying component-received state without updating it.', 'duration': 30.344, 'max_score': 9506.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc9506687.jpg'}, {'end': 9948.296, 'src': 'embed', 'start': 9908.916, 'weight': 2, 'content': [{'end': 9915.699, 'text': 'that is setting up sass inside of a project and this is how I generally do it in Vue.', 'start': 9908.916, 'duration': 6.783}, {'end': 9932.347, 'text': 'So I add a folder inside of source slash assets called sass and then I have an index dot sass file and I make a couple folders inside of my sass directory.', 'start': 9916.28, 'duration': 16.067}, {'end': 9944.095, 'text': 'So I have my components and my libraries and my global styles, which I usually call base.', 'start': 9932.427, 'duration': 11.668}, {'end': 9948.296, 'text': 'And then I import all of these files into my index.', 'start': 9945.115, 'duration': 3.181}], 'summary': 'Setting up sass in a vue project with folders for components, libraries, and global styles.', 'duration': 39.38, 'max_score': 9908.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc9908916.jpg'}, {'end': 10110.023, 'src': 'embed', 'start': 10078.274, 'weight': 5, 'content': [{'end': 10087.337, 'text': 'You just save all the different themes here and then attach them to a class and toggle that class dynamically from the JavaScript inside your view components.', 'start': 10078.274, 'duration': 9.063}, {'end': 10102.639, 'text': "So now that I have some variables here, I can import this into my main SAS file and with an at import, I'll say base slash variables.", 'start': 10088.157, 'duration': 14.482}, {'end': 10105.741, 'text': "And I don't need the underscore or the .", 'start': 10103.119, 'duration': 2.622}, {'end': 10106.561, 'text': 'sas on the end.', 'start': 10105.741, 'duration': 0.82}, {'end': 10108.923, 'text': "It's going to look for either .", 'start': 10107.081, 'duration': 1.842}, {'end': 10110.023, 'text': 'sas or .', 'start': 10108.923, 'duration': 1.1}], 'summary': 'Use javascript to dynamically attach themes to a class and import variables into main sas file.', 'duration': 31.749, 'max_score': 10078.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc10078274.jpg'}, {'end': 10367.335, 'src': 'embed', 'start': 10313.89, 'weight': 7, 'content': [{'end': 10326.409, 'text': "I do make usually one of these components for every single of my component files and any global styles I'll put inside various styles in the base directory.", 'start': 10313.89, 'duration': 12.519}, {'end': 10328.15, 'text': "So that's enough about SAS.", 'start': 10326.929, 'duration': 1.221}, {'end': 10331.591, 'text': 'I just wanted to show you how I usually set up a SAS project.', 'start': 10328.19, 'duration': 3.401}, {'end': 10334.392, 'text': 'This code will all be online if you want to see it.', 'start': 10332.091, 'duration': 2.301}, {'end': 10344.015, 'text': 'I want to change one more thing that feels a little bit dirty about this project, and that is to pull this table out into its own component.', 'start': 10334.952, 'duration': 9.063}, {'end': 10359.188, 'text': "In my components I'm just going to create a new file called PetTable.view and I'm going to use this as a table inside both cats and dogs.", 'start': 10346.354, 'duration': 12.834}, {'end': 10367.335, 'text': "So, to start this, I'm going to just steal this template, put it here and to make it unique for each one.", 'start': 10359.709, 'duration': 7.626}], 'summary': 'The speaker discusses setting up a sas project, creating a new component file, and making a unique table for each category.', 'duration': 53.445, 'max_score': 10313.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc10313890.jpg'}, {'end': 10602.983, 'src': 'embed', 'start': 10565.295, 'weight': 10, 'content': [{'end': 10578.141, 'text': "So I'm going to copy this for dogs go here into the dogs component and get rid of all this table stuff here,", 'start': 10565.295, 'duration': 12.846}, {'end': 10581.003, 'text': "except we're going to be passing dogs in for both of these.", 'start': 10578.141, 'duration': 2.862}, {'end': 10596.96, 'text': 'and then we need to pull in the pet table component from here and also add that component so that we can use it in the DOM,', 'start': 10582.952, 'duration': 14.008}, {'end': 10602.983, 'text': "and I'm going to add it here, and then it should work still for both cats and dogs.", 'start': 10596.96, 'duration': 6.023}], 'summary': 'Copying dogs data into dogs component, adding pet table component for use in dom, ensuring functionality for both cats and dogs.', 'duration': 37.688, 'max_score': 10565.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc10565295.jpg'}], 'start': 8605.327, 'title': 'Using vuex, form handling, form submission, and sass setup in vue project', 'summary': 'Covers using actions and mutations in vuex for crud functionality, implementing form handling in vue.js with bootstrap classes, vuex form submission and getters, and setting up sass in a vue project for theming and component creation.', 'chapters': [{'end': 8864.672, 'start': 8605.327, 'title': 'Using actions and mutations in vuex', 'summary': 'Discusses using actions and mutations in vuex to add crud functionality, emphasizing the pattern of using actions to call mutations for updating state and making asynchronous api calls.', 'duration': 259.345, 'highlights': ['The pattern of using actions to call mutations for updating state and making asynchronous API calls is emphasized.', 'The process of adding CRUD functionality by appending a new pet to the array in the store is demonstrated.']}, {'end': 9334.6, 'start': 8864.672, 'title': 'Vue.js form handling with bootstrap', 'summary': 'Discusses implementing a form handling feature in vue.js using bootstrap classes, toggling form visibility, creating form inputs, and submitting form data, including mapping actions and passing payloads.', 'duration': 469.928, 'highlights': ['Implementing toggle pet form method', 'Creating form inputs', 'Mapping actions and passing payloads']}, {'end': 9907.152, 'start': 9335.04, 'title': 'Vuex form submission and getters', 'summary': 'Discusses vuex form submission, handling form submission, resetting form after submit, using actions, mutations, and state in vuex, and implementing getters for filtering in a vuex store.', 'duration': 572.112, 'highlights': ['VueX form submission and handling', 'Actions, mutations, and state in VueX', 'Implementing getters for filtering in VueX store']}, {'end': 10262.889, 'start': 9908.916, 'title': 'Setting up sass in vue project', 'summary': 'Discusses setting up sass in a vue project, organizing sass files into folders, creating variables for easy theming, and importing sass files into the main file, ultimately applying them to the project.', 'duration': 353.973, 'highlights': ['Organizing SASS files into folders', 'Creating variables for easy theming', 'Importing SASS files into the main file and applying them to the project']}, {'end': 10735.682, 'start': 10265.091, 'title': 'Setting up a sas project and creating vue components', 'summary': 'Explains setting up a sas project, creating a new component for a table, and using vue.js to pass props and render the table for both cats and dogs views.', 'duration': 470.591, 'highlights': ['Setting up a SAS project', 'Creating a new component for a table', 'Using Vue.js to pass props and render the table for both cats and dogs views']}], 'duration': 2130.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4deVCNJq3qc/pics/4deVCNJq3qc8605327.jpg', 'highlights': ['The pattern of using actions to call mutations for updating state and making asynchronous API calls is emphasized.', 'VueX form submission and handling', 'Organizing SASS files into folders', 'Creating form inputs', 'Implementing getters for filtering in VueX store', 'Creating variables for easy theming', 'Implementing toggle pet form method', 'Creating a new component for a table', 'Mapping actions and passing payloads', 'Setting up a SAS project', 'Using Vue.js to pass props and render the table for both cats and dogs views', 'The process of adding CRUD functionality by appending a new pet to the array in the store is demonstrated.']}], 'highlights': ['Vue.js offers recommended patterns for code organization, borrowing from jQuery, Angular, and React.', 'Vue directives like V model and V if facilitate data binding and conditional rendering, enabling live updates and interaction with the DOM.', 'Vue CLI auto-injects script files, simplifying setup for developers', 'Implemented feedback on answer selection with different background colors for selected, correct, and incorrect answers, enhancing user experience and engagement.', 'Setting up Vuex and Vue router for global state management and page navigation', 'Creating separate files for state, mutations, and actions in the store folder to manage the application state, following the convention of structuring Vuex store.', 'The pattern of using actions to call mutations for updating state and making asynchronous API calls is emphasized.', 'Organizing SASS files into folders', 'Creating form inputs', 'The process of adding CRUD functionality by appending a new pet to the array in the store is demonstrated.']}