Vue.js up and running -- Introduction and basics

Vue.js basics

Vue.js is a frontend framework, which is becoming popular these years. comparing with other framework like jQuery( I learned it 4 years ago), vue can write maintable, simpler to reading and understanding code.
In this chapter, I will discuss the install and fundamental elements in vue.

1.Installation and start up

useing the vue-cli tool, install is much easier. check the webside to find documention.
vuejs-templates

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

2.Directives

We use directives to tell Vue what we want to happen and what should do with data, we also can define directives by ourself.
there are some frequent use directives and code samples:

v-if

<p v-if="hours < 12">Good morning!</p>
<p v-if="hours >= 12 && hours < 18">Good afternoon!</p>

v-show

<p v-show="false">one</p>
//equivalent 
<p style="display: none">one</p>

interpolation:{ {path}} visit data in html

<p v-if="path === '/'">You are on home page</p>
// show the value of path
<p v-else="h">You're on {
  {path}}</p>

new Vue({
   
	el: '#app',
	data: {
   
		path: location.pathname
	}
});

v-for

iterator

<li v-for="(rent, city) in averageRent