学习Vue的小dome总结方法，看看就知道对初学者有用

父组件向子组件传递值

• 在父组件找到需要值的子组件 :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>