A short, concise tutorial on the popular front-end framework Vue.js. Written for the Mission Vista High School Web Programming course. Not every directory in the repo will be accounted for here... make sure to poke around in the repo for more information
Vue.js is the Javascript framework. In this section, we will start off with installing and getting exposed to Vue.js
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.
CDN: To Github Section
Import Vue.js into your index.html file using the <script> tag.
<!-- development version with alarms and alerts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>NPM: To Github Section
Start by creating a project with npm
$ npm init -yInstall Vue and save dependencies
$ npm install -s vueThen in your index.html file reference vue with a <script> tag
<body>
<script src="node_modules/dist/vue/vue.js"></script>
</body>* 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
Vue-CLI: To Github Section
This is the method we will most often use. The Vue-CLI allows us to quickly create Single Page Applications with built in templates. Start by installing the Vue-CLI module from NPM
$ sudo npm install -g vue-cliCreate your project using the CLI with the command vue init <template-name> <project-name>
Ex:
$ vue init webpack-simple myFirstVueProjectJSFiddle:
You can play around with Vue.js in JSFiddle's Hello World Example
In this section, we will learn about the basics of Vue: basic directory structure, syntax, and v-directives.
Vue.js has special syntax. In this section, we discover interpolations and basic data bindings related to Vue.js.
For this tutorial we go over 3 different templates. However, we use webpack-simple the most. The other templates can be found using the documentation.
Vue.js uses an attribute called v-directives, similar to Angular's ng-directives. They allow us to retrieve, bind, show, and other actions to our data. With every new v-directive demonstrated, make sure to test out its data binding by trying it out in the console.
Declarative Rendering: To Github Section
Declarative Rendering basically means that Vue.js hooks up the data from our <script> tag to the DOM. To prove this, run the provided example and in the browser console type:
app.messageThis should output:
Hello Vue! You can also set the data of your Vue app and it will update reactively.
app.message = "Vue is cool!"This should dynamically change the webpage.
In this section, we will learn about the basics of scaling up: components. In Vue.js, components are the way to easily reuse code. Components can split up pages or even make new HTML tags (will get into later).
Components are just reusable Vue instances with a name. Since they are reusable Vue instances, they accept the same properties like data, computed, and methods. The only exceptions are with options like el.
Nesting Components: To Github Section
As seen in this image, we can nest components of our web page. We most often do this in medium to large-sized applications. However, we can do it on small sized applications to ensure order and clean code.
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.