使用this.
h
t
t
p
.
g
e
t
和
t
h
i
s
.
http.get 和 this.
http.get和this.http.post传参
getInfo(){
console.log(this.page)
this.$http.get('http://localhost:8080/resourceController/requestResourceListData',{params:{page:this.page,rows:this.rows}},{
emulateJSON:true
}).then(result =>{
console.log(result.body.rows)
this.list=result.body.rows
})
}
getInfo(){
console.log(this.page)
this.$http.post('http://localhost:8080/resourceController/requestResourceListData',{page:this.page,rows:this.rows},{
emulateJSON:true
}).then(result =>{
console.log(result.body.rows)
this.list=result.body.rows
})
}
this.$http.post()(三个参数)
参数1：请求的url地址参数二要提交的数据，以对象的形式参数三，配置对象，以哪种表单数据类型提交过去 使用.then来设置成功的回调函数
如果我们通过全局配置了根域名，则每次发起请求的URL也以相对路径，不带‘/’,否则不会进行路径拼接
//emulateJson:true 可进行全局配置
Vue.http.options.emulateJson=true;http.options.emulateJson=true;
实现过度动画
animate.css
<transiton enter-active-class="animated bouncdIn"
leave-active-class="animated bounceOut">
</transition>
组件
<!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="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<login></login>
<mycomponent></mycomponent>
</div>
<template id='temp1'>
<h3>baba</h3>
</template>
<script>
Vue.component('mycomponent',{
template:'#temp1'
})
var vm=new Vue({
el:'#app',
data:{},
methods:{},
components:{
login:{
template:'<h1>私有组件</h1>'
}
}
});
</script>
</body>
</html>
组件名称使用了驼峰命名，则在引用组件时把大写改为小写，用’-'连接，如果不使用驼峰，则直接拿名称来使用即可。组件只有唯一的根元素组件可以有自己的data数据组件的data是一个方法且需要返回对象。实例的data为对象
组件切换
<!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="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- conponent是一个占位符， is用来指定要展示的组件的名称 -->
<component :is="comName"></component>
</div>
<script>
Vue.component('login',{
template:'<h3>login</h3>'
})
Vue.component('register',{
template:'<h3>register</h3>'
})
var vm=new Vue({
el:'#app',
data:{
comName:""
},
methods:{}
});
</script>
</body>
</html>
组件切换动画
<!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="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- conponent是一个占位符， is用来指定要展示的组件的名称 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<script>
Vue.component('login',{
template:'<h3>login</h3>'
})
Vue.component('register',{
template:'<h3>register</h3>'
})
var vm=new Vue({
el:'#app',
data:{
comName:""
},
methods:{}
});
</script>
</body>
</html>
