Vue知识点整理

    vm$el 属性, 取值是一个DOM元素,vue实例初始化时会根据构造函数传入option对象中的el字段,查找对应的DOM标签,赋值给$el.
    vm._data属性,取值是一个对象, 对象的属性与option对象中的data字段下属性保持一致: 
    这些数据属性会通过object.defineProperty方法以存取描述符 (set\get) 的方式添加到_data中.
    也就意味着,赋值会调用set方法,取值的时候会调用get方法.
    可以通过vm._data.属性名称的方式访问这些属性:
    也可以直接通过vm.属性名称的方式访问这些属性,与vm._data.属性名称等价.
    vue的数据更新是响应式的(reactive);
    响应式: 数据变化了,页面会自动更新. 依赖于数据是通过object.defineProperty方法以存取描述符 (set\get) 的方式添加的
    
    
      
      
      
      
      
      
      
      
    
    AI写代码

    vue中对常用的属性, class\style的绑定做了扩展
        class:
           字符串;例如  "red big"
           数组: 例如  ["red", "big"]
           对象: 例如 {red:true,big:false} 取值true,说明有这个class,反之false
        style:
           字符串: 例如 "width:100px;height:100px;background-color:red;"
           对象: 例如 {width:100px,height:100px,backgroundColor:red}
           数组: 例如 [
                        {
                            width:100px,height:100px,
                        },
                        {
                            backgroundColor:red
                        }
                     ]
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

    双向绑定:
                数据->视图: 数据变化,视图更新; 
                视图->数据: 试图变化, 数据更新;
    
            双向绑定简写为v-model;v-model是双向绑定的语法糖;
                input\textarea
                v-bind:value 属性绑定 实现数据变化,视图更新;
                v-on input 事件监听, 实现试图变化,数据更新;
                radio\checked
                v-bind:checked
                v-on:change
                select-option
                v-bind:selected
                v-on :change
            双向绑定的事件修饰符
                number : 将输入内容转化为数字
                trim : 裁剪;将输入开头结尾的空格删除
                lazy : 懒 ; 将input事件监听换成change; 
    
                input:输入字符时触发;
                change:输入变化并失去焦点时触发;
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

    filter:过滤器; 进行数据格式化;
        filter实际就是函数;
        可以在{{}} 以及 v-bind 中使用过滤器.例如{{oldValue | 过滤器名称}} , {{oldValue | 过滤器名称(第二个参数,第三个是参数....)}}
        过滤器函数的参数:
            para1:| 前面的变量;
        过滤器支持串联;  例如{{oldValue | 过滤器1 | 过滤器2 | 过滤器3 ...}}
        执行第一个过滤器,得到返回值,将返回值作为参数传入第二个过滤器
    
    
      
      
      
      
      
      
      
    
    AI写代码

    filters:{
                capitalize:function(value,count){
                    return value.toFixed(count)
                },
                dateFormate(time){
                    const times = new Date(time);
                    const year = times.getFullYear()
                    const mouth = times.getMonth()+1
                    const day = times.getDate()
                    const hour = times.getHours()
                    const minute = times.getMinutes()
                    const secound = times.getSeconds()
                    console.log(times);
                    return year +"-"+mouth+"-"+day+","+hour+":"+minute+":"+secound
                },
                Dada(value){
                    return value.toUpperCase();
                },
                rugao(value){
                    return value.split("").reverse().join("")
                }
    
            }
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

     beforeCreate():创建前;这时,this_data为undefined,这个钩子在数据观测(dataobserver)和event/watcher 事件配置
    之前被调用
    
     created():实例已经创建完成之后被调用.这时,this._data有值,在这一步,实例已完成以下的配置;数据观测(data observer),
     属性和方法的运算, watch/event 事件回调.然而,挂载阶段还没开始,$el 属性目前不可见
    
     beforeMount():(载入前) 在挂载开始之前被调用,相关的render函数首次被调用.实例已完成以下配置:编译模板,把data里面的
     数据和模板生成html 注意此时还没有挂载html页面上,this.$el为undefined.
    
     mouthed():(载入后 )在el被创建的 vm.$el 替换,并挂载到实例上去之后调用,实例已完成以下的配置;用上面编译好的html内容替换
     el属性指向的DOM对象,完成模板中的html渲染到html页面中,this.$el有值.
    
     beforeUpdate()(更新前) 在数据更新之前调用,发生在虚拟dom重新渲染和打补丁之前.可以在该钩子中进一步更改状态,不会触发附加
     的重渲染过程
    
     updated():(更新后)  在由于数据更改导致的虚拟dom重新渲染,和打补丁之后调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的
     操作.然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环.该钩子在服务器渲染期间不被调用.
    
     beforeDestory():(销毁前)  在实例销毁之前调用.实例仍然完全可用.
    
     destory():(销毁后)  在实例销毁之后调用.调用后,所有的事件监听器会被移除,所有的子实例也会被销毁.该钩子在服务器渲染期间不被调用.
    
     activated():被激活,在keep-alive 组件激活时调用.服务器端渲染期间不调用该生命周期.组件包裹keep-alive进行重用时,create\mount只会
     调用一次,之后每次出现会调用activated方法.
    
     deactivated(): 在keep-alive 组件失活时调用.
    
     errorCaptured():当捕获一个来自子孙组件的错误时被调用.此钩子会收到三个参数:错误对象,发生错误的组件实例以及一个包含错误来源信息的
     字符串.此钩子可以返回 false 以阻止该错误继续向上传播.
    
     常见操作:
     created:发送请求,获取数据
     mounted:操作DOM
     destroyed:进行清空操作,例如销毁定时器
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

    beforeCreate(){
        console.log("创建前");
        console.log(this.$el);
        console.log(this._data);
    },
    created(){
        console.log("创建后");
        console.log(this.$el);
        console.log(this._data);
    },
    beforeMount(){
        console.log("挂载前");
        console.log(this.$el);
        console.log(this._data);
    },
    mounted(){
        console.log("挂载后");
        console.log(this.$el);
        console.log(this._data);
    },
    beforeUpdate(){
        console.log("更新前");
        console.log(this.$el);
        console.log(this._data);
    },
    updated(){
        console.log("更新后");
        console.log(this.$el);
        console.log(this._data);
    },
    beforeDestroy(){
        console.log("销毁前");
        console.log(this.$el);
        console.log(this._data);
    },
    destroyed(){
        console.log("销毁后");
        console.log(this.$el);
        console.log(this._data);
    },
    activated(){
        console.log("活跃的");
    },
    deactivated(){
        console.log("不活跃");
    },
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

6版本新增v-slot指令
     可以采用v-slot指令说明标签放在哪个slot位置，指令的参数就是对应slot的名称；
     注意： v-slot指令只能在tenplate上使用
     slot标签中可以设置该slot的默认值，当不插入内容时，采用默认值。
     父级模板的所有内容都是在父级作用域中编译的（默认只能使用父级组件的数据）；
     子模板里的所有内容都是在子作用域中编译的（默认只能使用子组件的数据）。
     如何在待插入的标签中使用子组件的数据？作用域插槽.
     在子组件中,slot的开始标签上自定义属性的方式传递数据;
     在父组件中,slot对应的template中,v-slot指令的值就是接收到的数据对象.
     v-slot指令的值  支持解构赋值
     let {nickname:petname,age} = {nickname:"nextson",age:25}
     v-slot: 可以简写为#
    
    
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

6版本之前,  作用域插槽 采用 slot-scope属性实现.
    <next-son>
       <template slot="top" slot-scope="props">
         <p>{{props}}</p>
         <p>{{props.nickname}}</p>
         <strong>强壮的{{nickname}}</strong>
       </template>
        <template v-slot:bottom>
          <small>小的</small>
        </template>
     </next-son>
    
    
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码