在b站听《辛巴的2020年Vue全套教程》想着听完课记录一下学习笔记方便自己复习~

生命周期

最主要知道两点

• 什么时候有什么
• 什么时候干什么
  具体看如下的console

<script>
        Vue.config.devtools = false
        Vue.config.productionTip = false

        //data是方法 return 对象
        let vm = new Vue({
            el: "#app",
            template:"<h1>sss</h1>",
            data() {
                return {
                    nickname: 'neal',
                }
            },
            methods: {
               
            },
            beforeCreate() {
                //没啥用
                //this.$data  ==>  undefined
                //this.$el    ==>  undefined
                console.log("beforeCreate",this.$data,this.$el);
            },
            created() {
                //重要，处理ajax请求
                //this.$data  ==>  有值了
                //this.$el    ==>  undefined
                console.log("created",this.$data,this.$el);
            },
            beforeMount() {
                //没啥用
                //this.$data  ==>  有值了
                //this.$el    ==>  html 但是没有渲染值
                console.log("beforeMount",this.$data,this.$el);
            },
            mounted() {
                //重要，dom 渲染好了，可以加载插件 比如 echart 渲染表格 swiper 渲染轮播图
                //this.$data  ==>  有值了
                //this.$el    ==>  html 渲染值了 如果是有template 渲染template
                console.log("befomountedreCreate",this.$data,this.$el);
            },
            beforeUpdate() {
                //没啥用
            },
            updated() {
                //没啥用
            },
            beforeDestroy() {
                //没啥用
            },
            destroyed() {
                //没啥用
            },
        })
    </script>

总结就是：created() 有data ， mounted() 有dom
created() 适合去处理ajax请求 ， mounted() 适合去处理加载组件插件渲染

v-if v-show

v-show 就是设置display显示 常用index 点击切换或者延时切换

<ul class="demo">
            <li  v-show="i===activeIndex" :style="{backgroundColor:item}" v-for="(item,i) in imgList">
                {{item}}
            </li>
        </ul>

搭配生命周期函数，实现轮播图

mounted() {
                setInterval(()=>{

                    // var b = a++;['先把a的值赋值给b，a在自+1']
                    // var b = ++a;['a先自+1，再赋值给b']
                    
                    if(++this.activeIndex == this.imgList.length){
                        this.activeIndex = 0
                    }
                },2000)
            }