Vue h函数的使用


theme: smartblue

highlight: monokai

一、认识

文档:https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91

​ h() 到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”,也常简写它为 VNode 。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

二、使用

文档:https://v3.cn.vuejs.org/guide/render-function.html#h-%E5%8F%82%E6%95%B0

1、h() 参数

h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode(),但由于频繁使用和简洁,它被称为 h() 。它接受三个参数:

```javascript // @returns {VNode} h( // {String | Object | Function} tag // 一个 HTML 标签名、一个组件、一个异步组件、或 // 一个函数式组件。 // // 必需的。 'div',

// {Object} props
// 与 attribute、prop 和事件相对应的对象。
// 这会在模板中用到。
//
// 可选的(在开发时。建议传,实在没有传的时候,传入 null)
{},

// {String | Array | Object} children
// 子 VNodes, 使用 `h()` 构建,
// 或使用字符串获取 "文本 VNode" 或者
// 有插槽的对象。
//
// 可选的。
[
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
        someProp: 'foobar'
    })
]

) ```

2、简单的使用

image-20211225202723505

3、实现一个计数器案例

```javascript

```

修改成纯setup的写法:

```javascript

```

4、函数组件和插槽的使用

1)父组件

```javascript

```

2)子组件

```javascript

```

注:在项目中,如果你像上面一样写代码,就太苦逼了,所以这个时候就要用 JSX。

三、jsx的使用

1、jsx的认识

jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);

对于Vue来说,我们只需要在Babel中配置对应的插件即可;

文档:https://v3.cn.vuejs.org/guide/render-function.html#jsx

2、下载Babel插件支持vue(现在貌似脚手架直接支持)

bash npm install @vue/babel-plugin-jsx -D

3、配置babel

1)在根目录下创建 .babel.config.js

2)在.babel.config.js 里面加入,如下代码

javascript module.exports = { presets: [ "@/vue/cli-plugin-babel/preset" ], plugins: [ "@vue/babel-plugin-jsx" ] }

4、简单的使用

```javascript

```

5、计数器案例

```javascript

```

6、组件和插槽的使用

1)父组件

```javascript

```

2)子组件

```javascript

```

 注:如果你要h函数来写组件,请仔细查看文档,以上讲解,只是入门级。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值