Vue学习第五天

v-开头有指令的含义

vue组件

vue子组件的文件默认是全局生效的：

①单页面应用中，所以组件的DOM元素，都是基于唯一一个index.html呈现

②每个组件的样式，能够影响整个html中的元素

那么在这种环境下，容易发生样式冲突。

scoped和deep

①如果在组件中style加上scoped,会自动给组件所有元素添加data-v-xxx的属性，防止属性之间样式冲突。

②如果使用scoped，想要在子元素中添加样式，则会出现类似: p[data-v-xxx]，有效的做法应该是

[data-v-xxx] p。因此，我们需要在样式中添加deep。

 /deep/.pp {

        color: red;

        font-size: 20px;

        padding: 20px;

    }

 vue模板编译器

浏览器识别不了vue文件，vue模板编译器vue-template-compiler帮vue文件编译成js。

组件的生命周期

组件在定义的时候是一个模板结构，我们将他标签引用的时候会立即创建一个它的实例。

 组件的生命周期是一个创建-运行-销毁的阶段，强调的是一个时间段。生命周期函数由vue内置函数提供，会伴随着生命周期，自动执行。

 

① 最早完成渲染data props methods的阶段是created，这个时候发起数据的请求。

② 最早完成把HTML结构渲染到浏览器是mounted阶段。

③ 组件创建阶段结束就会进入到组件运行阶段

④ updated和beforeupdate阶段与之前不同，数据改变的时候才会执行。执行次数0-n次

数据传递

父组件向子组件传递数据，使用自定义属性。

子组件向父组件传递数据，使用自定义事件。

兄弟组件传递数据，需要用到eventbus。

EventBus使用步骤：

① 创建eventBus.js模块，并且向外共享一个实例对象。

② 在数据的发送方，调用bus(eventbus向外共享的实例对象).$emit('事件名称' ,'要发送的数据')方法触发自定义事件。

③ 在数据的接受方，调用bus.$on('事件名称', '事件处理函数')方法注册一个自定义事件。

EventBus.js文件

import Vue from 'vue'

export default new Vue()

Left.vue文件

<script>

import bus from './EventBus'

export default {

    data() {

        return {

            msg: '人生分两半，一般在上帝手中，那是宿命；一般在自己手中，那是拼命'

        }

    },

    methods: {

        clickEvt() {

            bus.$emit("strEvt", this.msg)

        }

    }

}

</script>

Right.vue文件

<script>

import bus from './EventBus'

export default {

    data() {

        return {

            count: 0,

            msg: ''

        }

    },

    methods: {

        addCount() {

             this.count ++;

             this.$emit("countEvt", this.count)

        }

    },

// 在create中注册事件，这个时候组件的data已经创建好了

    created() {

        bus.$on('strEvt', (val)=> {

            this.msg = val

        })

    }

}

</script>

 为什么不用this，因为left.vue和right.vue里面的this指向不同的实例。操作不是同一个实例。

 ref获取DOM元素

vue优势：mvvm，程序员不需要操作dom，只需要维护数据。所以不建议操作dom。
如果不操作dom，但是想要拿到dom的引用。可以使用vue组件中的ref

 

给需要获取dom元素ref属性赋值，然后通过this.$refs.xxx获取dom元素。

<p ref="abb">{{ count }}</p>

 abcon() {

        // 改变dom元素样式

      this.$refs.abb.style.color="red"

      console.log(this.$refs.abb)

    }

 

 如果ref属性同名，则会被最后的覆盖。ref也可以拿到子组件的实例。

 $nextTick

组建的this.$nextTick(cb)方法，会把cb延迟到dom更新周期之后执行。通俗理解，等组建的dom全部更新完毕在执行回调函数，为了保证函数能操作最新的dom元素。

复习数组

①

foreach 性能比较差，一旦开始无法在中间被停止；

some 再找到所选的项之后，可以通过return true固定语法，来终止循环。

arr.some((item, index) => {

        if (item == '121') {

              return true;

        }

})                

② every循环

只要全部的值为true，则返回true，任意一项为false，则返回false

const res = arr.every(item=>item.status)

 ③ reduce累加器

arr.filter(a=>a.status).reduce((‘累加的结果’，‘当前循环值’) => {},初始值)

const res = arr.filter(a=>a.status).reduce((awt ,item) => awt += item.x , 0)