Server
Client
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
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 - 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 |
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>new Vue({
http: {
root: '/root',
headers: {
Authorization: 'Basic YXBpOnBhc3N3b3Jk'
}
}
})this.$http.get(successCallback, errorCallback)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
});
}
})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>https://my-json-server.typicode.com/andrei-antal/tic_db/images
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
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<router-view></router-view>
</div>var routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]new Vue({
el: '#app',
router: router
...
})var router = new VueRouter({
routes: routes
})<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>new Vue({
el: '#app',
data: {
imagesList: []
},
created: function () {
var id = this.$route.params.id;
// id can be null or have a value
}
})
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
// marches /user and /user/123
]
})new Vue({
el: '#app',
data: {
imagesList: []
},
methods: {
goBack: function () {
this.$router.push('/')
}
})
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})<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) }
}
})