slot 组件
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
- 我是ol
- 我是ol
- 我是ol
- 我是ol
- 我是ol
父组件
{{msg}}
',
props:['msg']
}
}
}
}
});
组件通信
- 在子组件中定义
this.$emit('notice',{name:'xmg'}) - 在使用组件时要监听
- 在父组件当中定义 show 方法，并且会自动的把参数传递进去
- {{value}}
{{name}}
我是组件
123
'
});
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:'我是子组件
'
}
}
}
}
}).$mount('#app');
class
{{name}}
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 的路由
首页
'
}
},
'/music':{
component:{
template:'音乐
'
}
},
'/singer':{
component:{
template:'歌手
'
}
},
});
/*设置默认跳转*/
router.redirect({ //重定向
'/':'/home'
});
/*4.开启路由*/
router.start(root,'#app');
/*5.设置跳转 v-link="path:'/home'"*/
/*6.设置占位符*/
路由的嵌套
路由传参 {{$route.params.id}}template:'首页
/*路由，要有一个根组件*/
var root = Vue.extend();
/*2.创建路由对象*/
var router = new VueRouter();
/*3.配置路由*/
router.map({
'/home/:id':{ //home/2/login
component:{
template:'#temp1'
},
subRoutes:{
'/login':{
component:{
template:"登录信息
"
}
},
'/regist':{
component:{
template:"注册信息
"
}
},
}
},
'/music/:id':{
component:{
template:'音乐
'
}
},
'/singer/:id':{
component:{
template:'歌手
'
}
},
});
/*设置默认跳转*/
router.redirect({ //重定向
'/':'/home/1/login'
});
/*4.开启路由*/
router.start(root,'#app');
/*5.设置跳转 v-link="path:'/home'"*/
/*6.设置占位符*/