1.vue 实例的生命周期
(1)在beforeCreate中data和methods数据并没有被初始化
(2)在created中data和methods都已经被初始化
(3)在beforeMount中模板已经在内存中编辑好了,但并未渲染到页面中,只是之前写的一些模板字符串
(4)在mounted中实例已经完全被创建好了,内存中的模板已经挂载到页面上了
(5)在beforeupdate中页面显示数据是旧的但data数据是新的尚未与页面保持同步
(6)在updata中页面与数据保持同步都是最新的
2.vue-resource 实现get post jsonp 请求
(从数据库中获取列表完成增删改查功能)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Name:
<input type="text" v-model="name" class="form-control">
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent='del(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.http.options.root = 'http://vue.studyit.io/'
Vue.http.options.emulateJSON=true;
var vm = new Vue({
el:'#app',
data:{
name:'',
list:[
{id:1 , name:'五菱宏光' , ctime:new Date()},
{id:2 , name:'宝马' , ctime:new Date()}
]
},
created(){
this.getalllist()
},
methods:{
add(){
this.$http.post('api/addproduct',{name: this.name},{})
.then(result=>{
if(result.body.status===0){
this.getalllist()
this.name=''
}else{
alert('添加失败')
}
})
},
getalllist(){
this.$http.get('api/getprodlist').then(result=>{
var result = result.body
if(result.status === 0){
this.list=result.message
}else{
alert('获取数据失败')
}
})
},
del(){
this.$http.get('api/delproduct'+id).then(result=>{
if(result.body.status===0){
this.getalllist()
}else{
alert('删除失败')
}
})
}
}
})
</script>
</body>
</html>