title
Vue JS Crash Course

description
Learn the fundamentals of Vue JS (v3) in this project-based crash course Task Tracker: https://github.com/bradtraversy/vue-crash-2021 Random User Generator: https://codepen.io/bradtraversy/pen/LYbzJjK Latest Udemy Courses: https://traversymedia.com​ 💖 Support The Channel! http://www.patreon.com/traversymedia Timestamps: 0:00 - Intro & Slides 7:17 - User Generator Mini Project (CDN) 21:35 - Vue CLI Setup 24:30 - Files, Dev Server & Cleanup 28:22 - Global Styles 29:06 - Header Component 30:44 - Component Props 32:06 - Button Component 35:25 - Events 36:09 - Task Data & created() Method 38:22 - Tasks Component & v-for Loop 41:09 - Single Task Component 44:34 - Dynamic Classes 45:53 - Emit Events (Delete Task) 52:14 - Toggle Reminder 56:20 - AddTask Component & v-model 1:04:57 - Toggle Form & Template Conditionals 1:11:20 - Building For Production 1:13:33 - JSON-Server Setup 1:17:18 - Refactoring to Use The Backend 1:30:48 - Implementing the Router 1:48:23 - Restrict a Component to a Route

detail
{'title': 'Vue JS Crash Course', 'heatmap': [{'end': 1401.846, 'start': 1325.717, 'weight': 0.829}, {'end': 1533.256, 'start': 1463.035, 'weight': 0.776}, {'end': 1729.833, 'start': 1659.082, 'weight': 1}, {'end': 1863.482, 'start': 1794.905, 'weight': 0.843}, {'end': 2465.315, 'start': 2325.436, 'weight': 0.813}, {'end': 2996.367, 'start': 2924.882, 'weight': 0.798}], 'summary': "This vue js crash course covers the fundamentals of vue.js, including building small and larger applications using vue cdn and cli, vue.js components, state management using vuex, vue 3's composition api, project setup with vue cli, event handling, api integration, and vue router implementation for efficient web applications.", 'chapters': [{'end': 341.699, 'segs': [{'end': 34.088, 'src': 'embed', 'start': 7.267, 'weight': 0, 'content': [{'end': 10.49, 'text': 'hey guys, welcome to my vue.js crash course for 2021.', 'start': 7.267, 'duration': 3.223}, {'end': 20.397, 'text': "so this is an update from my 2019 version and we're going to be going over all the fundamentals of vue.js by first building a very small project using just the vue cdn,", 'start': 10.49, 'duration': 9.907}, {'end': 25.541, 'text': "and then we'll jump into using the cli to scaffold out a larger task tracker application.", 'start': 20.397, 'duration': 5.144}, {'end': 32.246, 'text': "and if you watch my react crash course that i did about a month ago, it's the same exact application that i built in that video,", 'start': 25.541, 'duration': 6.705}, {'end': 34.088, 'text': "except we're using vue instead of react.", 'start': 32.246, 'duration': 1.842}], 'summary': 'Vue.js 2021 crash course covers fundamentals, small project with cdn, and larger task tracker with cli.', 'duration': 26.821, 'max_score': 7.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs7267.jpg'}, {'end': 79.278, 'src': 'embed', 'start': 46.907, 'weight': 2, 'content': [{'end': 49.171, 'text': 'However, I will do a separate video for that.', 'start': 46.907, 'duration': 2.264}, {'end': 50.283, 'text': 'All right.', 'start': 50.043, 'duration': 0.24}, {'end': 54.285, 'text': "So we're just going to look at some slides for a few minutes and then we'll jump in and get started.", 'start': 50.303, 'duration': 3.982}, {'end': 64.007, 'text': "So first of all, what is Vue.js? It's a front end JavaScript framework for building websites and user interfaces, very similar to React and Angular.", 'start': 54.725, 'duration': 9.282}, {'end': 70.851, 'text': 'In fact, Vue, React and Angular are basically the biggest front end JavaScript frameworks that are used right now.', 'start': 64.208, 'duration': 6.643}, {'end': 79.278, 'text': 'and view is generally used to create single page apps or spas that run on the client, but it can be paired with back-end technologies like node.js,', 'start': 71.531, 'duration': 7.747}], 'summary': 'Vue.js is a front end javascript framework, similar to react and angular, used for creating single page apps or spas, paired with back-end technologies like node.js.', 'duration': 32.371, 'max_score': 46.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs46907.jpg'}, {'end': 125.538, 'src': 'embed', 'start': 103.324, 'weight': 3, 'content': [{'end': 111.65, 'text': 'but they allow you to create dynamic and interactive front end applications and websites out of React, Angular and Vue, which are the big three.', 'start': 103.324, 'duration': 8.326}, {'end': 114.852, 'text': 'I think that Vue has the easiest learning curve with React.', 'start': 111.71, 'duration': 3.142}, {'end': 122.637, 'text': 'You have a lot of specific terminology that you need to learn where Vue, in my opinion, is closer to just being structured JavaScript.', 'start': 114.892, 'duration': 7.745}, {'end': 125.538, 'text': 'Vue is easy to integrate into other projects.', 'start': 123.197, 'duration': 2.341}], 'summary': 'Vue, react, and angular create dynamic front-end apps. vue has an easy learning curve and is easy to integrate.', 'duration': 22.214, 'max_score': 103.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs103324.jpg'}, {'end': 243.222, 'src': 'embed', 'start': 205.054, 'weight': 1, 'content': [{'end': 213.18, 'text': "You should also have experience with NPM because you're going to be installing other packages to give you extra functionality or NPM or YARN.", 'start': 205.054, 'duration': 8.126}, {'end': 214.404, 'text': 'All right.', 'start': 214.144, 'duration': 0.26}, {'end': 216.545, 'text': 'So this is the app will be building again.', 'start': 214.444, 'duration': 2.101}, {'end': 219.947, 'text': "If you took the react crash course, it's the same exact application.", 'start': 216.585, 'duration': 3.362}, {'end': 221.728, 'text': "And what I've done is on the right here.", 'start': 220.348, 'duration': 1.38}, {'end': 226.091, 'text': "I've outlined all the components, because when you're using a front end framework,", 'start': 221.728, 'duration': 4.363}, {'end': 230.153, 'text': 'you want to think of your user interface in terms of different components.', 'start': 226.091, 'duration': 4.062}, {'end': 232.595, 'text': 'you know the search bar, the nav bar, whatever it might be.', 'start': 230.153, 'duration': 2.442}, {'end': 234.456, 'text': "It's going to be a separate component.", 'start': 232.975, 'duration': 1.481}, {'end': 237.578, 'text': 'So in this case, we have the header outlined in orange.', 'start': 234.816, 'duration': 2.762}, {'end': 238.759, 'text': "That's the header component.", 'start': 237.638, 'duration': 1.121}, {'end': 241.961, 'text': 'We have a button component here and these are all reusable.', 'start': 239.159, 'duration': 2.802}, {'end': 243.222, 'text': 'We can add props.', 'start': 242.322, 'duration': 0.9}], 'summary': 'The application will involve building components, like header and button, in react.', 'duration': 38.168, 'max_score': 205.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs205054.jpg'}, {'end': 307.653, 'src': 'embed', 'start': 278.498, 'weight': 5, 'content': [{'end': 280.161, 'text': 'have different routes in your application.', 'start': 278.498, 'duration': 1.663}, {'end': 285.061, 'text': 'So in the code a view component looks something like this', 'start': 282.04, 'duration': 3.021}, {'end': 286.882, 'text': 'You have three separate areas.', 'start': 285.101, 'duration': 1.781}, {'end': 290.743, 'text': 'You have your template, which is basically your output, your HTML.', 'start': 287.162, 'duration': 3.581}, {'end': 293.204, 'text': 'Here you can have HTML tags.', 'start': 291.204, 'duration': 2}, {'end': 297.326, 'text': 'You can have expressions and variables using declarative rendering.', 'start': 293.224, 'duration': 4.102}, {'end': 299.567, 'text': 'Then we have our JavaScript, our logic.', 'start': 297.686, 'duration': 1.881}, {'end': 301.59, 'text': 'From here, you can declare props.', 'start': 300.029, 'duration': 1.561}, {'end': 305.632, 'text': 'You can declare specific data that is linked to your component.', 'start': 301.63, 'duration': 4.002}, {'end': 307.653, 'text': 'You can have methods and so on.', 'start': 305.712, 'duration': 1.941}], 'summary': 'Application has three separate areas: template, javascript logic, and props.', 'duration': 29.155, 'max_score': 278.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs278498.jpg'}], 'start': 7.267, 'title': 'Vue.js fundamentals', 'summary': 'Covers the fundamentals of vue.js, including an updated crash course for 2021, building small and larger applications using vue cdn and cli, and highlighting its features, advantages, and growing popularity in the industry.', 'chapters': [{'end': 46.847, 'start': 7.267, 'title': 'Vue.js crash course 2021', 'summary': 'Introduces an updated vue.js crash course for 2021, covering all the fundamentals and building a small project using the vue cdn, followed by the creation of a larger task tracker application using the cli, focusing on version 3 and its applicability to version 2.', 'duration': 39.58, 'highlights': ['The chapter covers the fundamentals of Vue.js and includes building a small project using the Vue CDN.', 'It also involves creating a larger task tracker application using the CLI, which was previously demonstrated with React.', 'The course focuses on version 3 of Vue.js, with applicability to version 2, except for a few small differences.']}, {'end': 341.699, 'start': 46.907, 'title': 'Introduction to vue.js', 'summary': 'Introduces vue.js, a front-end javascript framework, highlighting its features, advantages, and components, and emphasizing its ease of use and growing popularity in the industry.', 'duration': 294.792, 'highlights': ['Vue.js Overview Vue.js is a front-end JavaScript framework for building websites and user interfaces, similar to React and Angular, and is widely used for creating single page apps or spas that run on the client.', 'Advantages of Vue.js Vue.js offers a relatively easy learning curve, easy integration into other projects, and is a fast and lightweight framework that uses a virtual DOM, similar to React.', 'Components in Vue.js Vue.js emphasizes the creation of user interface components, such as header, button, form, and tasks, as reusable components that can be customized with props, demonstrating its component-based architecture.', 'Vue Component Structure A Vue component consists of a template (output/HTML), JavaScript (logic), and style, which can be scoped to the specific component, and components can be embedded using XML-like tags and passed props like HTML attributes.', 'Prerequisites for Learning Vue.js Before learning Vue.js, it is essential to have a strong foundation in JavaScript, asynchronous programming, array methods, working with APIs, and experience with NPM or Yarn for package management.']}], 'duration': 334.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs7267.jpg', 'highlights': ['Covers the fundamentals of Vue.js and includes building a small project using the Vue CDN.', 'Creating a larger task tracker application using the CLI, previously demonstrated with React.', 'Vue.js is a front-end JavaScript framework for building websites and user interfaces, similar to React and Angular.', 'Vue.js offers a relatively easy learning curve, easy integration into other projects, and is a fast and lightweight framework.', 'Vue.js emphasizes the creation of user interface components, such as header, button, form, and tasks, as reusable components.', 'A Vue component consists of a template (output/HTML), JavaScript (logic), and style, which can be scoped to the specific component.']}, {'end': 1271.68, 'segs': [{'end': 453.502, 'src': 'embed', 'start': 341.699, 'weight': 0, 'content': [{'end': 346.845, 'text': "all right, so that's just a very simple example, but we'll be getting more into this as we move along.", 'start': 341.699, 'duration': 5.146}, {'end': 352.125, 'text': 'So, like I said, components can have data or state associated with them,', 'start': 348.163, 'duration': 3.962}, {'end': 356.768, 'text': 'which will determine how specific components behave and what data is displayed.', 'start': 352.125, 'duration': 4.643}, {'end': 363.532, 'text': "So data can be local to a component or it can be global or app level where it's shared with multiple components.", 'start': 357.288, 'duration': 6.244}, {'end': 366.254, 'text': "And there's different ways to handle app level state.", 'start': 364.032, 'duration': 2.222}, {'end': 374.763, 'text': 'If you have a lot of app level state or data, you might want to use something like Vuex, which is a state manager that is similar to Redux.', 'start': 366.955, 'duration': 7.808}, {'end': 382.05, 'text': 'So if you have a large application where you have maybe products, categories, users and a bunch of different resources,', 'start': 375.143, 'duration': 6.907}, {'end': 383.892, 'text': 'you probably want to use something like Vuex.', 'start': 382.05, 'duration': 1.842}, {'end': 391.934, 'text': 'Now, Vue 3 has a new composition API, which aims to address code reusability and readability.', 'start': 385.768, 'duration': 6.166}, {'end': 396.177, 'text': "Traditionally, components use what's called the options API.", 'start': 392.674, 'duration': 3.503}, {'end': 397.859, 'text': "That's what we're going to be using here.", 'start': 396.478, 'duration': 1.381}, {'end': 402.123, 'text': 'Although, like I said, I will be doing a separate video on the composition API.', 'start': 398.279, 'duration': 3.844}, {'end': 408.805, 'text': 'And then finally, I just want to talk about the Vue CLI, which is the standard tooling for Vue.js development.', 'start': 403.342, 'duration': 5.463}, {'end': 412.126, 'text': "It's a command line interface to scaffold projects.", 'start': 409.465, 'duration': 2.661}, {'end': 415.608, 'text': 'It has its own GUI Vue Manager.', 'start': 412.727, 'duration': 2.881}, {'end': 419.61, 'text': "If you want to use that, it's completely optional, but that is offered.", 'start': 415.748, 'duration': 3.862}, {'end': 423.632, 'text': 'It has a dev server and an easy production build tool.', 'start': 420.41, 'duration': 3.222}, {'end': 427.774, 'text': 'It has integrated testing, TypeScript support, Vuex support.', 'start': 423.972, 'duration': 3.802}, {'end': 431.976, 'text': "So this is what we'll be using to set up our task tracker project.", 'start': 427.894, 'duration': 4.082}, {'end': 434.078, 'text': 'All right, so enough with the slides.', 'start': 432.895, 'duration': 1.183}, {'end': 436.445, 'text': "Let's go ahead and jump in and learn Vue.js.", 'start': 434.118, 'duration': 2.327}, {'end': 441.117, 'text': "All right, so like I said, we're going to start off with a pretty simple project.", 'start': 437.315, 'duration': 3.802}, {'end': 445.318, 'text': "We're going to create a random user generator, and we're just going to use the Vue CDN.", 'start': 441.137, 'duration': 4.181}, {'end': 451.141, 'text': "And then later on, we'll move on to our task tracker application where we'll set everything up with the Vue CLI.", 'start': 445.679, 'duration': 5.462}, {'end': 453.502, 'text': 'So this is the Vue.js website.', 'start': 451.821, 'duration': 1.681}], 'summary': "Vue.js covers components, state management, vue 3's composition api, and vue cli for project setup and development.", 'duration': 111.803, 'max_score': 341.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs341699.jpg'}, {'end': 948.65, 'src': 'embed', 'start': 925.531, 'weight': 5, 'content': [{'end': 933.918, 'text': "So we want to just add a colon in front of it and then we can just set that to gender because remember, that's part of our data.", 'start': 925.531, 'duration': 8.387}, {'end': 935.639, 'text': "Right So that's right here.", 'start': 934.578, 'duration': 1.061}, {'end': 942.545, 'text': "So it's going to put that in that class and then we'll do the same thing for the button like that.", 'start': 935.919, 'duration': 6.626}, {'end': 948.65, 'text': "And if I save now, you'll see we have a blue outline on the image and we have a blue background color on the button.", 'start': 942.585, 'duration': 6.065}], 'summary': 'Adding a colon and setting gender as part of data, resulting in blue outline on image and blue background color on button.', 'duration': 23.119, 'max_score': 925.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs925531.jpg'}], 'start': 341.699, 'title': 'Vue.js components, state management, project setup, and binding', 'summary': "Covers vue.js components and their association with data and state, app level state management using vuex, vue 3's composition api, vue cli for project setup, including testing and typescript, and vue.js binding for data, ui updates, and event implementation using the random user api.", 'chapters': [{'end': 383.892, 'start': 341.699, 'title': 'Vue.js components and state management', 'summary': 'Introduces the concept of components in vue.js, highlighting the association of data and state with components, and the management of app level state using vuex for large applications with multiple resources.', 'duration': 42.193, 'highlights': ['Components in Vue.js can have data or state associated with them, influencing component behavior and displayed data.', 'Data in components can be local or global, shared with multiple components at the app level.', 'For managing app level state in large applications with multiple resources, using state managers like Vuex is recommended.']}, {'end': 879.799, 'start': 385.768, 'title': 'Using vue 3 for project setup and component creation', 'summary': "Introduces vue 3's composition api for code reusability and readability, the vue cli for project setup featuring testing, typescript and vuex support, and demonstrates creating a simple project using the vue cdn and app.js file with data binding and dynamic rendering.", 'duration': 494.031, 'highlights': ['Vue CLI features The Vue CLI provides a command line interface and GUI Vue Manager for project scaffolding, a dev server, easy production build tool, integrated testing, TypeScript support, and Vuex support.', 'Introduction to Vue 3 Composition API Vue 3 introduces a new composition API to enhance code reusability and readability, departing from the traditional options API for components.', 'Project setup using Vue CDN and app.js Demonstrates creating a simple project using the Vue CDN and app.js file with data binding and dynamic rendering, showcasing the use of V-bind directive for dynamic variables.']}, {'end': 1271.68, 'start': 879.939, 'title': 'Vue.js binding and events', 'summary': 'Demonstrates how to use vue.js to bind data to classes, update ui based on gender, and implement events to fetch and display random user data using the random user api.', 'duration': 391.741, 'highlights': ['The chapter demonstrates how to bind data to classes in Vue.js, updating the UI based on the gender data, with blue outline and background color for male and pink for female. It showcases the process of adding a binding to the class of both the image and the button based on the gender data, resulting in a blue outline and background color for male and pink for female.', 'The chapter illustrates the implementation of events in Vue.js to fetch and display random user data using the Random User API, using asynchronous functions and the fetch API. It shows how to use Vue.js to implement events for fetching and displaying random user data from the Random User API using asynchronous functions and the fetch API.', 'The demonstration includes accessing and updating data in Vue.js methods, allowing for dynamic changes to user data displayed on the UI. It showcases the process of accessing and updating user data in Vue.js methods, enabling dynamic changes to the displayed user data on the UI.']}], 'duration': 929.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs341699.jpg', 'highlights': ['Vue CLI provides a command line interface and GUI Vue Manager for project scaffolding, a dev server, easy production build tool, integrated testing, TypeScript support, and Vuex support.', 'Components in Vue.js can have data or state associated with them, influencing component behavior and displayed data.', 'Data in components can be local or global, shared with multiple components at the app level.', 'For managing app level state in large applications with multiple resources, using state managers like Vuex is recommended.', 'Introduction to Vue 3 Composition API to enhance code reusability and readability, departing from the traditional options API for components.', 'The chapter demonstrates how to bind data to classes in Vue.js, updating the UI based on the gender data, with blue outline and background color for male and pink for female.', 'The chapter illustrates the implementation of events in Vue.js to fetch and display random user data using the Random User API, using asynchronous functions and the fetch API.', 'Project setup using Vue CDN and app.js demonstrates creating a simple project using the Vue CDN and app.js file with data binding and dynamic rendering, showcasing the use of V-bind directive for dynamic variables.', 'The demonstration includes accessing and updating data in Vue.js methods, allowing for dynamic changes to user data displayed on the UI.']}, {'end': 1702.186, 'segs': [{'end': 1401.846, 'src': 'heatmap', 'start': 1325.717, 'weight': 0.829, 'content': [{'end': 1332.22, 'text': 'All right.', 'start': 1325.717, 'duration': 6.503}, {'end': 1335.402, 'text': "So now that that's all set, we basically have two options here.", 'start': 1332.24, 'duration': 3.162}, {'end': 1339.424, 'text': "We can run view, create and just create our application, which is what we're going to do.", 'start': 1335.502, 'duration': 3.922}, {'end': 1342.045, 'text': 'But you also have the option to run view UI.', 'start': 1339.504, 'duration': 2.541}, {'end': 1343.466, 'text': 'And I just want to show you what that does.', 'start': 1342.065, 'duration': 1.401}, {'end': 1348.812, 'text': 'So this will actually start up a graphical user interface so we can manage our view projects.', 'start': 1344.011, 'duration': 4.801}, {'end': 1350.693, 'text': 'So you would see your projects here.', 'start': 1349.253, 'duration': 1.44}, {'end': 1353.314, 'text': 'You can create a new project in a directory.', 'start': 1350.733, 'duration': 2.581}, {'end': 1355.234, 'text': 'Then you can install plug ins.', 'start': 1354.014, 'duration': 1.22}, {'end': 1357.695, 'text': 'You can install view X the router and so on.', 'start': 1355.254, 'duration': 2.441}, {'end': 1359.075, 'text': 'You can import projects.', 'start': 1357.775, 'duration': 1.3}, {'end': 1364.057, 'text': "So I'm not going to use this but I just wanted to show you that it is available if you do want to use it.", 'start': 1359.556, 'duration': 4.501}, {'end': 1373.971, 'text': "So I'm going to cut that off, close that up, and we're going to go ahead and run view, create and just whatever you want to call this.", 'start': 1364.477, 'duration': 9.494}, {'end': 1380.191, 'text': "I'm going to call it View Crash Dash 2021.", 'start': 1373.991, 'duration': 6.2}, {'end': 1381.672, 'text': "And it's going to ask us some questions.", 'start': 1380.191, 'duration': 1.481}, {'end': 1387.496, 'text': 'So at this point in time, we can choose if we want view version two, version three.', 'start': 1381.732, 'duration': 5.764}, {'end': 1392.219, 'text': "We can also manually select features, which is what I'm going to do just to show you what is offered here.", 'start': 1387.916, 'duration': 4.303}, {'end': 1395.661, 'text': "So I'm going to keep this selected, choose view version.", 'start': 1392.659, 'duration': 3.002}, {'end': 1401.846, 'text': "And by the way, if you're using Windows with the get bash terminal, you might have some issues with the arrows.", 'start': 1396.262, 'duration': 5.584}], 'summary': 'Options to create and manage vue projects, including view ui for gui, plugin installation, and project import.', 'duration': 76.129, 'max_score': 1325.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1325717.jpg'}, {'end': 1533.256, 'src': 'heatmap', 'start': 1463.035, 'weight': 0.776, 'content': [{'end': 1466.737, 'text': "And I'm going to CD into my view crash folder here.", 'start': 1463.035, 'duration': 3.702}, {'end': 1469.638, 'text': "And then I'm just going to open VS Code in this folder.", 'start': 1467.237, 'duration': 2.401}, {'end': 1474.162, 'text': 'So on the side here you can see all of our files and folders.', 'start': 1471.4, 'duration': 2.762}, {'end': 1475.843, 'text': 'We look at our package dot Jason.', 'start': 1474.362, 'duration': 1.481}, {'end': 1479.085, 'text': 'I chose pretty much you know the bare minimum.', 'start': 1475.863, 'duration': 3.222}, {'end': 1480.146, 'text': "So there's not much here.", 'start': 1479.145, 'duration': 1.001}, {'end': 1483.588, 'text': 'We just have views and CLI stuff and we have two scripts.', 'start': 1480.186, 'duration': 3.402}, {'end': 1490.893, 'text': 'We have NPM run serve which will run our dev server and NPM run build will build out our static assets for deployment.', 'start': 1483.608, 'duration': 7.285}, {'end': 1492.214, 'text': "So when you're ready to deploy.", 'start': 1491.053, 'duration': 1.161}, {'end': 1495.816, 'text': 'And then, if we look at the actually, you know what.', 'start': 1493.174, 'duration': 2.642}, {'end': 1496.997, 'text': "let's run the dev server.", 'start': 1495.816, 'duration': 1.181}, {'end': 1501.16, 'text': "So I'm gonna open up my integrated terminal and just run NPM.", 'start': 1496.997, 'duration': 4.163}, {'end': 1507.705, 'text': "run serve, not server, But just serve, and that's gonna run it on localhost port 8080..", 'start': 1501.16, 'duration': 6.545}, {'end': 1516.552, 'text': "So let's say HTTP localhost And it's gonna be port 8080 by default.", 'start': 1507.705, 'duration': 8.847}, {'end': 1520.215, 'text': "okay, so this is what it's gonna give us just basic landing page here.", 'start': 1516.552, 'duration': 3.663}, {'end': 1522.016, 'text': 'let me just make this a little smaller.', 'start': 1520.215, 'duration': 1.801}, {'end': 1525.334, 'text': "and And now we'll look at some of these files.", 'start': 1522.016, 'duration': 3.318}, {'end': 1528.434, 'text': "So our public folder, we're not really going to need to do anything with.", 'start': 1525.414, 'duration': 3.02}, {'end': 1533.256, 'text': "But this index HTML is the single page that's loaded in the browser.", 'start': 1528.514, 'duration': 4.742}], 'summary': 'Setting up a view crash folder with minimal package.json, including npm run serve for dev server and npm run build for deployment.', 'duration': 70.221, 'max_score': 1463.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1463035.jpg'}, {'end': 1654.061, 'src': 'embed', 'start': 1533.676, 'weight': 0, 'content': [{'end': 1536.377, 'text': "And down here, you can see there's a div with the ID of app.", 'start': 1533.676, 'duration': 2.701}, {'end': 1540.098, 'text': 'So everything is going to be spit out here, kind of like when we use the CDN.', 'start': 1536.417, 'duration': 3.681}, {'end': 1547.204, 'text': "and the way that happens is in our source folder there's this main.js and this is like the entry point to view.", 'start': 1540.758, 'duration': 6.446}, {'end': 1549.066, 'text': "so we're importing create app.", 'start': 1547.204, 'duration': 1.862}, {'end': 1557.813, 'text': "we're importing that method from view and then we're also importing our root app component, which is in app.view, and down here we're calling create,", 'start': 1549.066, 'duration': 8.747}, {'end': 1564.82, 'text': "create app and passing in the main app component and we're mounting it to that div with the id of app.", 'start': 1557.813, 'duration': 7.007}, {'end': 1567.723, 'text': "okay, so that's basically the entry point.", 'start': 1565.22, 'duration': 2.503}, {'end': 1570.225, 'text': 'then we have our app.view, which is our.', 'start': 1567.723, 'duration': 2.502}, {'end': 1571.707, 'text': "it's like our root component.", 'start': 1570.225, 'duration': 1.482}, {'end': 1576.111, 'text': 'so everything we do, you know, is going to basically go through this file.', 'start': 1571.707, 'duration': 4.404}, {'end': 1583.118, 'text': "for now, any components we create we're going to embed in here, and you can see it has the three parts, like i showed you in the slide.", 'start': 1576.111, 'duration': 7.007}, {'end': 1590.591, 'text': "there's a template, which is the output, the html, There's the script, which is the logic, the JavaScript, and then we have the styling.", 'start': 1583.118, 'duration': 7.473}, {'end': 1597.275, 'text': "All right now here what's happening is we're importing this hello world component, which I'm going to delete in a second,", 'start': 1590.611, 'duration': 6.664}, {'end': 1599.197, 'text': "but I'm just showing you that we're importing that.", 'start': 1597.275, 'duration': 1.922}, {'end': 1606.542, 'text': 'And when you want to use a component you have to define it in here or register it in this components object.', 'start': 1599.617, 'duration': 6.925}, {'end': 1611.345, 'text': 'Then you can just pass it in up here and this happens to take in a message prop.', 'start': 1606.882, 'duration': 4.463}, {'end': 1613.007, 'text': "that's being passed in.", 'start': 1611.625, 'duration': 1.382}, {'end': 1617.592, 'text': "if we look at the hello world component, you'll see it's basically just a bunch of text.", 'start': 1613.007, 'duration': 4.585}, {'end': 1625.001, 'text': "it's everything you see down here, and it's outputting this message prop, which is actually defined down here.", 'start': 1617.592, 'duration': 7.409}, {'end': 1628.565, 'text': 'okay, so whenever you pass in a prop, it needs to be defined.', 'start': 1625.001, 'duration': 3.564}, {'end': 1630.187, 'text': "here. we're going to do all this stuff on our own.", 'start': 1628.565, 'duration': 1.622}, {'end': 1634.07, 'text': "i'm just showing you the boilerplate, And then there's some scoped styling.", 'start': 1630.187, 'duration': 3.883}, {'end': 1638.853, 'text': "All right, so what we're going to do is actually delete the Hello World component.", 'start': 1634.51, 'duration': 4.343}, {'end': 1639.593, 'text': "We don't need that.", 'start': 1638.893, 'duration': 0.7}, {'end': 1642.235, 'text': "It's going to go ahead and break because we're importing it.", 'start': 1639.773, 'duration': 2.462}, {'end': 1643.755, 'text': "So let's get rid of this import.", 'start': 1642.295, 'duration': 1.46}, {'end': 1647.277, 'text': "And then we'll get rid of right here where we register it.", 'start': 1644.396, 'duration': 2.881}, {'end': 1650.499, 'text': "And let's get rid of, let's see, up here.", 'start': 1647.638, 'duration': 2.861}, {'end': 1651.84, 'text': "I'm going to get rid of the image too.", 'start': 1650.519, 'duration': 1.321}, {'end': 1654.061, 'text': "And for now, let's put an H1 and say Hello World.", 'start': 1651.9, 'duration': 2.161}], 'summary': "Transcript discusses importing and using components in a web application, including deleting the 'hello world' component and making changes to the app view.", 'duration': 120.385, 'max_score': 1533.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1533676.jpg'}], 'start': 1274.252, 'title': 'Setting up vue 3 and task tracker with vue cli', 'summary': 'Demonstrates the process of setting up task tracker application with vue cli, including installation of vue cli globally using npm, and showcases the manual setup of vue 3, covering dedicated config files, dev server initialization at localhost:8080, file structure, entry points, basic components, and recommendations for emmet and vs code extensions.', 'chapters': [{'end': 1421.828, 'start': 1274.252, 'title': 'Setting up task tracker with vue cli', 'summary': 'Demonstrates setting up task tracker application with vue cli, including installation of vue cli globally using npm, and showcasing the option to use a graphical user interface to manage vue projects.', 'duration': 147.576, 'highlights': ['The chapter demonstrates setting up Task Tracker application with Vue CLI. It covers the process of installing Vue CLI globally using NPM and choosing features for the application.', "Installation of Vue CLI globally using NPM It involves using 'sudo' command for global installation and running 'NPM install -g @vue/cli'.", 'Showcasing the option to use a graphical user interface to manage Vue projects The chapter explains how the graphical user interface allows managing projects, creating new projects, installing plugins, and importing projects.']}, {'end': 1702.186, 'start': 1421.908, 'title': 'Setting up vue 3 and basic components', 'summary': 'Covers the manual setup of vue 3, including the selection of dedicated config files and the initialization of the dev server at localhost:8080, with an overview of the file structure, entry points, and basic components, as well as recommendations for emmet and vs code extensions.', 'duration': 280.278, 'highlights': ['The chapter covers the manual setup of Vue 3, including the selection of dedicated config files and the initialization of the dev server at localhost:8080, with an overview of the file structure, entry points, and basic components, as well as recommendations for Emmet and VS Code extensions.', 'NPM run serve will run the dev server, and NPM run build will build out static assets for deployment.', 'The main.js file serves as the entry point to Vue, importing the root app component and mounting it to the div with the id of app.', "The app.view file is the root component, with a template for HTML output, a script for logic, JavaScript, and styling, and the import of the hello world component, which is then deleted and replaced with an H1 tag for 'Hello World.'", 'Recommendations are made for enabling Emmet in Vue templates and installing the Vetur extension for VS Code for highlighting and other functionalities.']}], 'duration': 427.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1274252.jpg', 'highlights': ['The chapter demonstrates setting up Task Tracker application with Vue CLI. It covers the process of installing Vue CLI globally using NPM and choosing features for the application.', 'The chapter covers the manual setup of Vue 3, including the selection of dedicated config files and the initialization of the dev server at localhost:8080, with an overview of the file structure, entry points, and basic components, as well as recommendations for Emmet and VS Code extensions.', 'Showcasing the option to use a graphical user interface to manage Vue projects The chapter explains how the graphical user interface allows managing projects, creating new projects, installing plugins, and importing projects.', 'NPM run serve will run the dev server, and NPM run build will build out static assets for deployment.', 'The main.js file serves as the entry point to Vue, importing the root app component and mounting it to the div with the id of app.', "The app.view file is the root component, with a template for HTML output, a script for logic, JavaScript, and styling, and the import of the hello world component, which is then deleted and replaced with an H1 tag for 'Hello World.'", 'Recommendations are made for enabling Emmet in Vue templates and installing the Vetur extension for VS Code for highlighting and other functionalities.', "Installation of Vue CLI globally using NPM It involves using 'sudo' command for global installation and running 'NPM install -g @vue/cli'."]}, {'end': 2649.418, 'segs': [{'end': 1863.482, 'src': 'heatmap', 'start': 1794.905, 'weight': 0.843, 'content': [{'end': 1800.507, 'text': "And we're going to display flex because we are going to have a button to toggle the ad form.", 'start': 1794.905, 'duration': 5.602}, {'end': 1802.407, 'text': 'So display flex.', 'start': 1801.467, 'duration': 0.94}, {'end': 1810.429, 'text': "Let's go ahead and justify content to space between and we'll go ahead and align our items to the center.", 'start': 1802.427, 'duration': 8.002}, {'end': 1812.17, 'text': "And let's add a margin bottom.", 'start': 1810.649, 'duration': 1.521}, {'end': 1814.018, 'text': 'of 20 pixels.', 'start': 1813.635, 'duration': 0.383}, {'end': 1817.841, 'text': 'And then I want to bring this into our app dot view.', 'start': 1815.58, 'duration': 2.261}, {'end': 1827.867, 'text': "So right up right above the export, let's add the import importing header from and that's going to be dot slash component slash header.", 'start': 1817.921, 'duration': 9.946}, {'end': 1830.849, 'text': "And then we're going to register that component here.", 'start': 1828.587, 'duration': 2.262}, {'end': 1834.471, 'text': 'So make sure you add header here and then we can go ahead and embed it.', 'start': 1830.969, 'duration': 3.502}, {'end': 1839.974, 'text': "We'll replace this H1 with our header save.", 'start': 1834.631, 'duration': 5.343}, {'end': 1843.656, 'text': 'And now we get our task tracker, which is coming from here.', 'start': 1840.194, 'duration': 3.462}, {'end': 1850.074, 'text': "Now let's talk a little bit about props, because you can pass props into a component like let's say,", 'start': 1844.571, 'duration': 5.503}, {'end': 1853.676, 'text': "we want to pass in the title here and we'll just say hello for now.", 'start': 1850.074, 'duration': 3.602}, {'end': 1861.341, 'text': 'And then if we want to work with this title inside of our header component we need to define down here props.', 'start': 1854.357, 'duration': 6.984}, {'end': 1863.482, 'text': "And there's a few ways you can define them.", 'start': 1861.901, 'duration': 1.581}], 'summary': 'Displaying flex with space between, align items, import header component, and pass props.', 'duration': 68.577, 'max_score': 1794.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1794905.jpg'}, {'end': 1843.656, 'src': 'embed', 'start': 1817.921, 'weight': 2, 'content': [{'end': 1827.867, 'text': "So right up right above the export, let's add the import importing header from and that's going to be dot slash component slash header.", 'start': 1817.921, 'duration': 9.946}, {'end': 1830.849, 'text': "And then we're going to register that component here.", 'start': 1828.587, 'duration': 2.262}, {'end': 1834.471, 'text': 'So make sure you add header here and then we can go ahead and embed it.', 'start': 1830.969, 'duration': 3.502}, {'end': 1839.974, 'text': "We'll replace this H1 with our header save.", 'start': 1834.631, 'duration': 5.343}, {'end': 1843.656, 'text': 'And now we get our task tracker, which is coming from here.', 'start': 1840.194, 'duration': 3.462}], 'summary': 'Imported and registered the header component, replacing h1 with the new header.', 'duration': 25.735, 'max_score': 1817.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1817921.jpg'}, {'end': 2023.532, 'src': 'embed', 'start': 1993.484, 'weight': 1, 'content': [{'end': 1998.611, 'text': "So button oops, we want capital B because it's a component, not just a button tag.", 'start': 1993.484, 'duration': 5.127}, {'end': 2007.545, 'text': 'Now to style this, remember in the app.view, I do have these button styles, btn.', 'start': 2001.243, 'duration': 6.302}, {'end': 2013.408, 'text': "So let's actually, we'll just add that class here.", 'start': 2008.926, 'duration': 4.482}, {'end': 2018.189, 'text': 'So class equals btn, make it look a little better.', 'start': 2013.748, 'duration': 4.441}, {'end': 2023.532, 'text': 'Now as far as the text and the color, I wanna be able to pass those in as props like this.', 'start': 2018.63, 'duration': 4.902}], 'summary': 'Styling the component with btn class to enhance the appearance.', 'duration': 30.048, 'max_score': 1993.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1993484.jpg'}, {'end': 2465.315, 'src': 'heatmap', 'start': 2325.436, 'weight': 0.813, 'content': [{'end': 2331.644, 'text': 'taken the array and then loop through them and then output a single task component for each one.', 'start': 2325.436, 'duration': 6.208}, {'end': 2333.806, 'text': "So what we'll do here is.", 'start': 2332.685, 'duration': 1.121}, {'end': 2336.253, 'text': "Let's see.", 'start': 2335.932, 'duration': 0.321}, {'end': 2336.993, 'text': "Let's actually go.", 'start': 2336.293, 'duration': 0.7}, {'end': 2343.198, 'text': "Let's add our script down here first because we want to take in the task array as a prop.", 'start': 2337.033, 'duration': 6.165}, {'end': 2351.885, 'text': "So we'll say export defaults and say name tasks.", 'start': 2343.739, 'duration': 8.146}, {'end': 2358.751, 'text': "And then we're going to have props and we're going to take in tasks, which is going to be an array.", 'start': 2352.065, 'duration': 6.686}, {'end': 2360.645, 'text': 'All right.', 'start': 2360.305, 'duration': 0.34}, {'end': 2365.707, 'text': "And if we go back to our app dot view, let's bring that tasks in.", 'start': 2360.805, 'duration': 4.902}, {'end': 2378.733, 'text': "And we want to register it here, tasks, and then all we have to do is go up here, we'll go under the header and say tasks.", 'start': 2365.727, 'duration': 13.006}, {'end': 2389.14, 'text': "Now, since we're passing in an array here which is gonna be dynamic, it's basically if it changes, we want it to get sent down into tasks,", 'start': 2379.554, 'duration': 9.586}, {'end': 2395.123, 'text': "so we're gonna vbind tasks to the tasks data.", 'start': 2389.14, 'duration': 5.983}, {'end': 2398.385, 'text': "Okay, so we'll save that, we'll go back here.", 'start': 2395.143, 'duration': 3.242}, {'end': 2412.506, 'text': "Now, we wanna basically loop through those tasks, and we can do that by creating a div And inside here, we're going to have a V-4 directive.", 'start': 2398.845, 'duration': 13.661}, {'end': 2416.969, 'text': "And that's basically how we can create a list or we can loop through and output something.", 'start': 2413.026, 'duration': 3.943}, {'end': 2426.494, 'text': "So in this V-4, let's say for each task in tasks, then we want to output something.", 'start': 2417.469, 'duration': 9.025}, {'end': 2428.675, 'text': "In this case, let's just do an H3 for now.", 'start': 2426.534, 'duration': 2.141}, {'end': 2431.757, 'text': "And we'll have access to each individual task.", 'start': 2429.096, 'duration': 2.661}, {'end': 2436.58, 'text': "And of course, the data that comes along with it, we'll just put the text for now.", 'start': 2432.578, 'duration': 4.002}, {'end': 2438.942, 'text': "Now, if I save that, it's going to work.", 'start': 2437.401, 'duration': 1.541}, {'end': 2443.604, 'text': "We're going to see all of our text, our task text in H3s.", 'start': 2438.962, 'duration': 4.642}, {'end': 2447.246, 'text': 'We do have this error here, or warning.', 'start': 2444.324, 'duration': 2.922}, {'end': 2452.048, 'text': 'It tells us that elements in an iteration expect to have a vbind key directive.', 'start': 2447.266, 'duration': 4.782}, {'end': 2455.97, 'text': 'So just like with React, when you create a list, you have to have a unique key.', 'start': 2452.568, 'duration': 3.402}, {'end': 2457.211, 'text': 'We have to do the same thing here.', 'start': 2456.01, 'duration': 1.201}, {'end': 2460.632, 'text': 'So you have to vbind a key, and it has to be unique.', 'start': 2457.231, 'duration': 3.401}, {'end': 2465.315, 'text': "So let's go ahead and just use the task.id for that.", 'start': 2460.672, 'duration': 4.643}], 'summary': 'Creating a vue component to loop through and output a list of tasks from a dynamic array.', 'duration': 139.879, 'max_score': 2325.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs2325436.jpg'}, {'end': 2649.418, 'src': 'embed', 'start': 2606.399, 'weight': 0, 'content': [{'end': 2613.481, 'text': 'So if if the set if the reminder is set to true, I want to have a green border on the side and then we just have the H3 styling.', 'start': 2606.399, 'duration': 7.082}, {'end': 2616.782, 'text': "OK so let's see what do we want to do next.", 'start': 2614.261, 'duration': 2.521}, {'end': 2620.923, 'text': "Let's let's add the delete button.", 'start': 2617.802, 'duration': 3.121}, {'end': 2625.164, 'text': 'So I do want to use font awesome and just add a delete icon here.', 'start': 2620.983, 'duration': 4.181}, {'end': 2638.548, 'text': "So I'm going to go to CDNJS dot com and just search for font awesome and let's copy the link tag and if you have any cdn that you want to include,", 'start': 2626.024, 'duration': 12.524}, {'end': 2642.392, 'text': 'you can just simply put it right in the public index html file.', 'start': 2638.548, 'duration': 3.844}, {'end': 2643.733, 'text': "so we're just going to put that.", 'start': 2642.392, 'duration': 1.341}, {'end': 2649.418, 'text': "let's paste it in right there and then we should be able to use font awesome.", 'start': 2643.733, 'duration': 5.685}], 'summary': 'Styling reminder with green border and adding a delete button using font awesome.', 'duration': 43.019, 'max_score': 2606.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs2606399.jpg'}], 'start': 1702.226, 'title': 'Vue component creation and styling', 'summary': 'Covers styling and creating components with specific layout attributes, as well as the creation, usage, and styling of vue components, including defining props and handling data, with a focus on reusable button components and event handling.', 'chapters': [{'end': 1817.841, 'start': 1702.226, 'title': 'Styling and component creation', 'summary': 'Covers creating global styles, wrapping content in a container, and creating a header component with specific styling and layout attributes.', 'duration': 115.615, 'highlights': ['The chapter covers creating global styles, wrapping content in a container, and creating a header component with specific styling and layout attributes.', 'Global styles can be organized into a single global style sheet or broken up into components for a more modular approach.', 'Specific global styles include bringing in the Poppins font, a reset, a container class, and button classes.', 'Creating a header component involves defining a template with a header tag and H1, exporting a default object with a name of header, and adding specific scoped styling for the component.', 'The scoped styling for the header component includes using display flex, setting justify content to space between, aligning items to the center, and adding a margin bottom of 20 pixels.']}, {'end': 2075.309, 'start': 1817.921, 'title': 'Vue component creation and usage', 'summary': 'Discusses the creation and usage of vue components, including importing, registering, passing props, defining props with type and default value, and styling components with props. it also demonstrates the creation of a button component with customizable text and color.', 'duration': 257.388, 'highlights': ['The chapter demonstrates importing, registering, and embedding a header component in a Vue file, showcasing the process of creating and using Vue components.', 'It explains the process of passing props into a component, showcasing the use of props to dynamically render content and demonstrating the flexibility of defining props as an array or an object with specific type and default value.', 'It illustrates the creation of a button component with customizable text and color, demonstrating the usage of props to handle text and color values and showing the application of inline style binding for dynamic styling.']}, {'end': 2649.418, 'start': 2075.349, 'title': 'Building reusable button components and handling data in vue.js', 'summary': 'Details the creation of reusable button components in vue.js, handling events, and populating data, with a focus on implementing lifecycle methods and prop passing, using a lifecycle method to populate data and creating a task component to display data.', 'duration': 574.069, 'highlights': ['Creating Reusable Button Components Demonstrates the creation of reusable button components with different text and colors, showcasing the reusability and flexibility of components in Vue.js.', 'Handling Events and Methods Explains the use of event handling and methods in Vue.js, showcasing the use of v-on directive and @ shorthand for event binding, along with defining and calling methods like onClick.', 'Populating Data using Lifecycle Methods Details the use of created lifecycle method to populate data in Vue.js, emphasizing the role of lifecycle methods in fetching and loading data, and the use of hard-coded data for demonstration.', 'Creating Task Component for Data Display Illustrates the creation of a task component in Vue.js to display data, emphasizing the use of prop passing and looping through data using v-for directive, with the inclusion of unique keys for iteration.', 'Styling and External Library Integration Demonstrates the integration of Font Awesome for icon usage, along with the inclusion of external libraries in Vue.js, and showcases the styling and scoping of components for visual presentation.']}], 'duration': 947.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs1702226.jpg', 'highlights': ['Demonstrates the integration of Font Awesome for icon usage, along with the inclusion of external libraries in Vue.js, and showcases the styling and scoping of components for visual presentation.', 'Explains the use of event handling and methods in Vue.js, showcasing the use of v-on directive and @ shorthand for event binding, along with defining and calling methods like onClick.', 'Illustrates the creation of a task component in Vue.js to display data, emphasizing the use of prop passing and looping through data using v-for directive, with the inclusion of unique keys for iteration.', 'Details the use of created lifecycle method to populate data in Vue.js, emphasizing the role of lifecycle methods in fetching and loading data, and the use of hard-coded data for demonstration.', 'Demonstrates importing, registering, and embedding a header component in a Vue file, showcasing the process of creating and using Vue components.', 'Covers creating global styles, wrapping content in a container, and creating a header component with specific styling and layout attributes.', 'Specific global styles include bringing in the Poppins font, a reset, a container class, and button classes.', 'Creating a header component involves defining a template with a header tag and H1, exporting a default object with a name of header, and adding specific scoped styling for the component.', 'The scoped styling for the header component includes using display flex, setting justify content to space between, aligning items to the center, and adding a margin bottom of 20 pixels.', 'Handling Events and Methods Explains the use of event handling and methods in Vue.js, showcasing the use of v-on directive and @ shorthand for event binding, along with defining and calling methods like onClick.', 'Creating Reusable Button Components Demonstrates the creation of reusable button components with different text and colors, showcasing the reusability and flexibility of components in Vue.js.']}, {'end': 3133.017, 'segs': [{'end': 2772.472, 'src': 'embed', 'start': 2747.539, 'weight': 4, 'content': [{'end': 2753.184, 'text': "And we're going to have a toggle function so that when we double click these, we can we can toggle that reminder.", 'start': 2747.539, 'duration': 5.645}, {'end': 2759.769, 'text': 'So the next thing that I want to do is I want to be able to click on these icons, these buttons here and delete a task.', 'start': 2753.924, 'duration': 5.845}, {'end': 2766.265, 'text': 'And the issue we have is these buttons are in the task component, which is basically two levels deep.', 'start': 2760.399, 'duration': 5.866}, {'end': 2771.491, 'text': 'We have our main app component, then we have our tasks, and then in there we have our task.', 'start': 2766.325, 'duration': 5.166}, {'end': 2772.472, 'text': "And that's where the button is.", 'start': 2771.511, 'duration': 0.961}], 'summary': 'Implement toggle and delete functions for tasks in the app.', 'duration': 24.933, 'max_score': 2747.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs2747539.jpg'}, {'end': 2912.279, 'src': 'embed', 'start': 2883.836, 'weight': 2, 'content': [{'end': 2892.786, 'text': "But this isn't going to do anything yet because we need to essentially catch this emit at the next level up, which is inside of our task file.", 'start': 2883.836, 'duration': 8.95}, {'end': 2896.99, 'text': "So here, let's say v-on.", 'start': 2893.487, 'duration': 3.503}, {'end': 2900.134, 'text': "And actually, we'll just do an at symbol here.", 'start': 2898.272, 'duration': 1.862}, {'end': 2902.016, 'text': "So let's say at delete-on.", 'start': 2900.154, 'duration': 1.862}, {'end': 2907.138, 'text': 'task. so when that happens, what do we want to do now?', 'start': 2903.337, 'duration': 3.801}, {'end': 2912.279, 'text': "the data is not here either, right, so it's it's up another level in app.", 'start': 2907.138, 'duration': 5.141}], 'summary': 'Discussing the need to catch an emit at the next level up, inside the task file.', 'duration': 28.443, 'max_score': 2883.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs2883836.jpg'}, {'end': 2996.367, 'src': 'heatmap', 'start': 2924.882, 'weight': 0.798, 'content': [{'end': 2937.716, 'text': "oops, pass in, let's say delete dash task and pass here The task dot ID, and that's going to emit up one level.", 'start': 2924.882, 'duration': 12.834}, {'end': 2941.658, 'text': "So here where we have our tasks, we're going to do the same thing.", 'start': 2938.597, 'duration': 3.061}, {'end': 2949.903, 'text': "We're going to say at delete dash task and then we want to set that to a specific method.", 'start': 2941.678, 'duration': 8.225}, {'end': 2952.564, 'text': "So we're going to call it delete task like that.", 'start': 2950.043, 'duration': 2.521}, {'end': 2958.019, 'text': "OK, and then let's go down here and we can create that method.", 'start': 2955.117, 'duration': 2.902}, {'end': 2963.982, 'text': "Now we have access to this data, right? So we'll go right above created and say methods.", 'start': 2958.079, 'duration': 5.903}, {'end': 2973.147, 'text': "And let's say delete task, and that's going to take in ID.", 'start': 2967.584, 'duration': 5.563}, {'end': 2977.43, 'text': "And for now, let's just go ahead and console log here.", 'start': 2974.908, 'duration': 2.522}, {'end': 2983.213, 'text': "I'll just console log task and then ID so we know it's coming from here.", 'start': 2977.45, 'duration': 5.763}, {'end': 2985.982, 'text': 'All right.', 'start': 2985.762, 'duration': 0.22}, {'end': 2996.367, 'text': "Now, if you see this, this warning here, this non emits event listeners, that's because in tasks, since we're passing it up the way we are,", 'start': 2986.002, 'duration': 10.365}], 'summary': 'Creating a method to delete tasks and emitting event listeners', 'duration': 71.485, 'max_score': 2924.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs2924882.jpg'}, {'end': 3120.768, 'src': 'embed', 'start': 3087.833, 'weight': 0, 'content': [{'end': 3088.974, 'text': "Right So let's save that.", 'start': 3087.833, 'duration': 1.141}, {'end': 3093.416, 'text': "And let's go ahead and just for this meeting at school, I'll click that.", 'start': 3090.034, 'duration': 3.382}, {'end': 3095.438, 'text': "You'll see it goes away, goes away.", 'start': 3093.456, 'duration': 1.982}, {'end': 3099.2, 'text': "And we could even add a confirm here since it's a delete.", 'start': 3095.458, 'duration': 3.742}, {'end': 3111.487, 'text': "So we can say like if confirm and just say, are you sure? And we'll just move this up into here.", 'start': 3099.26, 'duration': 12.227}, {'end': 3115.209, 'text': 'Just to give us a little warning for deleting.', 'start': 3113.328, 'duration': 1.881}, {'end': 3116.59, 'text': 'All right.', 'start': 3115.229, 'duration': 1.361}, {'end': 3120.768, 'text': "Now, if I reload, obviously this is going to come back because we're not persisting it.", 'start': 3117.185, 'duration': 3.583}], 'summary': 'A confirm message for deleting was added in a school meeting app.', 'duration': 32.935, 'max_score': 3087.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs3087833.jpg'}], 'start': 2649.418, 'title': 'Vue component styling and task deletion', 'summary': 'Covers styling vue components with font awesome icons and conditional class binding, and managing task deletion by emitting events and removing tasks from the app level state, addressing related warnings.', 'chapters': [{'end': 2747.439, 'start': 2649.418, 'title': 'Vue component styling and conditional class binding', 'summary': 'Explains the process of styling a vue component using font awesome icons and conditional class binding based on a reminder property, with examples of the code and its visual effects.', 'duration': 98.021, 'highlights': ['The chapter explains how to style a Vue component using Font Awesome icons and change the color of the icon.', 'It demonstrates conditional class binding based on a reminder property, with a visual example of the green bar appearing based on the true or false value of the reminder property in the data.']}, {'end': 3133.017, 'start': 2747.539, 'title': 'Managing task deletion', 'summary': 'Discusses managing task deletion, demonstrating the process of emitting events to delete tasks from the main app component down to the task component, utilizing a method to remove tasks from the app level state and addressing the warning related to emitting events.', 'duration': 385.478, 'highlights': ['The process of emitting events to delete tasks from the main app component down to the task component is demonstrated. Emitting events to delete tasks; Demonstrating the process from main app component to task component.', 'A method is utilized to remove tasks from the app level state, resetting tasks using the filter method to delete specific tasks based on their ID. Utilizing a method to remove tasks from app level state; Resetting tasks using the filter method to delete specific tasks.', 'The warning related to emitting events is addressed by defining emits as an array of events being emitted. Addressing the warning related to emitting events; Defining emits as an array of events being emitted.']}], 'duration': 483.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs2649418.jpg', 'highlights': ['The process of emitting events to delete tasks from the main app component down to the task component is demonstrated. Emitting events to delete tasks; Demonstrating the process from main app component to task component.', 'A method is utilized to remove tasks from the app level state, resetting tasks using the filter method to delete specific tasks based on their ID. Utilizing a method to remove tasks from app level state; Resetting tasks using the filter method to delete specific tasks.', 'The chapter explains how to style a Vue component using Font Awesome icons and change the color of the icon.', 'It demonstrates conditional class binding based on a reminder property, with a visual example of the green bar appearing based on the true or false value of the reminder property in the data.', 'The warning related to emitting events is addressed by defining emits as an array of events being emitted. Addressing the warning related to emitting events; Defining emits as an array of events being emitted.']}, {'end': 4274.922, 'segs': [{'end': 3336.799, 'src': 'embed', 'start': 3255.579, 'weight': 1, 'content': [{'end': 3260.22, 'text': "and we're going to set that to a method called toggle reminder.", 'start': 3255.579, 'duration': 4.641}, {'end': 3263.848, 'text': 'And then we can create that method down here.', 'start': 3261.806, 'duration': 2.042}, {'end': 3270.533, 'text': 'All right.', 'start': 3263.868, 'duration': 6.665}, {'end': 3272.915, 'text': "And that's going to take in ID.", 'start': 3270.553, 'duration': 2.362}, {'end': 3274.836, 'text': "And let's just make sure that that's being called.", 'start': 3272.975, 'duration': 1.861}, {'end': 3277.178, 'text': "We'll just console log the ID real quick.", 'start': 3274.856, 'duration': 2.322}, {'end': 3279.94, 'text': "OK And then we'll open that up.", 'start': 3278.519, 'duration': 1.421}, {'end': 3282.462, 'text': 'And if I double click, we get the ID.', 'start': 3279.98, 'duration': 2.482}, {'end': 3286.045, 'text': 'Good So we know that this is being called now to toggle the reminder.', 'start': 3282.522, 'duration': 3.523}, {'end': 3287.065, 'text': 'Excuse me.', 'start': 3286.745, 'duration': 0.32}, {'end': 3288.406, 'text': "There's a few ways you can do this.", 'start': 3287.085, 'duration': 1.321}, {'end': 3291.067, 'text': "We're going to use map.", 'start': 3289.905, 'duration': 1.162}, {'end': 3294.352, 'text': "So let's take, we'll say this.tasks.", 'start': 3291.928, 'duration': 2.424}, {'end': 3299.501, 'text': "and set this in because essentially we're updating this right.", 'start': 3296.619, 'duration': 2.882}, {'end': 3305.325, 'text': "we're updating a task by changing the reminder from either true to false or false to true.", 'start': 3299.501, 'duration': 5.824}, {'end': 3307.747, 'text': "so, let's say, equals this dot tasks.", 'start': 3305.325, 'duration': 2.422}, {'end': 3312.971, 'text': 'so the entire array we want to map through map allows us to basically, you know,', 'start': 3307.747, 'duration': 5.224}, {'end': 3317.174, 'text': 'manipulate the array and return an array of of whatever we want really.', 'start': 3312.971, 'duration': 4.203}, {'end': 3322.318, 'text': 'and we want to return an array of updated tasks.', 'start': 3317.174, 'duration': 5.144}, {'end': 3330.817, 'text': "so in this map let's put a arrow function And we're going to say for each task, Let's do a conditional here.", 'start': 3322.318, 'duration': 8.499}, {'end': 3336.799, 'text': "We want to check to see if the task.id is equal to the ID that's passed in.", 'start': 3330.857, 'duration': 5.942}], 'summary': 'Creating a method to toggle reminders by updating task array using map function.', 'duration': 81.22, 'max_score': 3255.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs3255579.jpg'}, {'end': 3451.379, 'src': 'embed', 'start': 3425.054, 'weight': 0, 'content': [{'end': 3429.715, 'text': "So I'm just going to grab the form and there's nothing view related in this form.", 'start': 3425.054, 'duration': 4.661}, {'end': 3434.656, 'text': 'If you want to copy it, if you want to type it out or you want to get the repo code, you can do that.', 'start': 3430.155, 'duration': 4.501}, {'end': 3437.356, 'text': 'Just a form with the class of add form.', 'start': 3435.116, 'duration': 2.24}, {'end': 3441.297, 'text': 'We have some form controls that wrap a label with an input.', 'start': 3437.376, 'duration': 3.921}, {'end': 3444.437, 'text': 'Then we have a day and time.', 'start': 3442.397, 'duration': 2.04}, {'end': 3449.118, 'text': 'So we have text day and time and then we have a set reminder, which is a checkbox.', 'start': 3444.457, 'duration': 4.661}, {'end': 3451.379, 'text': "So I'm just going to save that.", 'start': 3449.998, 'duration': 1.381}], 'summary': 'The form includes form controls, day and time input, and a set reminder checkbox.', 'duration': 26.325, 'max_score': 3425.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs3425054.jpg'}, {'end': 3813.286, 'src': 'embed', 'start': 3784.781, 'weight': 2, 'content': [{'end': 3789.722, 'text': "Okay, so we'll go over here, open up our console, and just type something in here.", 'start': 3784.781, 'duration': 4.941}, {'end': 3792.487, 'text': 'And you can see we have an ID.', 'start': 3790.845, 'duration': 1.642}, {'end': 3796.31, 'text': 'We have a day, a text, and a reminder.', 'start': 3793.167, 'duration': 3.143}, {'end': 3798.832, 'text': 'So now we just want to emit that upwards.', 'start': 3796.851, 'duration': 1.981}, {'end': 3805.899, 'text': "So instead of console logging, let's say this dot emit.", 'start': 3798.892, 'duration': 7.007}, {'end': 3813.286, 'text': "And let's call this, we'll just call this add dash task and send the new task.", 'start': 3806.7, 'duration': 6.586}], 'summary': "Demonstrating emitting an 'add-task' event from the console with id, day, text, and reminder.", 'duration': 28.505, 'max_score': 3784.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs3784781.jpg'}, {'end': 4074.057, 'src': 'embed', 'start': 4037.223, 'weight': 3, 'content': [{'end': 4039.425, 'text': "Let's see.", 'start': 4037.223, 'duration': 2.202}, {'end': 4040.106, 'text': 'So header.', 'start': 4039.485, 'duration': 0.621}, {'end': 4043.104, 'text': 'Yeah, toggle that.', 'start': 4040.146, 'duration': 2.958}, {'end': 4052.95, 'text': "so now, the header here in the app dot view, we're going to do the same thing and say toggle, dash, add dash task, and when that fires off,", 'start': 4043.104, 'duration': 9.846}, {'end': 4062.216, 'text': "we're going to call toggle, add task, and let's create that down here.", 'start': 4052.95, 'duration': 9.266}, {'end': 4066.118, 'text': 'so toggle, add task.', 'start': 4062.216, 'duration': 3.902}, {'end': 4074.057, 'text': "that's going to be a function and All we're going to do here is set that property, that showAddTask, to whatever.", 'start': 4066.118, 'duration': 7.939}], 'summary': 'Creating a function to toggle the showaddtask property.', 'duration': 36.834, 'max_score': 4037.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4037223.jpg'}], 'start': 3134.594, 'title': 'Vue.js event handling', 'summary': 'Covers implementing task reminder toggle, add component form, form handling, two-way binding, event handling, and component reusability in vue.js.', 'chapters': [{'end': 3516.914, 'start': 3134.594, 'title': 'Task reminder toggle and add component form', 'summary': 'Discusses implementing a toggle reminder feature by emitting events and using a map function to update tasks, then proceeds to create an add task component form and display it in the app view.', 'duration': 382.32, 'highlights': ['Implementing toggle reminder feature by emitting events and using a map function to update tasks The chapter covers implementing the toggle reminder feature by emitting events and using a map function to update tasks, allowing the user to toggle reminders for tasks.', 'Creating an add task component form and displaying it in the app view The chapter proceeds to create an add task component form and displays it in the app view, providing a user interface for adding new tasks to the application.']}, {'end': 3965.023, 'start': 3516.994, 'title': 'Vue.js form handling', 'summary': 'Explains how to handle form data and create a two-way binding using v-model, implement form submission, do simple validation, and add a new task to the data in vue.js.', 'duration': 448.029, 'highlights': ['Implementing two-way binding using V-model to bind form inputs to data The chapter explains using the V-model directive to bind form inputs to data, allowing for two-way binding where changes in the input fields reflect in the data.', 'Implementing form submission and adding a new task to the data The chapter covers the process of handling form submission, constructing a new task object, and adding it to the data using methods and event emissions in Vue.js.', 'Utilizing simple validation for the form input The transcript explains implementing simple validation by checking if certain form fields are filled, and if not, displaying an alert to the user to add a task.']}, {'end': 4274.922, 'start': 3965.243, 'title': 'Event handling in vue.js', 'summary': 'Explains the event handling in vue.js, specifically focusing on emitting and catching events between components, utilizing v-bind to dynamically update button text and color based on a boolean prop, and making components reusable by abstracting event names.', 'duration': 309.679, 'highlights': ['The chapter explains the event handling in Vue.js, specifically focusing on emitting and catching events between components. The transcript provides a detailed explanation of emitting and catching events between components in Vue.js.', "Utilizing v-bind to dynamically update button text and color based on a boolean prop. It demonstrates the usage of v-bind to dynamically update button text and color based on the boolean prop 'showAddTask'.", "Making components reusable by abstracting event names. The transcript highlights the process of making components reusable by abstracting event names, such as renaming 'toggleAddTask' to 'buttonClick'."]}], 'duration': 1140.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs3134594.jpg', 'highlights': ['Covers implementing task reminder toggle, add component form, form handling, two-way binding, event handling, and component reusability in vue.js.', 'Implementing form submission and adding a new task to the data', 'Implementing two-way binding using V-model to bind form inputs to data', 'Utilizing simple validation for the form input', 'Utilizing v-bind to dynamically update button text and color based on a boolean prop', 'Making components reusable by abstracting event names', 'Implementing toggle reminder feature by emitting events and using a map function to update tasks', 'Creating an add task component form and displaying it in the app view', 'The chapter explains the event handling in Vue.js, specifically focusing on emitting and catching events between components']}, {'end': 4862.617, 'segs': [{'end': 4373.711, 'src': 'embed', 'start': 4342.412, 'weight': 5, 'content': [{'end': 4344.974, 'text': "that's what i like to use to kind of test this locally.", 'start': 4342.412, 'duration': 2.562}, {'end': 4348.616, 'text': "so you can npm or, if you're on Mac, sudo npm.", 'start': 4344.974, 'duration': 3.642}, {'end': 4352.638, 'text': 'install excuse me, dash G for global and then serve.', 'start': 4348.616, 'duration': 4.022}, {'end': 4360.543, 'text': "And this will just, we're just going to serve the dist folder.", 'start': 4357.822, 'duration': 2.721}, {'end': 4365.566, 'text': "Okay, so it's not, we're not going to do anything with any of these other files or other folders.", 'start': 4360.843, 'duration': 4.723}, {'end': 4373.711, 'text': "Let's go ahead and just run serve, say serve dash S and let's serve the dist folder.", 'start': 4365.746, 'duration': 7.965}], 'summary': 'Using npm to serve the dist folder locally.', 'duration': 31.299, 'max_score': 4342.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4342412.jpg'}, {'end': 4446.108, 'src': 'embed', 'start': 4413.551, 'weight': 3, 'content': [{'end': 4419.492, 'text': "Now, before I start the dev server back up, I'm going to install something called Jason Server.", 'start': 4413.551, 'duration': 5.941}, {'end': 4423.533, 'text': "So let's say NPM installed Jason Dash Server.", 'start': 4419.532, 'duration': 4.001}, {'end': 4430.895, 'text': 'And just to show you what this is, say Jason Dash Server.', 'start': 4425.934, 'duration': 4.961}, {'end': 4437.781, 'text': "And we'll go ahead and just make this a little bigger.", 'start': 4434.898, 'duration': 2.883}, {'end': 4442.425, 'text': "So it's a full fake rest API and we don't have to code anything.", 'start': 4438.521, 'duration': 3.904}, {'end': 4446.108, 'text': 'Basically, we just have a JSON file that we can create.', 'start': 4442.465, 'duration': 3.643}], 'summary': 'Installing jason server to create a full fake rest api without coding.', 'duration': 32.557, 'max_score': 4413.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4413551.jpg'}, {'end': 4556.356, 'src': 'embed', 'start': 4526.362, 'weight': 4, 'content': [{'end': 4536.628, 'text': "so json server, dash dash watch and we want to watch a file called db.json, which we'll create in a minute, and i just want to run that on port 5000.", 'start': 4526.362, 'duration': 10.266}, {'end': 4540.751, 'text': "so i'm going to add the flag dash dash port.", 'start': 4536.628, 'duration': 4.123}, {'end': 4541.851, 'text': 'set that to 5000..', 'start': 4540.751, 'duration': 1.1}, {'end': 4553.535, 'text': "okay so basically that will run our back end we can call this back end OK, now the Jason file, let's create that.", 'start': 4541.851, 'duration': 11.684}, {'end': 4556.356, 'text': "That's going to be in the route called DB dot Jason.", 'start': 4553.575, 'duration': 2.781}], 'summary': "Using 'json-server --watch' to monitor 'db.json' on port 5000 for backend operations.", 'duration': 29.994, 'max_score': 4526.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4526362.jpg'}, {'end': 4658.336, 'src': 'embed', 'start': 4611.589, 'weight': 0, 'content': [{'end': 4615.632, 'text': 'We could make a post request to, to add and update and all that too.', 'start': 4611.589, 'duration': 4.043}, {'end': 4617.354, 'text': 'So our backend is running.', 'start': 4616.193, 'duration': 1.161}, {'end': 4624.24, 'text': "Let's open up a new tab here and let's run NPM run serve, which is our, our view dev server.", 'start': 4617.394, 'duration': 6.846}, {'end': 4628.053, 'text': "So I'm just going to reload this good.", 'start': 4626.192, 'duration': 1.861}, {'end': 4634.197, 'text': "So now that we have a back end, let's go to our source app dot view.", 'start': 4628.714, 'duration': 5.483}, {'end': 4643.023, 'text': "And let's see, basically we're just going to kind of change this stuff up so that we're not only dealing with the UI,", 'start': 4634.217, 'duration': 8.806}, {'end': 4645.545, 'text': "but we're also dealing with you know our back end.", 'start': 4643.023, 'duration': 2.522}, {'end': 4650.892, 'text': 'So initially we just have our tasks just hard coded right here.', 'start': 4646.63, 'duration': 4.262}, {'end': 4652.333, 'text': 'We have our created lifecycle.', 'start': 4650.952, 'duration': 1.381}, {'end': 4655.114, 'text': "We're setting this task to a hard coded array.", 'start': 4652.353, 'duration': 2.761}, {'end': 4656.495, 'text': "So I don't want to do that.", 'start': 4655.614, 'duration': 0.881}, {'end': 4658.336, 'text': 'I want to fetch from the back end.', 'start': 4656.655, 'duration': 1.681}], 'summary': 'Updating the backend to fetch data for the ui instead of using hard coded values.', 'duration': 46.747, 'max_score': 4611.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4611589.jpg'}], 'start': 4274.922, 'title': 'Building and deploying single page app with json server and updating ui and back end integration', 'summary': 'Covers building and deploying a single page app with json server, including instructions on serving static assets, and integrating back end with the ui using asynchronous fetch and implementing a proxy for back end api in a vue.js application.', 'chapters': [{'end': 4634.197, 'start': 4274.922, 'title': 'Building and deploying single page app with json server', 'summary': 'Covers building and deploying a single page app with a demonstration of using json server to create a fake rest api, including instructions on building static assets for deployment, serving the dist folder, and running the json server on port 5000.', 'duration': 359.275, 'highlights': ['The chapter covers building and deploying a single page app with a demonstration of using JSON Server to create a fake REST API. The chapter provides a practical demonstration of building and deploying a single page app while introducing the use of JSON Server to create a fake REST API.', "Instructions on building static assets for deployment and serving the dist folder. Instructions are given on building static assets for deployment, including running 'NPM run build' to create a 'dist' folder and serving it using 'serve' to test locally.", 'Running the JSON Server on port 5000 for creating a fake back end. The chapter demonstrates running the JSON Server on port 5000 to create a fake back end, allowing the execution of get, post, put, patch, and delete requests, along with filtering and pagination.']}, {'end': 4862.617, 'start': 4634.217, 'title': 'Updating ui and back end integration', 'summary': 'Discusses integrating back end with the ui, using asynchronous fetch to retrieve data from the server, and implementing a proxy for back end api in a vue.js application.', 'duration': 228.4, 'highlights': ['Integrating back end with the UI The chapter focuses on changing the approach to not only deal with the UI but also the back end.', 'Using asynchronous fetch for data retrieval The transcript emphasizes using asynchronous fetch to retrieve data from the server using sync await with fetch API.', 'Implementing a proxy for back end API in a Vue.js application The discussion includes implementing a proxy for the back end API in a Vue.js application to simplify the endpoint usage.']}], 'duration': 587.695, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4274922.jpg', 'highlights': ['The chapter covers building and deploying a single page app with a demonstration of using JSON Server to create a fake REST API.', 'Instructions on building static assets for deployment and serving the dist folder are provided.', 'Running the JSON Server on port 5000 for creating a fake back end is demonstrated.', 'Integrating back end with the UI is emphasized.', 'Using asynchronous fetch for data retrieval is highlighted.', 'Implementing a proxy for back end API in a Vue.js application is discussed.']}, {'end': 5430.249, 'segs': [{'end': 4886.802, 'src': 'embed', 'start': 4862.878, 'weight': 1, 'content': [{'end': 4872.526, 'text': "Basically what I want to do is set it so if we hit slash API slash anything, then we're hitting localhost 5000 slash anything.", 'start': 4862.878, 'duration': 9.648}, {'end': 4875.349, 'text': "So I'm actually going to just copy these rules real quick.", 'start': 4872.586, 'duration': 2.763}, {'end': 4877.454, 'text': 'And pace season.', 'start': 4876.573, 'duration': 0.881}, {'end': 4877.934, 'text': 'All right.', 'start': 4877.474, 'duration': 0.46}, {'end': 4881.177, 'text': "So essentially, we'll be able to just do what I have here.", 'start': 4877.994, 'duration': 3.183}, {'end': 4882.818, 'text': 'API slash tasks.', 'start': 4881.197, 'duration': 1.621}, {'end': 4886.802, 'text': "And that's going to hit local host 5000 slash tasks.", 'start': 4883.499, 'duration': 3.303}], 'summary': 'Setting up a rule to redirect /api/* to localhost:5000/*.', 'duration': 23.924, 'max_score': 4862.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4862878.jpg'}, {'end': 4968.857, 'src': 'embed', 'start': 4935.537, 'weight': 0, 'content': [{'end': 4943.583, 'text': "so response set that to await, fetch and we want to fetch we're going to.", 'start': 4935.537, 'duration': 8.046}, {'end': 4950.929, 'text': 'this is going to be API slash tasks, but it needs to be a post request, not a get request.', 'start': 4943.583, 'duration': 7.346}, {'end': 4960.336, 'text': "so we need to pass in a second options, parameter or argument, and let's set method to post.", 'start': 4950.929, 'duration': 9.407}, {'end': 4968.857, 'text': "and since we're sending data, we want to do headers and we want to set the content dash Type.", 'start': 4960.336, 'duration': 8.521}], 'summary': 'Using await and fetch for a post request to api/tasks with content-type header.', 'duration': 33.32, 'max_score': 4935.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4935537.jpg'}, {'end': 5430.249, 'src': 'embed', 'start': 5363.405, 'weight': 2, 'content': [{'end': 5383.096, 'text': 'because put is for updates and then headers and we wanna add content-type of application slash JSON and then for the body,', 'start': 5363.405, 'duration': 19.691}, {'end': 5384.577, 'text': "make sure we don't do it in the headers.", 'start': 5383.096, 'duration': 1.481}, {'end': 5390.954, 'text': "So the body is going to be, let's say, json.stringify.", 'start': 5385.973, 'duration': 4.981}, {'end': 5393.975, 'text': 'And we want to pass in here the updated task.', 'start': 5391.094, 'duration': 2.881}, {'end': 5399.116, 'text': "All right, so then we'll get the response back, which will be the updated task.", 'start': 5395.755, 'duration': 3.361}, {'end': 5408.218, 'text': 'And then the only thing we want to change down here is, instead of setting the reminder to the opposite of task reminder,', 'start': 5399.976, 'duration': 8.242}, {'end': 5413.4, 'text': 'we want to set it to whatever the data coming back, which is the, you know, the updated task.', 'start': 5408.218, 'duration': 5.182}, {'end': 5415.962, 'text': 'We want to set it to the reminder value of that.', 'start': 5413.44, 'duration': 2.522}, {'end': 5419.944, 'text': "So let's save and food shopping.", 'start': 5417.222, 'duration': 2.722}, {'end': 5420.724, 'text': "I'll double click.", 'start': 5419.984, 'duration': 0.74}, {'end': 5424.586, 'text': "OK, so it looks like that's not working.", 'start': 5422.545, 'duration': 2.041}, {'end': 5429.569, 'text': "Let's see.", 'start': 5429.048, 'duration': 0.521}, {'end': 5430.249, 'text': "Oh, I didn't.", 'start': 5429.849, 'duration': 0.4}], 'summary': 'Updating task with json content, encountering issues with reminder value.', 'duration': 66.844, 'max_score': 5363.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs5363405.jpg'}], 'start': 4862.878, 'title': 'Api setup and task operations', 'summary': 'Involves setting up api redirect to localhost:5000 and implementing asynchronous add, delete, and toggle operations for tasks, resulting in improved task management and user experience.', 'chapters': [{'end': 4916.068, 'start': 4862.878, 'title': 'Setting up api redirect', 'summary': "Involves setting up a rule to redirect requests from '/api/anything' to 'localhost:5000/anything', enabling more convenient api access.", 'duration': 53.19, 'highlights': ["Setting up a rule to redirect requests from '/API/anything' to 'localhost:5000/anything'", 'Enabling more convenient API access', 'Restarting the server after making the changes']}, {'end': 5430.249, 'start': 4916.068, 'title': 'Asynchronous task operations implementation', 'summary': 'Covers the implementation of asynchronous add, delete, and toggle operations for tasks, including making requests to the api, handling responses, and updating the ui, resulting in improved task management and user experience.', 'duration': 514.181, 'highlights': ['The implementation of asynchronous add, delete, and toggle operations for tasks is demonstrated. The transcript covers the implementation of asynchronous add, delete, and toggle operations, including making requests to the API, handling responses, and updating the UI.', 'The process of making a POST request to add a task to the API is explained, with a demonstration of handling the response and updating the UI. The process of making a POST request to add a task to the API is explained, including setting the method to post, configuring headers, sending the data, handling the response, and updating the UI.', 'The steps for making a DELETE request to remove a task from the API and updating the UI are outlined. The steps for making a DELETE request to remove a task from the API and updating the UI are outlined, including setting the method to delete, checking the response status, and updating the UI accordingly.', "The process of making a PUT request to update a task's reminder in the API and reflecting the changes in the UI is demonstrated. The process of making a PUT request to update a task's reminder in the API and reflecting the changes in the UI is demonstrated, including preparing the updated task object, making the put request, handling the response, and updating the UI."]}], 'duration': 567.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs4862878.jpg', 'highlights': ["Setting up a rule to redirect requests from '/API/anything' to 'localhost:5000/anything'", 'Enabling more convenient API access', 'Restarting the server after making the changes', 'Demonstrating asynchronous add, delete, and toggle operations for tasks', 'Explaining the process of making a POST request to add a task to the API', 'Outlining the steps for making a DELETE request to remove a task from the API and updating the UI', "Demonstrating the process of making a PUT request to update a task's reminder in the API and reflecting the changes in the UI"]}, {'end': 6649.126, 'segs': [{'end': 5462.043, 'src': 'embed', 'start': 5432.11, 'weight': 1, 'content': [{'end': 5433.21, 'text': "It's been a long video.", 'start': 5432.11, 'duration': 1.1}, {'end': 5435.371, 'text': 'We need to get the data back.', 'start': 5434.031, 'duration': 1.34}, {'end': 5436.172, 'text': 'So wait.', 'start': 5435.472, 'duration': 0.7}, {'end': 5438.173, 'text': 'Res Jason.', 'start': 5437.212, 'duration': 0.961}, {'end': 5440.301, 'text': 'There we go.', 'start': 5439.821, 'duration': 0.48}, {'end': 5441.222, 'text': 'Food shopping.', 'start': 5440.522, 'duration': 0.7}, {'end': 5441.983, 'text': "Let's toggle.", 'start': 5441.282, 'duration': 0.701}, {'end': 5444.025, 'text': "If I reload, it's gone.", 'start': 5442.203, 'duration': 1.822}, {'end': 5444.826, 'text': 'Toggle it again.', 'start': 5444.125, 'duration': 0.701}, {'end': 5446.187, 'text': "Reload It's still there.", 'start': 5444.846, 'duration': 1.341}, {'end': 5448.65, 'text': 'All right, good.', 'start': 5446.207, 'duration': 2.443}, {'end': 5450.812, 'text': 'So we basically have a crud application.', 'start': 5448.71, 'duration': 2.102}, {'end': 5454.075, 'text': "We can't update the title and the day.", 'start': 5451.272, 'duration': 2.803}, {'end': 5462.043, 'text': 'I mean, you can implement that if you want, but this should give you a pretty good idea of how to how to do that and how to work with a back end.', 'start': 5454.115, 'duration': 7.928}], 'summary': 'Demonstration of crud application with back end integration.', 'duration': 29.933, 'max_score': 5432.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs5432110.jpg'}, {'end': 5515.295, 'src': 'embed', 'start': 5489.482, 'weight': 0, 'content': [{'end': 5498.867, 'text': 'So I want to go to my view, you know, my front end, my Vue.js terminal here and just cut this off for a second and then NPM install.', 'start': 5489.482, 'duration': 9.385}, {'end': 5507.571, 'text': "And at this point, we're going to install router or Vue dash router at next, which will give us the latest version of the router.", 'start': 5499.567, 'duration': 8.004}, {'end': 5513.574, 'text': "So at this point in time, if you're using Vue version three, you need to make sure you add this at next.", 'start': 5508.031, 'duration': 5.543}, {'end': 5515.295, 'text': "So let's install that.", 'start': 5514.214, 'duration': 1.081}], 'summary': 'Installing vue.js router at next for vue version three', 'duration': 25.813, 'max_score': 5489.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs5489482.jpg'}, {'end': 5852.271, 'src': 'embed', 'start': 5795.923, 'weight': 2, 'content': [{'end': 5807.427, 'text': 'Now down here we want to define our router with the create router function that we brought in, which takes in an object with a history property,', 'start': 5795.923, 'duration': 11.504}, {'end': 5810.748, 'text': "which we're going to pass in create web history.", 'start': 5807.427, 'duration': 3.321}, {'end': 5817.831, 'text': 'And this takes in the base URL, which we can do process dot ENV dot base underscore URL.', 'start': 5811.369, 'duration': 6.462}, {'end': 5820.232, 'text': 'And then it also takes in our routes array.', 'start': 5818.351, 'duration': 1.881}, {'end': 5825.527, 'text': 'And then we just need to export default router.', 'start': 5821.344, 'duration': 4.183}, {'end': 5829.029, 'text': 'So this is our route file.', 'start': 5827.348, 'duration': 1.681}, {'end': 5836.793, 'text': 'Now, in order to use the router, we actually have to go to our main.js, the entry point, and import that router file that we just created.', 'start': 5829.089, 'duration': 7.704}, {'end': 5840.855, 'text': "So it's going to be from .slash router.", 'start': 5836.913, 'duration': 3.942}, {'end': 5848.5, 'text': 'And then we just want to use it by saying create app and then just pass in a .use here like that.', 'start': 5841.016, 'duration': 7.484}, {'end': 5852.271, 'text': 'and pass in our router and that will use the router.', 'start': 5849.249, 'duration': 3.022}], 'summary': 'Define router with createrouter function, using history property and routes array, and export default router.', 'duration': 56.348, 'max_score': 5795.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs5795923.jpg'}, {'end': 6213.02, 'src': 'embed', 'start': 6187.799, 'weight': 4, 'content': [{'end': 6193.503, 'text': "I hate doing this kind of stuff in a tutorial, but I'm going to grab the methods and created.", 'start': 6187.799, 'duration': 5.704}, {'end': 6197.806, 'text': 'Copy them and then put them here in home.', 'start': 6195.084, 'duration': 2.722}, {'end': 6205.918, 'text': "But we don't need in home this here, toggle add task.", 'start': 6200.456, 'duration': 5.462}, {'end': 6206.958, 'text': "We're going to get rid of that.", 'start': 6205.938, 'duration': 1.02}, {'end': 6211.059, 'text': 'And then here we can get rid of everything.', 'start': 6208.859, 'duration': 2.2}, {'end': 6211.719, 'text': "Let's see.", 'start': 6211.079, 'duration': 0.64}, {'end': 6213.02, 'text': "We'll get rid of the created.", 'start': 6211.779, 'duration': 1.241}], 'summary': 'Tutorial involves removing unnecessary methods and tasks.', 'duration': 25.221, 'max_score': 6187.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs6187799.jpg'}], 'start': 5432.11, 'title': 'Implementing vue.js router and component refactoring', 'summary': 'Demonstrates implementing vue router, creating new routes, and refactoring vue.js components to optimize code structure, emphasizing the importance of choosing the router option when using the cli for vue version three and resulting in a more efficient and organized web application.', 'chapters': [{'end': 5852.271, 'start': 5432.11, 'title': 'Implementing vue router for front-end', 'summary': 'Demonstrates the implementation of vue router, including manually setting up the router, creating components, and defining routes for a vue.js application. it also emphasizes the importance of choosing the router option when using the cli for vue version three.', 'duration': 420.161, 'highlights': ['The chapter demonstrates the implementation of Vue Router, including manually setting up the router, creating components, and defining routes for a Vue.js application. The chapter provides a step-by-step guide on how to implement Vue Router, covering manual router setup, component creation, and route definition.', 'It emphasizes the importance of choosing the router option when using the CLI for Vue version three. The chapter highlights the significance of selecting the router option when using the CLI for Vue version three, indicating its relevance for efficient implementation.']}, {'end': 6051.352, 'start': 5853.973, 'title': 'Implementing router links and creating new routes', 'summary': 'Covers implementing router links for seamless navigation, creating new routes for different components, and transferring content from app.view to home.view.', 'duration': 197.379, 'highlights': ['The chapter covers implementing router links for seamless navigation, creating new routes for different components, and transferring content from app.view to home.view.', 'Using router-link instead of href prevents page refresh, creating a seamless navigation experience.', "Creating a new route for the home page involves defining the path as slash, naming it 'home', and assigning the component as home.", 'Transferring content from app.view to home.view involves copying specific elements from app.view and placing them into home.view.']}, {'end': 6649.126, 'start': 6051.352, 'title': 'Refactoring vue.js components', 'summary': 'Discusses refactoring vue.js components to optimize code structure and demonstrate the use of props, computed properties, and conditional rendering, resulting in a more efficient and organized web application.', 'duration': 597.774, 'highlights': ['The tutorial demonstrates refactoring Vue.js components to optimize the code structure, showcasing the use of props, computed properties, and conditional rendering.', 'The speaker emphasizes the importance of creating the home page with the CLI to avoid the need for extensive code rearrangement.', "Props are utilized to pass 'show add task' value from the main app file to the view components, enhancing reusability and efficiency.", "The computed property 'home page' is implemented to conditionally show the 'add task' button only on the home page, enhancing the user interface and user experience.", 'The chapter concludes by emphasizing the fundamental concepts of Vue.js and encourages independent application development.']}], 'duration': 1217.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qZXt1Aom3Cs/pics/qZXt1Aom3Cs5432110.jpg', 'highlights': ['Demonstrates implementing Vue Router, including manual setup, component creation, and route definition.', 'Emphasizes the importance of choosing the router option when using the CLI for Vue version three.', 'Covers implementing router links for seamless navigation and creating new routes for different components.', 'Utilizes props, computed properties, and conditional rendering to optimize the code structure of Vue.js components.', 'Encourages independent application development and emphasizes fundamental concepts of Vue.js.']}], 'highlights': ['Vue.js emphasizes the creation of user interface components, such as header, button, form, and tasks, as reusable components.', 'Vue.js offers a relatively easy learning curve, easy integration into other projects, and is a fast and lightweight framework.', 'Vue CLI provides a command line interface and GUI Vue Manager for project scaffolding, a dev server, easy production build tool, integrated testing, TypeScript support, and Vuex support.', 'For managing app level state in large applications with multiple resources, using state managers like Vuex is recommended.', 'Introduction to Vue 3 Composition API to enhance code reusability and readability, departing from the traditional options API for components.', 'The chapter demonstrates setting up Task Tracker application with Vue CLI. It covers the process of installing Vue CLI globally using NPM and choosing features for the application.', 'Demonstrates the integration of Font Awesome for icon usage, along with the inclusion of external libraries in Vue.js, and showcases the styling and scoping of components for visual presentation.', 'The process of emitting events to delete tasks from the main app component down to the task component is demonstrated.', 'Covers implementing task reminder toggle, add component form, form handling, two-way binding, event handling, and component reusability in vue.js.', 'The chapter covers building and deploying a single page app with a demonstration of using JSON Server to create a fake REST API.', "Setting up a rule to redirect requests from '/API/anything' to 'localhost:5000/anything'", 'Demonstrates implementing Vue Router, including manual setup, component creation, and route definition.', 'Utilizes props, computed properties, and conditional rendering to optimize the code structure of Vue.js components.']}