vue render函数笔记

 
{
  // 和 `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 值是否为 enter 键值。
  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 slot)的格式如下
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果此组件是另一个组件的子组件,
  // 需要为插槽(slot)指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层(top-level)属性
  key: 'myKey',
  ref: 'myRef'
}
使用render:(h,params) => {
    return h('',[])
}

h:标签+属性

params :values






根据引用中的信息,张天禹老师的Vue2笔记主要包括以下内容: 1. 脚手架文件结构: 包括了src文件夹、public文件夹、babel.config.js、package.json等文件,这些文件组成了Vue项目的基本结构。 2. Vue.js与vue.runtime.xxx.js的区别: Vue.js是完整版的Vue,包含了核心功能和模板解析器,而vue.runtime.xxx.js是运行版的Vue,只包含核心功能,没有模板解析器。因此,在使用vue.runtime.xxx.js时,无法直接使用template配置项,需要使用render函数来指定具体内容。 3. vue.config.js配置文件: 使用vue.config.js可以对Vue脚手架进行个性化定制,可以通过该文件来修改默认配置。 4. ref属性: 在Vue中,ref属性用来给元素或子组件注册引用信息(相当于id)。在html标签上使用ref获取的是真实DOM元素,在组件标签上使用ref获取的是组件实例对象。使用方式是通过打标识和this.$refs.xxx来获取。 5. props配置项: 在Vue中,props配置项用来设置父组件向子组件传递数据的属性。子组件可以通过props获取到来自父组件的数据。 以上就是张天禹老师Vue2笔记的一些主要内容。123 #### 引用[.reference_title] - *1* [尚硅谷Vue2-3(张天禹老师) 学习笔记](https://blog.csdn.net/weixin_55092718/article/details/126071878)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [尚硅谷 张天禹老师vue2笔记(方便自己查阅)](https://blog.csdn.net/xianyu120/article/details/120850859)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *3* [Vue2学习笔记(尚硅谷张天禹老师)day-01](https://blog.csdn.net/qq_53916344/article/details/123890478)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值