git搜索案例
<template>
<div>
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Users</h3>
<div>
<input
type="text"
placeholder="enter the name you search"
v-model="keyWord"
/>
<button @click="searchUser">Search</button>
</div>
</section>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Search",
data() {
return {
keyWord: "",
};
},
mounted() {},
methods: {
searchUser() {
this.$bus.$emit("updataListData",{
isFirst:false,isLoading:true,errMsg:'',users:[]
});
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
(response) => {
console.log("success", response.data.items);
// this.$bus.$emit("updataListData",response.data.items,false,false,'');
this.$bus.$emit("updataListData",{
isLoading:false,errMsg:'',users:response.data.items
});
// this.$bus.$emit("updataListData", response.data.items);
},
(error) => {
console.log("error", error.message);
// this.$bus.$emit("updataListData",[],false,false,error.message);
this.$bus.$emit("updataListData",{
isLoading:false,errMsg:error.message,users:[]
});
// this.$bus.$emit("errMsg", error.message);
}
);
},
},
};
</script>
<style lang="scss" scoped></style>
<template>
<div>
<div class="row">
<div
v-show="info.users.length"
class="card"
v-for="user in info.users"
:key="user.login"
>
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style="width: 100px" />
</a>
<p class="card-text">{{ user.login }}</p>
</div>
<h1 v-show="info.isFirst">huanying</h1>
<span v-show="info.isLoading">loading</span>
<p>{{ info.errMsg }}</p>
</div>
</div>
</template>
<script>
export default {
name: "List",
data() {
return {
info:{
users: [],
isFirst: true,
isLoading: false,
errMsg: "",
}
};
},
mounted() {
this.$bus.$on("updataListData", (dataObj) => {
// console.log("数据", users);
// this.users = users;
// this.isFirst = isFirst;
// this.isLoading = isLoading;
// this.errMsg = errMsg;
// this.users = dataObj.users;
// this.isFirst = dataObj.isFirst;
// this.isLoading = dataObj.isLoading;
// this.errMsg = dataObj.errMsg;
this.info={...this.info,...dataObj}
});
},
methods: {},
};
</script>
<style scoped>
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f7f7f7;
}
.card {
float: left;
width: 33.333%;
padding: 0.75rem;
margin-bottom: 2rem;
border: 1px solid #efefef;
text-align: center;
}
.card > img {
margin-bottom: 0.75rem;
border-radius: 100px;
}
.card-text {
font-size: 85%;
}
</style>
element-selected怎么获取选中的值
第一种方法时循环遍历找到,有点笨
html:
<el-form-item label="申请人类型" prop="applicantType">
<el-select v-model="formData.applicantType" placeholder="请选择申请人类型" style="width:100% !important;" @change="applicantTypes">
<el-option v-for="item in applicantTypeList" :key="item.id" :label="item.label" :value="item.id">
</el-option>
</el-select>
</el-form-item>
js:
applicantTypes(value){
this.applicantTypeList.forEach(item => {
if(item.id===value){
console.log(item)
this.form.applicantTypes = item.label
}
})
},
this.applicantTypeList.filter((item) => item.value == this.formData.applicantType)[0]["label"],
第二种是给el-select绑定一个ref,直接写this.$refs.绑定的名字.selected.label即可获取到值
<el-select v-model="dataForm.lesseeId" autocomplete clearable placeholder="请选择" :disabled="disabled" ref="selectCh"
filterable>
<el-option
v-for="item in LesseeList"
:key="item.id"
:label="item.lesseeName"
:value="item.id">
</el-option>
</el-select>
所需的值=this.$refs.selectCh.selected.label
默认插槽
父
<template>
<div class="container">
<Category title="foods">
<ul>
<li v-for="(f, index) in foods" :key="index">{{ f }}</li>
</ul>
</Category>
<Category title="games">
<p>1111</p>
</Category>
<Category title="files" />
<!-- <List/> -->
</div>
</template>
<script>
import axios from "axios";
import Category from "./components/Category.vue";
// import List from './components/List.vue';
export default {
name: "App",
components: { Category },
data() {
return {
foods: ["1", "2", "3"],
games: ["4", "5", "6"],
files: ["7", "8", "9"],
};
},
mounted() {
axios.get("http://loaclhost:8080/students").then(
(response) => {
console.log("success", response.data);
},
(error) => {
console.log("error", error.message);
}
);
// this.$refs.stu.$on('getN',this.getName)//第一个参数是传入的名字,第二个是调用的函数
// this.$refs.stu.$once('getN',this.getName)//只有第一次生效
},
methods: {
// getName(name){
// console.log('@@',name);
// }
},
};
</script>
<style scoped>
.container {
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
子
<template>
<div>
<h3>{{ title }}</h3>
<!-- 挖了个坑,等组件传东西来填 -->
<slot>没传东西的时候显示</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["listData", "title"],
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
具名插槽
父
<template>
<div class="container">
<Category title="foods">
<ul slot="mid">
<li v-for="(f, index) in foods" :key="index">{{ f }}</li>
</ul>
<ul slot="footer">
<li v-for="(f, index) in games" :key="index">{{ f }}</li>
</ul>
</Category>
<Category title="games">
<!-- <template slot="mid"> -->
<template v-slot:mid>
<p>1111</p>
<p>222</p>
</template>
</Category>
<Category title="files" />
<!-- <List/> -->
</div>
</template>
<script>
import axios from "axios";
import Category from "./components/Category.vue";
// import List from './components/List.vue';
export default {
name: "App",
components: { Category },
data() {
return {
foods: ["1", "2", "3"],
games: ["4", "5", "6"],
files: ["7", "8", "9"],
};
},
mounted() {
axios.get("http://loaclhost:8080/students").then(
(response) => {
console.log("success", response.data);
},
(error) => {
console.log("error", error.message);
}
);
// this.$refs.stu.$on('getN',this.getName)//第一个参数是传入的名字,第二个是调用的函数
// this.$refs.stu.$once('getN',this.getName)//只有第一次生效
},
methods: {
// getName(name){
// console.log('@@',name);
// }
},
};
</script>
<style scoped>
.container {
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
子
<template>
<div>
<h3>{{ title }}</h3>
<!-- 挖了个坑,等组件传东西来填 -->
<slot name="mid">没传东西的时候显示</slot>
<slot name="footer">没传东西的时候显示</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["listData", "title"],
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
插槽
作用 让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式 适用于 父组件->子组件
分类 默认插槽 具名插槽 作用域插槽
使用方式
默认插槽
父组件中
<Category>
<div>html结构</div>
</Category>
子组件中
<template>
<div>
<定义插槽>
<slot>插槽默认内容</slot>
</div>
</template>
具名插槽
父组件
<Category>
<template slot="center">
<div>html结构</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中
<template>
<div>
<!-- 定义插槽 -->
<slot name="center" >插槽默认内容...</slot>
<slot name="footer" >插槽默认内容...</slot>
</div>
</templat>
作用域插槽
a 理解 数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定(games数据在Catrgory组件中,但使用数据所遍历初开的结构由App组件决定)
b 具体编码
父组件中
<Category>
<template scope="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="g in scopeData.games" >{{g}}</li>
</ul>
</template>
<Category>
<Category>
<template>
<!-- 生成的是h4标题 -->
<h4 v-for="g in scopeData.games" :key='g' >{{g}}</h4>
</template>
</Category>
子组件中
<template>
<div>
<slot :game="games" ></slot>
</div>
</template>
<script>
<script>
export default{
name:'Category',
props:['title'],
data(){
return {
games:['1','2','3']
}
}
}
<script>
vuex是什么
专门在Vue中实现集中式状态(数据管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信)
什么时候使用VUex
多个组件依赖同一状态
来自不同组件的行为需要变更同一状态