zoukankan      html  css  js  c++  java
  • vue总结2

    1. 给router-link添加事件

       之前用v-link 现在用 router-link 添加事件要用原生的.native修饰v-on

    <my-component v-on:click.native="doTheThing"></my-component>
    

    2.$on 与 $emit

    3. 跳过css检测 v-bind:css="false"

    4. key值绑定实现数据变化重新渲染整个元素  场景:比如父组件控制子组件重新渲染

    5. ref标记组件

    6.render函数

        createElement接受三个参数:

    • {String | Object | Function}即一个HTML标签 | 组件选项 | 一个函数,必须返回上述其中一个

    • {Object}一个对应HTML标签属性的数据对象(可选)

    • {String | Array}子节点(VNode)(可选)

    • {
        // 和`v-bind:class`一样的 API
        'class': {
          foo: true,
          bar: false
        },
        // 和`v-bind:style`一样的 API
        style: {
          color: 'red',
          fontSize: '14px'
        },
        // 正常的 HTML 特性
        attrs: {
          id: 'foo'
        },
        // 组件 props
        props: {
          myProp: 'bar'
        },
        // DOM 属性
        domProps: {
          innerHTML: 'baz'
        },
        // 事件监听器基于 "on"
        // 所以不再支持如 v-on:keyup.enter 修饰器
        // 需要手动匹配 keyCode。
        on: {
          click: this.clickHandler
        },
        // 仅对于组件,用于监听原生事件,而不是组件使用 vm.$emit 触发的事件。
        nativeOn: {
          click: this.nativeClickHandler
        },
        // 自定义指令. 注意事项:不能对绑定的旧值设值
        // Vue 会为您持续追踨
        directives: [
          {
            name: 'my-custom-directive',
            value: '2'
            expression: '1 + 1',
            arg: 'foo',
            modifiers: {
              bar: true
            }
          }
        ],
        // Scoped slots in the form of
        // { name: props => VNode | Array<VNode> }
        scopedSlots: {
          default: props => h('span', props.text)
        },
        // 如果子组件有定义 slot 的名称
        slot: 'name-of-slot'
        // 其他特殊顶层属性
        key: 'myKey',
        ref: 'myRef'
      }
  • 相关阅读:
    css盒子模型之内边距padding及简写
    css盒子模型之宽度和高度
    windows 组策略
    windows 快捷键
    cmd 命令快捷键
    django 远程访问
    django 部署在 apache2 上面
    国内常用开源镜像站
    ubuntu1804自带官方源
    ubuntu1604 apt华为国内源
  • 原文地址:https://www.cnblogs.com/moneyss/p/8656102.html
Copyright © 2011-2022 走看看