21 |
22 |
37 |
38 |
--------------------------------------------------------------------------------
/1-getting-started/code/README.md:
--------------------------------------------------------------------------------
1 | # Getting started with Vue.js
2 |
3 | *Vue.js* (also called *Vue*) was created by Evan You and first released in February 2014. His objective for Vue was to create a progressive, lightweight version of JavaScript.
4 |
5 | Vue was designed to allow developers to create a user interface by adding a set of custom HTML attributes that connect software components with data. To accomplish this task, Vue.js interprets the HTML attributes as *directives* that bind input or output parts of the page to a model. The model is represented by standard JavaScript variables.
6 |
7 | You can add the Vue core library to any page and immediately start creating dynamic HTML markup that uses powerful features for data binding and event handling.
8 |
9 | ## Resources
10 |
11 | - [Sample code](./code)
12 | - [Microsoft Learn: Getting started with Vue.js](https://docs.microsoft.com/learn/modules/vue-get-started/)
13 | - [videos](link)
14 |
--------------------------------------------------------------------------------
/1-getting-started/code/images/sammy-bath.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/vue-beginners-videos/3110b6dea9b903915c1eb7e0b028a0bb2ab2d26d/1-getting-started/code/images/sammy-bath.png
--------------------------------------------------------------------------------
/1-getting-started/code/index.css:
--------------------------------------------------------------------------------
1 | .important {
2 | font-weight: bold;
3 | font-style: italic;
4 | }
5 |
--------------------------------------------------------------------------------
/1-getting-started/code/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dog pictures
8 |
9 |
10 |
11 |
12 |
13 | {{ message }}
14 |
15 |
19 |
20 |
21 |
22 |
23 |
38 |
39 |
--------------------------------------------------------------------------------
/2-logic/README.md:
--------------------------------------------------------------------------------
1 | # Getting started with Vue.js
2 |
3 | When you're creating pages that are based on data, you might need to change the display according to certain values or display multiple items in an array.
4 |
5 | By using Vue.js, you can do these things through a variety of directives. And doing so allows you to use HTML to control the output, which feels natural to many web developers.
6 |
7 | ## Resources
8 |
9 | - [Sample code](./code)
10 | - [Microsoft Learn: Dynamic page displays with Vue.js](https://docs.microsoft.com/learn/modules/vue-dynamic-rendering/)
11 | - [videos](link)
12 |
--------------------------------------------------------------------------------
/2-logic/code/1-conditional.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dog pictures
8 |
9 |
10 |
11 |
23 |
24 |
25 |
26 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/3-forms-events/README.md:
--------------------------------------------------------------------------------
1 | # Forms, data and events
2 |
3 | Users typically modify data in a web application by using a form. Because Vue.js is about working with dynamic data, it has a robust mechanism for binding data to forms. You can also manage events, performing different operations when a user selects a button or otherwise interacts with the page. And you can even add values that are computed dynamically, allowing you to minimize the amount of repeated code.
4 |
5 | ## Resources
6 |
7 | - [Sample code](./code)
8 | - [Microsoft Learn: Work with data and events in Vue.js](https://docs.microsoft.com/learn/modules/vue-data-events/)
9 | - [videos](link)
10 |
--------------------------------------------------------------------------------
/3-forms-events/code/index-computed.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
18 |
23 |
24 |
25 |
26 |
65 |
66 |
--------------------------------------------------------------------------------
/4-cli-components/code/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import Host from './components/Host.vue';
3 |
4 | createApp(Host).mount('#app');
5 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Microsoft Open Source Code of Conduct
2 |
3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
4 |
5 | Resources:
6 |
7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Microsoft Corporation.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Beginner's Series: Vue.js
2 |
3 | This is the supporting repository for the Beginner's Series: Vue.js videos. You will find all the sample code used during the videos, as well as links to additional information and resources.
4 |
5 | ## Vue.js
6 |
7 | Vue.js (also called Vue) was created by Evan You and first released in February 2014. His objective for Vue was to create a progressive, lightweight version of JavaScript.
8 |
9 | Vue was designed to allow developers to create a user interface by adding a set of custom HTML attributes that connect software components with data. To accomplish this task, Vue.js interprets the HTML attributes as directives that bind input or output parts of the page to a model. The model is represented by standard JavaScript variables.
10 |
11 | You can add the Vue core library to any page and immediately start creating dynamic HTML markup that uses powerful features for data binding and event handling, and grow to full modularized applications based around Vue.js using single file components.
12 |
13 | ### Topics covered
14 |
15 | - [Getting started](./1-getting-started)
16 | - [Logic](./2-logic)
17 | - [Forms and events](./3-forms-events)
18 | - [CLI and components](./4-cli-components)
19 |
20 | ### Content authors
21 |
22 | - [Jen Looper](https://twitter.com/jenlooper)
23 | - [Chris Noring](https://twitter.com/chris_noring)
24 | - [Christopher Harrison](https://twitter.com/geektrainer)
25 |
26 | ## Resources
27 |
28 | ### General Vue.js
29 |
30 | If you want to learn more about Vue.js, here's some places to get started:
31 |
32 | - [Videos](link)
33 | - [Microsoft Learn: Taking your first steps with Vue.js](https://docs.microsoft.com/learn/paths/vue-first-steps/)
34 | - [Vue.js](https://v3.vuejs.org/)
35 |
36 | ### Software
37 |
38 | During our videos, we used the following software:
39 |
40 | - [Visual Studio Code](https://code.visualstudio.com)
41 | - Visual Studio Code extensions
42 | - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
43 | - [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
44 | - [Node](https://nodejs.org)
45 | - [NPM](https://www.npmjs.com)
46 | - [Vue CLI](https://cli.vuejs.org)
47 |
48 | ## Contributing
49 |
50 | This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
51 |
52 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
53 |
54 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
55 |
56 | ## Trademarks
57 |
58 | This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow [Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
59 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## Security
4 |
5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
6 |
7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
8 |
9 | ## Reporting Security Issues
10 |
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 |
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
14 |
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc).
16 |
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
18 |
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 |
21 | * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 | * Full paths of source file(s) related to the manifestation of the issue
23 | * The location of the affected source code (tag/branch/commit or direct URL)
24 | * Any special configuration required to reproduce the issue
25 | * Step-by-step instructions to reproduce the issue
26 | * Proof-of-concept or exploit code (if possible)
27 | * Impact of the issue, including how an attacker might exploit the issue
28 |
29 | This information will help us triage your report more quickly.
30 |
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
32 |
33 | ## Preferred Languages
34 |
35 | We prefer all communications to be in English.
36 |
37 | ## Policy
38 |
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd).
40 |
41 |
--------------------------------------------------------------------------------