日常总结-vue2的基础理解

    文章目录​​​​

目录

    文章目录​​​​

前言

一、vue是什么？

二、vue的常见的指令   修饰符

        常见的指令

        修饰符

三、vue中的属性

四、vue的生命周期

五、vue中的组件以及组件传参

        1.父传子

     2.子传父

        3.兄弟组件的传值

总结

---

前言

            日常总结，以后当方便查询，忘了可以再看

---

一、vue是什么？

  vue是一套渐进式框架 （响应式）

二、vue的常见的指令   修饰符

        常见的指令

        v-if: 动态创建活着销毁动态元素dom元素 

        v-else: 搭配v-if使用

        v-show：渲染dom元素，再将其的style样式进行显示/隐藏元素

        v-model: 双向数据绑定 多搭配表单使用

        v-for: for循环 遍历数组和对象 并将其渲染出来 必须要绑定key值

        v-on:绑定一个事件 或者一个方法  简写为@click="事件名"

        v-bind:动态绑定一个属性或者多个属性 简写“  :属性名="属性" ”

        修饰符

        .stop: 阻值事件冒泡

        .capture: 事件捕获 

        .self: 点击事件本身时触发(子元素不会被触发)

        .pervent : 阻值默认事件

        .once : 只触发一次   

三、vue中的属性

         el属性 ：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

        data属性: 用于存放数据。

        template属性：用来设置模板，会替换页面元素。

        methods属性: 用于存放事件方法 ， 进行逻辑处理。

        computed属性：计算属性，且具有缓存值。

        watch属性: 监听对象的数据是否发生变化 

  watch: {
    dataName: {
       deep: true,         //是否开深度监听
      immediate: true,   // 是否立即监听
      handler(newVal, oldVal) {  // 有两个返回值 一个新值，一个旧值
      },
    },
  },

        components属性: 用于注册组件

四、vue的生命周期

        生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂载阶段，更新阶段，销毁阶段

分别有：

        创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数

        创建后：Created() 是最早使用data和methods中数据的钩子函

        挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树

        挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步

        更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

        更新后：Updated() 内存和页面都是新的

        销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

        销毁后：Destroyed() 已经销毁完毕

五、vue中的组件以及组件传参

        1.父传子

                在父组件中向子组件中绑定一个属性 并挂载相对应的数据，然后在子组件里使用props属性进行获取的值

                代码 父组件中

           

        

         在子组件中：有两种方法   第一种直接接受他的默数据类型，第二种则是自定义数据类型

                                

     2.子传父

            在父组件中给组件绑定一个事件 并挂载需要传递的事件，在子组件中使用this,$emit("传递的事件名称"，要传给父组件值)，

              父组件中

                 

                子组件中

               

        3.兄弟组件的传值

                在main.js中 在vue的原型链上创建一个$bus的全局变量 ，父组件可以通过this.$on("事件名称"，参数)，在子组件中使用this.$emit("事件名称"，需要上传的参数)

---

总结

        以上就是今天要讲的内容，本文仅仅简单介绍了vue的基础，