Vue.js Basics

Vue.js Basics

https://www.youtube.com/watch?v=z6hQqgvGI4Y&t=47s

https://vuejs.org/v2/guide/

Install

$npm install -g vue-cli
$vue init webpack myapp     // Create new project with ‘webpack’ template
$cd myapp
$npm install
$npm run dev
$npm run build

$npm install vue-resource –save    (50 min)

$npm install vue-router –save (55.34 min)

Tools

vue-router – Official router
vue-resource – Handle web requests
vue-async-data – Async data loading
vue-validator – Form validation plugin
vue-devtools – Chrome devtools extension
vue-touch – Touch guestures using Hammer.js

Basic

<input type=”text” v-model=”title”>
<h1>{{title}}

<button v-on:click=”myClickMethod”>my button</button>
<button v-on:submit=”mySubmitMethod”>my button</button>
<button v-on:keyup.enter=”myEnterMethod”>my button</button>

<li v-for=”user in users”>{{user.name}}</li>

export default {
name: ‘users’,
data(){
return{
users:[…..]
}
},
methods:{
….
}
}