Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

news/2024/7/24 12:01:14 标签: render

vue中的render函数,我在网上找了很多,下面这一篇文章最详细

https://blog.csdn.net/kkae8643150/article/details/52910389/

 

{
  // 和`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
      }
    }
  ],
  // 如果子组件有定义 slot 的名称
  slot: 'name-of-slot'
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

 


http://www.niftyadmin.cn/n/951620.html

相关文章

用vue-cli+iview实现的项目总结——Menu系列问题总结(悦读奇缘平台管理)

1、Menu 导航菜单: 问题1: 当屏幕小的时候,如果我们选择的主题是dark或者是primary,那掉下来的文字会看不到 如下图官网示例: 正常情况下: 当屏幕缩小的时候: 此时统计分析和综合设置就找不…

使用wangEditor富文本编辑器遇到的问题总结

怎么使用和安装我就不详细说了,文档写得很清楚,https://www.kancloud.cn/wangfupeng/wangeditor3/332599 1、当屏幕缩时,富文本编辑器的选项会被隐藏,如下图官网的demo:当屏幕变小时,菜单选项就超出了富文…

js将日期格式转化为YYYY-MM-DD HH:MM:SS

一、js将日期格式转化为YYYY-MM-DD HH:MM:SS Date.prototype.Format function (fmt) { var o {"M": this.getMonth() 1, //月份 "d": this.getDate(), //日 "h": this.getHours(), //小时 "m": this.getMinutes(), //分 "s&…

vue-cli+iview打包后iview自带的字体图标找不到的解决办法

使用iview做项目的时候,打包上传到服务器后,iview中自带的字体图标显示不出来,百度了很多方法,下面的方法可靠哦 更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置: 添加 publicPath: ../../, 完美…

使用vue+iview Form组件 按enter键阻止页面刷新

如果我们在Form组件中嵌套使用Input组件的时候&#xff0c;会有一个小问题&#xff0c;如果我们在一个Form组件中只使用了一个Input组件&#xff0c;当该Input组件获取焦点的时候&#xff0c;我们按enter键&#xff0c;整个页面会刷新 解决办法&#xff1a; 方法一、 <For…

vue怎么实现不同组件间(非父子组件间的通信),一个变化,另一个实时变化的效果

vue中&#xff0c;只有组件内的值&#xff0c;发生了变化&#xff0c;组件才会重新渲染&#xff0c;那我们怎么实现&#xff0c;两个不同组件&#xff0c;一个组件内的值发生变化&#xff0c;另一个组件也随之变化&#xff0c;比较常用的场景就是下面的例子了&#xff1a; 头部…

iview中table排序

看到一篇比较好的文章&#xff0c;分享出来&#xff1a;https://blog.csdn.net/qmzmzxk/article/details/81748422 官网也写得很清楚&#xff1a;https://www.iviewui.com/components/table#PX 注意一点&#xff0c;初始化排序&#xff0c;官方解释&#xff1a;通过给某一列设…

微信小程序中怎么使用阿里图标库中的图标

我们知道&#xff0c;微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的&#xff0c;所以&#xff0c;以前我们可能会在css中使用阿里图标库&#xff0c;但是在微信小程序中使用阿里图标库&#xff0c;要做一些处理 阿里图标库&#xff08;不会使用的底下留言&am…