Intro to VueJS - part 2
Routes - HTTP - Forms
HTTP
Server
Client
The client-server model
page request
website resources (JS, CSS, HTML)
request
new website resources (JS, CSS, HTML)
initial render
page re-render
form submission
new website resources (JS, CSS, HTML)
page re-render
The AJAX Model
Section 1
Server
page request
resources (JSON)
initial render
change request
partial render
New Section 1
resources
Section 2
resources (JSON)
change request
partial render
New Section 2
REST Vocabulary
REST - REpresentational State Transfer
| List all resources | Retrieve a certain entity |
api.example.com/resources/
api.example.com/resources/item12
| GET |
| Create an entity | - |
| POST |
| Replace the collection | Replace a certain entity |
| PUT |
| Delete the collection | Delete a certain entity |
| DELETE |
| - | Update a certain entity |
| PATCH |
HTTP calls with Vue
vue-resource
- Including the library:
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>- Extra configurations
new Vue({
http: {
root: '/root',
headers: {
Authorization: 'Basic YXBpOnBhc3N3b3Jk'
}
}
})- Making the call
this.$http.get(successCallback, errorCallback)Making a GET call
new Vue({
el: '#app',
data: {
imagesList: []
},
created: function () {
this.$http.get('/images').then(function(response) {
// get body data
this.imagesList = response.body;
}, function(error) {
// error callback
});
}
})Making a POST call
new Vue({
el: '#app',
data: {
imagesList: [],
},
methods: {
submit: function () {
this.$http.post('/images', {/* post object */})
.then(function(response) {
// get body data
this.imagesList.push(response.body);
}, function(error) {
// error callback
});
}
}
})<form>
...
<button type="submit" v-on:click="submit">
</button>
</form>Demo
https://my-json-server.typicode.com/andrei-antal/tic_db/images
ROUTING
Single Page Application model
http://page.com
Server
page request
resources (JSON)
initial render
change request
partial render
resources
resources (JSON)
change request
partial render
Home page
http://page.com/users
http://page.com/users/123
Users page
User details page
Web page
Routing with Vue
vue-resource
- Including the library:
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- Add the router outlet to the application
<div id="app">
<h1>Hello App!</h1>
<router-view></router-view>
</div>Components as routes
- Route names match components
var routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]- Register the routes with the Router
new Vue({
el: '#app',
router: router
...
})- Register the router with the Vue instance
var router = new VueRouter({
routes: routes
})- Router links
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>Route parameters
new Vue({
el: '#app',
data: {
imagesList: []
},
created: function () {
var id = this.$route.params.id;
// id can be null or have a value
}
})
- Accessing the route parameters
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
// marches /user and /user/123
]
})- Declaring a dynamic route the parameters
Programatic routing
new Vue({
el: '#app',
data: {
imagesList: []
},
methods: {
goBack: function () {
this.$router.push('/')
}
})
FORMS
Forms recap
- Collect data from the user
- Create a form inside a <form> tag
- Different type of inputs
- textual
- single choice
- multiple choice
- intervals
- dates
Forms in Vue
v-model
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})- Template
- Model
submitting a form
<div id="app">
<form v-on:submit>
Name: <input type="text" v-model="name">
Agree to terms? <input type="checkbox" v-model="isAgree">
<button type="submit">Submit</button>
</form>
</div>var app = new Vue({
el: '#app',
data: {
name: '',
isAgree: false,
},
methods: {
submit: function() { console.log(this.firstName, this.lastName) }
}
})- Template
- Model
Vue.js part 2
By Andrei Antal
Vue.js part 2
Curs ASE TIC - Vue.js part 2
- 1,370
