VueJS 的路由 Ajax 请求
2017-06-12 本文已影响0人
GodlinE
slot 组件
<div id="app">
<father>
<ul slot="ul">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
<ol slot="ol">
<li>我是ol</li>
<li>我是ol</li>
<li>我是ol</li>
<li>我是ol</li>
<li>我是ol</li>
</ol>
</father>
</div>
<template id="temp1">
<slot name="ul"></slot>
<h1>父组件</h1>
<slot name="ol"></slot>
<child msg="123"></child>
</template>
new Vue({
el:'#app',
data:{
imgName:'img.png'
},
components:{
father:{
data:function () {
return {
name:'123456'
}
},
template:'#temp1',
components:{
child:{
template:'<h1>{{msg}}</h1>',
props:['msg']
}
}
}
}
});
组件通信
- 在子组件中定义
this.$emit('notice',{name:'xmg'}) - 在使用组件时要监听
<gxq @notice='show'></gxq> - 在父组件当中定义 show 方法，并且会自动的把参数传递进去
<div id="app">
<gxq @notice="show"></gxq>
</div>
<template id="temp1">
<ul>
<li v-for="value in list">{{value}}</li>
</ul>
<button @click="say">say</button>
<h1>{{name}}</h1>
<child></child>
</template>
Vue.component('xmg',{
template:'<h1>我是组件</h1> <p>123</p>'
});
new Vue({
data:{
name:'xmg',
list:['js','html','css'],
url:'img.png'
},
methods:{
show:function (args) {
alert(args.name);
}
},
components:{ /*每一个组件都会有自己的作用域 隔离作用域*/
'gxq': {
data:function () {
return{
list:['js','html','css']
}
},
methods:{
say:function () {
/*调用父组件的方法*/
this.$emit('notice',{name:'xmg'})
}
},
props:['name'],
template:'#temp1',
components:{ //子组件只能在父组件的模板当中使用
'child':{
template:'<h1>我是子组件</h1>'
}
}
}
}
}).$mount('#app');
class
<div id="app">
<p :class="{red:isStyle}">{{name}}</p>
<button @click="isStyle=!isStyle">点击</button>
</div>
new Vue({
data:{
name:'xmg',
list:['js','html','css'],
url:'img.png',
isStyle:false
},
}).$mount('#app');
get 请求和 post 请求
- post 请求只需要添加
emulatJSON : true相当于设置请求头
new Vue({
el:'#app',
methods:{
/**
* get请求
*/
get:function () {
/*发送请求*/
var url = "get.php";
var params = {
name:"xmg123"
}
this.$http.get(url,params).then(function (res) {
console.log(res.data);
},function (error) {
console.log(error);
});
},
/**
* post请求
*/
post:function () {
var url = "post.php";
var params = {
name:"123"
}
var cofig = { /*添加emulateJSON 相当于设置请求头*/
emulateJSON:true
}
this.$http.post(url,params,cofig).then(function (res) {
console.log(res.data);
},function (error) {
console.log(error);
});
}
}
});
jsonp 请求
- 如果服务器所需要的
callback函数名不是默认的函数名可以通过设置var config={jsonp:'cb'}来重新配置请求函数名
new Vue({
el:'#app',
methods:{
/**
* 跨域请求
*/
jsonp:function () {
//var url = "https://sug.so.360.cn/suggest";
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
var params={
wd:'a'
};
var config = {
jsonp:'cb'
}
this.$http.jsonp(url,params,config).then(function (res) {
console.log(res.data);
},function (error) {
});
}
}
});
vue 的路由
<div id="app">
<div class="nav">
<ul>
<li><a v-link="{path:'/home'}">首页</a></li>
<li><a v-link="{path:'/music'}">音乐</a></li>
<li><a v-link="{path:'/singer'}">歌手</a></li>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
/*路由，要有一个根组件*/
var root = Vue.extend();
/*2.创建路由对象*/
var router = new VueRouter();
/*3.配置路由*/
router.map({
'/home':{
component:{
template:'<h1>首页</h1>'
}
},
'/music':{
component:{
template:'<h1>音乐</h1>'
}
},
'/singer':{
component:{
template:'<h1>歌手</h1>'
}
},
});
/*设置默认跳转*/
router.redirect({ //重定向
'/':'/home'
});
/*4.开启路由*/
router.start(root,'#app');
/*5.设置跳转 v-link="path:'/home'"*/
/*6.设置占位符*/
路由的嵌套
路由传参template:'<h1>首页</h1><p>{{$route.params.id}}</p>'
/*路由，要有一个根组件*/
var root = Vue.extend();
/*2.创建路由对象*/
var router = new VueRouter();
/*3.配置路由*/
router.map({
'/home/:id':{ //home/2/login
component:{
template:'#temp1'
},
subRoutes:{
'/login':{
component:{
template:"<h1>登录信息</h1>"
}
},
'/regist':{
component:{
template:"<h1>注册信息</h1>"
}
},
}
},
'/music/:id':{
component:{
template:'<h1>音乐</h1>'
}
},
'/singer/:id':{
component:{
template:'<h1>歌手</h1>'
}
},
});
/*设置默认跳转*/
router.redirect({ //重定向
'/':'/home/1/login'
});
/*4.开启路由*/
router.start(root,'#app');
/*5.设置跳转 v-link="path:'/home'"*/
/*6.设置占位符*/
