|
3 | 3 | A short, concise tutorial on the popular front-end framework Vue.js. Written for the Mission Vista High School Web Programming course. |
4 | 4 |
|
5 | 5 | ## Table of Contents |
6 | | -1. [Getting Started](#start) |
7 | | - + [Installation and Usage](#installation) |
| 6 | +1. [Getting Started](#getting-started) |
| 7 | + + [Installation and Usage](#installation-and-usage) |
8 | 8 | 2. [Basics](#basics) |
| 9 | + + [Syntax](#syntax) |
| 10 | + + [V-Directives](#v-directives) |
| 11 | + + [Basic Directory Structure](#basic-directory-structure) |
9 | 12 | 5. [Resources](#resources) |
10 | | - |
11 | | - |
12 | 13 |
|
13 | | -### Getting Started <aname="start"></a> |
14 | | - Vue.js is the Javascript framework. In this section, we will go over the core concepts to and understand and use Vue.js. |
| 14 | +### Getting Started |
| 15 | + Vue.js is the Javascript framework. In this section, we will start off with installing and getting exposed to Vue.js |
15 | 16 |
|
16 | | - #### Installation and Usage <aname="installation"></a> |
| 17 | + #### Installation and Usage |
17 | 18 | Vue.js is tremendously simple to install and use. Although we will be using the Vue command line interface (vue-cli), you can get started with Vue in 3 different ways. |
18 | 19 |
|
19 | | -**CDN:** <br> |
20 | | -Import Vue.js into your `index.html` file using the `<script>` tag. <br> |
| 20 | +**CDN:** [To Github Section](https://github.com/MissionVistaCSClub/Vue.js-Tutorial/tree/master/GettingStarted/InstallationAndUsage/1.1.A) |
| 21 | +Import Vue.js into your `index.html` file using the `<script>` tag. |
21 | 22 |
|
22 | 23 | ```html |
23 | 24 | <!-- development version with alarms and alerts --> |
24 | 25 | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
25 | 26 | ``` |
26 | 27 |
|
27 | | -<br> |
28 | | -**NPM:** <br> |
| 28 | + |
| 29 | +**NPM:** [To Github Section](https://github.com/MissionVistaCSClub/Vue.js-Tutorial/tree/master/GettingStarted/InstallationAndUsage/1.1.B) |
29 | 30 | Start by creating a project with npm |
30 | 31 | ```bash |
31 | 32 | $ npm init -y |
32 | 33 | ``` |
33 | | -<br> |
34 | | - |
| 34 | + |
| 35 | + |
35 | 36 | Install Vue and save dependencies |
36 | 37 | ```bash |
37 | 38 | $ npm install -s vue |
38 | 39 | ``` |
39 | | -<br> |
40 | | - |
| 40 | + |
41 | 41 | Then in your `index.html` file reference vue with a `<script>` tag |
42 | 42 | ``` html |
43 | 43 | <body> |
44 | 44 | <script src="node_modules/dist/vue/vue.js"></script> |
45 | 45 | </body> |
46 | 46 | ``` |
47 | 47 | \* As a note: in the `/dist` folder of the `vue` npm package, there are many other versions that refer to different builds of Vue.js. We will only be using the Full build. For more information see [here](https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds) |
48 | | -<br><br> |
49 | | -**Vue-CLI:** <br> |
| 48 | + |
| 49 | + |
| 50 | +**Vue-CLI:** [To Github Section](https://github.com/MissionVistaCSClub/Vue.js-Tutorial/tree/master/GettingStarted/InstallationAndUsage/1.1.C) |
50 | 51 | This is the method we will most often use. The Vue-CLI allows us to quickly create Single Page Applications with built in templates. |
51 | 52 | Start by installing the Vue-CLI module from NPM |
52 | 53 |
|
53 | 54 | ```bash |
54 | 55 | $ sudo npm install -g vue-cli |
55 | 56 | ``` |
56 | 57 |
|
57 | | -Create your project using the CLI with the command `vue init <template-name> <project-name>` <br> |
| 58 | +Create your project using the CLI with the command `vue init <template-name> <project-name>` |
58 | 59 | Ex: |
59 | 60 | ```bash |
60 | 61 | $ vue init webpack-simple myFirstVueProject |
61 | 62 | ``` |
62 | 63 |
|
63 | | - <br> |
64 | | -**JSFiddle:** <br> |
| 64 | + |
| 65 | +**JSFiddle:** |
65 | 66 | You can play around with Vue.js in JSFiddle's [Hello World Example](https://jsfiddle.net/chrisvfritz/50wL7mdz/) |
66 | 67 |
|
| 68 | +### Basics |
| 69 | +In this section, we will learn about the basics of Vue: basic directory structure, syntax, and v-directives. |
| 70 | +### Syntax |
| 71 | +### Basic Directory Structure |
| 72 | +#### V-Directives |
| 73 | +Vue.js uses an attribute called v-directives, similar to [Angular's](https://angular.io/) ng-directives. They allow us to retrieve, bind, show, and other actions to our data. |
| 74 | +**Declarative Rendering:** [To Github Section]() |
67 | 75 |
|
68 | 76 |
|
69 | 77 |
|
|
74 | 82 |
|
75 | 83 |
|
76 | 84 |
|
77 | | - |
78 | | -### Resources <a name="resources"></a> |
| 85 | +### Resources |
79 | 86 | Vue.js is one of the better documented frameworks out there. Regardless, I have compiled a list of my favorite Vue.js documentations/tutorials while writing this tutorial. |
80 | 87 | + **[Vue.js Official Documentation](https://vuejs.org/)** |
81 | 88 |
|
82 | | - |
|
0 commit comments