Vue.js 入门
Vue.js 入门
千往
发布于 2018-01-24 11:01:38
发布于 2018-01-24 11:01:38
背景
为了学习spring，准备写一个通讯录demo，实现增删改查功能。
前端页面同事推荐用vue.js，因为简单快速，当然前提是基于你对前端的html,css,js有一定的了解
资料
vue.js 官网： https://cn.vuejs.org/
axios： https://www.npmjs.com/package/axios
实例说明
整体思路
items用于页面展示，contact用于新增数据的存储，editContact用于修改数据的存储和展示
新建数据，页面form跟data绑定，存储在data中，axios获取data中的数据，向后端发起请求插入数据库，插入数据成功后，将前端form的数据存在items中用于页面展示；
修改数据，通过页面item.id通过axio向后端获取数据，展示在弹出窗口上，然后弹出窗口绑定了click时间触发后端editContact方法；
删除数据，页面数据通过直接获取item.id直接调用后端的删除接口，然后前端items也删除数据；
查询数据，直接接口
实例Vue，data来存储数据
var vm = new Vue({
el: '#contacts',
data: {
contact: {
id:'',
name: '',
wechat: '',
phone: '',
address: '',
industry: ''
},
editContact:{
id:'',
name: '',
wechat: '',
phone: '',
address: '',
industry: ''
},
items: []
}数据绑定，将form表单里面的内容跟data中的contact双向绑定，页面填写的数据会保存在data.contact中，可以修改data.contact的数据来控制页面的数据展示
<form role="form" class="form-horizontal" id="contactForm">
<label for="name">Name</label><input type="text" class="form-control" id="name" v-model="contact.name" />
<label for="wechat">Wechat</label><input type="text" class="form-control" id="wechat" v-model="contact.wechat" />
<label for="phone">Phone</label><input type="text" class="form-control" id="phone" v-model="contact.phone" />
<label for="address">Address</label><input type="text" class="form-control" id="address" v-model="contact.address" />
<label for="industry">Industry</label><input type="text" class="form-control" id="industry" v-model="contact.industry" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" v-on:click="insertContact" aria-hidden="true" data-dismiss="modal">保存</button>
</div>
</form>v-for 遍历数据，列表展示数据，index为列表下标，遍历items里面的数据
<tr v-for="(item,index) in items">
<td>{{item.name}}</td>
<td>{{item.wechat}}</td>
<td>{{item.phone}}</td>
<td>{{item.address}}</td>
<td>{{item.industry}}</td>
<td>
<a class="btn btn-default" v-on:click="getEditContactId(item.id)" href="#modal-container-edit" data-toggle="modal">Edit</a>
<a class="btn btn-default" v-on:click="deleteContact(item.id,index)">Delete</a>
</td>
</tr>mounted调用methods里面的方法，如mounted调用methods里面的getAllContact方法
mounted: function () {
this.getAllContact();
}跟后端的交互请求，使用axios，如下get请求
getAllContact: function(){
axios.get('/contact/all')
.then(function (response) {
console.log(response.data);
vm.items=response.data
})
.catch(function (error) {
console.log(error)
});
}methods里面方法的相互调用，edit完去调用getAllContact方法
editContactInfo: function(){
var editInfo = JSON.stringify(vm.editContact);
var instance = axios.create({
timeout: 1000,
headers: { 'Content-Type': 'application/json' }
});
instance.post('/contact/edit/'+vm.editContact.id,editInfo)
.then(function (response){
console.log(response.data);
vm.getAllContact();
})
.catch(function (error){
console.log(error);
})
}动作触发，v-on:click="方法名"，点击edit触发getEditContactId方法
<a class="btn btn-default" v-on:click="getEditContactId(item.id)" href="#modal-container-edit" data-toggle="modal">Edit</a>
<a class="btn btn-default" v-on:click="deleteContact(item.id,index)">Delete</a>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录