• vue·01概念


    .vue生命周期
    #create:实例尚未挂载
    #mounted:实例挂载后
    #beforeDestroy:实例销毁之前
    .过滤器filters
      表达式:"|",可以串联使用、可以接收参数
      方法名:filters
      使用场景:字母全部大写、货币千分位逗号分隔、时间格式化...
      实例:

    var app = new Vue({
        el:'#xxx',
        data:{date: new Date()},
        filters:function(date){
            return date.getFullYear();
        }
    });

    .指令 用于操作dom

    #v-if/v-html/v-pre/v-bind:href/v-bind:src/v-on:click/v-on:keyup

    .语法糖
    #v-bind 简写为 :src
    #v-on 简写为 @click

    .计算属性 computed
      解决复杂表达式臃肿问题
      内置set、get方法
      依赖缓存(当依赖的数据发生变化时重新计算)
      区别methods:不依赖缓存(重新渲染就会调用)
    .key属性可以使页面dom不被复用
    #vue出于对效率的考虑会尽可能复用已有元素

    .v-if与v-show
    #v-if在条件为真时才开始渲染
    #v-show不区分条件真假都会渲染 

    .v-model
    #.lazy:失去焦点或回车时触发数据更新
    #.number:数据类型为number,默认类型是string
    #.trim

    .虚拟dom,render函数,createElement参数

    render:function(createElement){
        return createElement(
            'div',--类型{String|Object|function};标签/组件/函数
            {
                class:{},
                style:{},
                attrs:{},    --正常dom属性?
                props:{},    --组件属性
                domProps:{},--dom属性?
                on:{},
                nativeOn:{},--监听原生事件
                directives:[{}],--自定义指令
                scopedSlots:{},--作用域
                slot:'',
                key:'',
                ref:''
              },    --
              'text'--类型{String|array};可空;子节点,可支持一个或多个,
                  如'hello'、'<div>...</div>'、嵌套虚拟节点createElement(...)
        )
    }


    注意:通过content传递对象

    .jsx:解决虚拟节点难以阅读的问题
     #语法类似html,其实是javascript
     
     
     

    ----------以下是备注内容----------

    .v-bind

    #修饰符:
            .prop - 被用于绑定 DOM 属性。
            .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase.
            .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
    #用法:
            动态地绑定一个或多个特性,或一个组件 prop 到表达式。
            在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。
            在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
            没有参数时,可以绑定到一个包含键值对的对象。
            注意此时 class 和 style 绑定不支持数组和对象。

    .v-on

    #参数:event
    #修饰符:
            .stop - 调用 event.stopPropagation()。
            .prevent - 调用 event.preventDefault()。
            .capture - 添加事件侦听器时使用 capture 模式。
            .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
            .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
            .native - 监听组件根元素的原生事件。
            .once - 只触发一次回调。
            .left - (2.2.0) 只当点击鼠标左键时触发。
            .right - (2.2.0) 只当点击鼠标右键时触发。
            .middle - (2.2.0) 只当点击鼠标中键时触发。
            .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
    #用法:
            绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,
        如果没有修饰符也可以省略。
            从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。
        注意当使用对象语法时,是不支持任何修饰器的。
            用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,
        也可以监听子组件触发的自定义事件。
            在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,
        语句可以访问一个 $event 属性:v-on:click="handle('ok', $event)"。

    【完】

  • 相关阅读:
    Codeforces 166E. Tetrahedron
    Codeforce 687A. NP-Hard Problem
    Codeforces 570C. Replacement
    Codeforces 554B. Ohana Cleans Up
    Codeforces 482A. Diverse Permutation
    Codeforces 431C. k-Tree
    Codeforces 750B. Spider Man
    Codeforces 463A. Caisa and Sugar
    Codeforces 701B. Cells Not Under Attack
    Codeforces 445A. DZY Loves Chessboard
  • 原文地址:https://www.cnblogs.com/duduchong/p/9071762.html
Copyright © 2020-2023  润新知