A short, concise tutorial on the popular front-end framework Vue.js. Written for the Mission Vista High School Web Programming course.
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 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.
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.
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.