父组件向子组件传递值
- 在父组件找到需要值的子组件 :today="today"
<template>
<div class="home">
<Header :today="today"></Header>
<List></List>
<Footer></Footer>
</div>
</template>
<script>
// @ is an alias to /src
import Header from "../components/header";
import List from "../components/list";
import Footer from "../components/footer";
export default {
name: "Home",
data() {
return {
today:this.getNow()
}
},
components: {
Header,
List,
Footer,
},
methods: {
getNow() {
// 获取现在的时间
const date = new Date();
return date.getMonth() + 1 + "/" + date.getDate();
},
},
};
</script>
- 子组件通过props接收父组件传过来的值
<template>
<header>
<h3>历史上的今天:{{today}}</h3>
</header>
</template>
<script>
export default {
props:{
// 属性验证
today:String
}
}
</script>
子传父组件
- 子组件发送值需自定义事件
this.$emit(‘child-event’,this.month+’/’+this.day)
<template>
<footer>
<div>
<input type="number" placeholder="月" class="date" v-model="month" />
</div>
<div>
<input type="number" placeholder="日" class="date" v-model="day" />
</div>
<div>
<input type="button" value="查询" @click="getDate" name="" id="" />
</div>
</footer>
</template>
<script>
export default {
data() {
return {
month: "",
day: "",
};
},
methods: {
getDate() {
this.$emit('child-event',this.month+'/'+this.day)
},
},
};
</script>
- 父组件获取值:在传值过来的子组件定义上自定义事件@child-event =“getFdate”,通过接收参数的函数getFdate(today){ this.today=today; }
<template>
<div class="home">
<Header :today="today"></Header>
<List></List>
<Footer @child-event="getFdate"></Footer>
</div>
</template>
<script>
// @ is an alias to /src
import Header from "../components/header";
import List from "../components/list";
import Footer from "../components/footer";
export default {
name: "Home",
data() {
return {
today:this.getNow()
}
},
components: {
Header,
List,
Footer,
},
methods: {
getNow() {
// 获取现在的时间
const date = new Date();
return date.getMonth() + 1 + "/" + date.getDate();
},
// 获取子组件自定义事件传过来的日期
getFdate(today){
// 判断不为空的情况下
if(today!=='/'){
this.today=today;
}else{
this.today=this.getNow();
}
}
},
};
</script>
子传父事件传递
<div id="app">
<navbutton @shows="getshow"></navbutton>
<child v-show="ishow"></child>
</div>
<script>
Vue.component('child', {
template: `<div>
<ul>
<li>123</li>
<li>456</li>
<li>789</li
</ul>
</div>`,
})
Vue.component('navbutton', {
template: `<div>
<button @click="test">navclick</button></div>`,
methods: {
test() {
this.$emit('shows');
}
},
})
var app = new Vue({
el: '#app',
data:{
ishow:true
},
methods: {
getshow() {
console.log("执行到了");
this.ishow = !this.ishow;
}
},
})
</script>
数组列表过滤
菜鸟式写法
<div id="app">
<input type="text" name="" id="" @keydown.13="cx" v-model="value">
<ul>
<li v-show="flag" v-for="item in arr">{{item}}</li>
<li v-show="isShow" v-for="item in showList">{{item}}</li>
<li v-show="isZip">查询无结果</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
arr: ['abb', 'eee', 'dss', 'wer', 'xcvdfg', 'dsf', 'aa', 'echo'],
value: '',
showList: [],
flag: true,
isShow: false,
isZip: false
}
},
methods: {
cx() {
var list = [];
var _this = this;
this.showList=[];
for (var i = 0; i < this.arr.length; i++) {
var f = this.arr[i].substring(0, 1);
if (ishan(f)) {
list.push({ frist: f, list: [this.arr[i]] });
} else {
for (var j = 0; j < list.length; j++) {
if (list[j].frist === f) {
list[j].list.push(_this.arr[i]);
}
}
}
}
function ishan(arrs) {
for (var i = 0; i < list.length; i++) {
if (list[i].frist === f) {
return false;
}
}
return true;
}
for (var i = 0; i < list.length; i++) {
if (this.value === list[i].frist) {
this.flag = false;
this.isZip = false;
this.isShow = true;
this.showList = list[i].list;
}
}
console.log();
if (this.showList.length === 0) {
this.flag = false;
this.isShow = false;
this.isZip = true;
}
}
},
})
</script>
教学式写法
<div id="app">
<input type="text" name="" id="" @keydown.13="cx" @input="cx" v-model="value">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
arr: ['abb', 'eee', 'dss', 'wer', 'xcvdfg', 'dsf', 'aa', 'echo'],
arrList: ['abb', 'eee', 'dss', 'wer', 'xcvdfg', 'dsf', 'aa', 'echo'],
value: '',
}
},
methods: {
cx() {
//用到了数组中过滤filter和包含indexOf
var newList=this.arrList.filter(item=>{
return item.indexOf(this.value)>-1;
})
this.arr=newList;
}
},
})
</script>
事件、按键、表单修饰符
<div id="app">
<!-- 只针对自己点击的dom触发 -->
<ul @click.self="ulChu">
<!-- 阻止冒泡 -->
<li @click.stop="liChu">123</li>
<li @click="liChu">345</li>
<!-- 事件只触发一次 -->
<li @click.once="liChu">678</li>
</ul>
<!-- 阻止默认行为 -->
<a href="www.baidu.com" @click.prevent="hah">跳转</a>
<!-- 按键修饰符 -->
<input type="text" name="" @keydown.13="khc" id="">
<input type="text" name="" @keydown.enter="khc" id="">
<!-- 表单修饰符 -->
<!-- 失去焦点是才返回数据 -->
<input type="text" name="" v-model.lazy="text" id="">{{text}}
<!-- 与type='number' 差太多 -->
<input type="text" name="" v-model.number="num" id="">{{num}}
<!-- 去除首尾的空格 -->
<input type="text" name="" v-model.trim="str" id="">{{str}}
</div>
<script>
new Vue({
el:'#app',
data() {
return {
text:'',
num:'',
str:''
}
},
methods: {
ulChu(){
console.log("ul click");
},
liChu(){
console.log("li click");
},
hah(){
console.log("阻止了默认事件");
},
khc(){
console.log("按键修饰符")
}
},
})
</script>
购物车双向数据绑定
<div id="app">
<input v-model="isAll" type="checkbox" @change="handleChange" name="" id="">
<ul>
<li v-for="(item, index) in dataList" :key="index">
<input type="checkbox" name="" id="" v-model="cArr" :value="item" @change="handleLiChange ">
{{item}}
<button @click="del(item)">del</button>
{{item.number}}
<button @click="item.number++">add</button>
</li>
</ul>
<p>{{cArr}}</p>
<p>总金额计算:{{getNum()}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.0.5/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data() {
return {
count: 0,
cArr: [],
isAll: false,
dataList: [{
name: "商品1",
price: 10,
number: 1,
id: '1'
},
{
name: "商品2",
price: 20,
number: 2,
id: '2'
},
{
name: "商品3",
price: 30,
number: 3,
id: '3'
}
]
}
},
methods: {
getNum() {
// 函数计算中的状态改 变后,函数会自动执行一遍
var sum = 0;
for (var i in this.cArr) {
sum += this.cArr[i].number * this.cArr[i].price;
}
return sum;
},
handleChange() {
if (this.isAll == true) {
this.cArr = this.dataList;
} else {
this.cArr = [];
}
},
handleLiChange() {
if (this.cArr.length === this.dataList.length) {
this.isAll = true;
this.cArr = this.dataList;
} else {
this.isAll = false;
}
// switch (this.cArr.length) {
// case 3:
// this.isAll = true;
// this.cArr = this.dataList;
// break;
// default:
// this.isAll = false;
// break;
// }
},
del(item) {
if (item.number == 1) {
item.number = 1;
} else {
item.number--;
}
}
},
// watch: {
// isAll(val) {
// if (val == true) {
// console.log(this.cArr.length);
// } else {
// }
// }
// },
})
</script>
组件间非父子通信
<div id="app">
<wxzuozhe></wxzuozhe>
<wxuser></wxuser>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.0.5/vue.js"></script>
<script>
var Odivs=new Vue();
Vue.component('wxzuozhe',{
template:`
<div>
<input type='text' ref='mytex'/>
<input type='button' @click="fb" value='发布'/>
</div>
`,
methods: {
fb(){
Odivs.$emit("wxmassage",this.$refs.mytex.value);
}
},
})
Vue.component('wxuser',{
template:`
<div>
用户:
<input type='text'/>
</div>
`,
mounted() {
// 合适的位置先订阅好 Odivs.$on
Odivs.$on('wxmassage',(data)=>{
console.log('收到推送',data);
})
},
})
var app=new Vue({
el:'#app',
})
</script>
动态组件
component元素,动态地绑定多个组件到它的is属性
keep-alive保留状态,避免重新渲染
slot:插槽(内容分发)具名插槽(有名字的插槽)
- 混合父组件的内容与子组件自己的模板–>内容分发
- 父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译
swiper轮播
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.0.5/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.2.1/css/swiper.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.2.1/js/swiper.js"></script>
<style>
.swiper-container{
width: 100px;
height: 60px;
}
</style>
</head>
<body>
<div id="app">
<swiper :key="dataList.length">
<div class="swiper-slide" v-for="data in dataList">
{{data}}
</div>
</swiper>
</div>
<script>
Vue.component('swiper',{
template:`
<div class="swiper-container a">
<div class="swiper-wrapper">
<slot></slot>
</div>
<div class="swiper-pagination"></div>
</div>
`,
mounted() {
new Swiper('.a',{
loop:true,
pagination:{
el:'.swiper-pagination'
}
})
},
})
var app=new Vue({
el:'#app',
data() {
return {
dataList:[],
}
},
mounted() {
setTimeout(()=>{
this.dataList=['11111','22222','33333'];
},2000)
},
})
</script>
封装指令轮播
<div id="app">
<div class="swiper-container a">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(data,index) in dataList" v-swiper="{
index:index,
list:dataList.length
}">
{{data}}
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
dataList: [],
}
},
mounted() {
setTimeout(() => {
this.dataList = ['11111', '22222', '33333'];
}, 2000)
},
});
Vue.directive('swiper', {
inserted(el, bind) {
console.log(bind);
if (bind.value.index === bind.value.list - 1) {
new Swiper('.a', {
loop: true,
pagination: {
el: '.swiper-pagination'
}
})
}
}
})
</script>