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'}) - 在使用組件時要監(jiān)聽
<gxq @notice='show'></gxq> - 在父組件當中定義 show 方法，并且會自動的把參數(shù)傳遞進去
<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 () {
/*發(fā)送請求*/
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函數(shù)名不是默認的函數(shù)名可以通過設置var config={jsonp:'cb'}來重新配置請求函數(shù)名
new Vue({
el:'#app',
methods:{
/**
* 跨域請求
*/
jsonp:function () {
//var url = "https://sug.so.#/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.創(chuàng)建路由對象*/
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.創(chuàng)建路由對象*/
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.設置占位符*/
