罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 442|回复: 0

Vue h函数的使用详解

[复制链接]

684

主题

677

帖子

765

积分

社区达人

积分
765
发表于 2022-1-11 17:30:40 来自手机 | 显示全部楼层 |阅读模式
目录


  • 一、认识
  • 二、使用

    • 1、h() 参数
    • 2、简单的使用
    • 3、实现一个计数器案例
    • 4、函数组件和插槽的使用

  • 三、jsx的使用

    • 1、jsx的认识
    • 2、下载Babel插件支持vue(现在貌似脚手架直接支持)
    • 3、配置babel
    • 4、简单的使用
    • 5、计数器案例
    • 6、组件和插槽的使用


一、认识

文档: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() 。它接受三个参数:
  1. // @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、简单的使用




3、实现一个计数器案例
  1. <script>/* 设置样式需要在这引入,如果使用style标签,则不能写scoped,不利于设置局部样式,所以不建议 */import "./style.css"import { h, ref } from "vue";export default {    // data 的写法    // data() {    //     return {    //         counter: 0    //     }    // },    setup() {        const counter = ref(0)        return { counter }    },    /**     * 使用setup的时候,下面也可以用this,引入render有绑定this,所以下面取值,要用this     */    render() {        return h("div", null, [            h("h1", null, `当前计数:${this.counter}`),            h("button", { onClick: () => this.counter++, class: "button" }, "加 1"),            h("button", { onClick: () => this.counter--, class: "button" }, "减 1")        ])    }}</script>
复制代码
修改成纯setup的写法:
  1. <script>/* 设置样式需要在这引入,如果使用style标签,则不能写scoped,不利于设置局部样式,所以不建议 */import "./style.css"import { h, ref } from "vue";export default {    // data 的写法    // data() {    //     return {    //         counter: 0    //     }    // },    setup() {        const counter = ref(0)        return () => {            return h("div", null, [                h("h1", null, `当前计数:${counter.value}`),                h("button", { onClick: () => counter.value++, class: "button" }, "加 1"),                h("button", { onClick: () => counter.value--, class: "button" }, "减 1")            ])        }    }}</script>
复制代码
4、函数组件和插槽的使用

1)父组件
  1. <script>import { h, ref } from "vue";import Test from "./components/Test.vue"export default {    setup() {        return {}    },    render() {        return h(Test, null, {            // default 对应的是一个函数,default是默认插槽            default: props => h("span", null, "父传入到组件中的内容:" + props.name)        })    }}</script>
复制代码
2)子组件
  1. <script>import { h } from "vue";export default {    /**     * 接收夫传入的内容     */    render() {        return h("div", null, [            h("div", null, "我是子组件"),            /**             * 在这判断别人是否传入             * 也可以写 null,啥也不展示             * 也可以在传入一个参数,使用的是 函数传参             */            this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div", null, "我是子组件的默认值")        ])    }}</script>
复制代码
注:在项目中,如果你像上面一样写代码,就太苦逼了,所以这个时候就要用 JSX。

三、jsx的使用


1、jsx的认识

jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);
对于Vue来说,我们只需要在Babel中配置对应的插件即可;
文档:https://v3.cn.vuejs.org/guide/render-function.html#jsx

2、下载Babel插件支持vue(现在貌似脚手架直接支持)
  1. npm install @vue/babel-plugin-jsx -D
复制代码
3、配置babel

1)在根目录下创建 .babel.config.js
2)在.babel.config.js 里面加入,如下代码
  1. module.exports = {    presets: [        "@/vue/cli-plugin-babel/preset"    ],    plugins: [        "@vue/babel-plugin-jsx"    ]}
复制代码
4、简单的使用
  1. <script>import { ref } from 'vue'export default {    setup() {        let counter = ref(0)        return { counter }    },    render() {        return (            <div>                <div>JSX的使用</div>                <h2>当前数字:{this.counter}</h2>            </div>        )    }}</script>
复制代码
5、计数器案例
  1. <script>import { ref } from '@vue/reactivity'export default {    setup() {        let counter = ref(0)        function add() {            counter.value++        }        function decrement() {            counter.value--        }        return { counter, add, decrement }    },    render() {        return (            <div>                <div>JSX的使用</div>                <h2>当前数字:{this.counter}</h2>                <button onClick={this.add}>加 1</button>                <button onClick={this.decrement} >减 1</button>            </div >        )    }}</script>
复制代码
6、组件和插槽的使用

1)父组件
  1. <script>import { ref } from '@vue/reactivity'import Test from "./components/Test.vue"export default {    setup() {        let counter = ref(0)        function add() {            counter.value++        }        function decrement() {            counter.value--        }        return { counter, add, decrement }    },    render() {        return (            <div>                <div>JSX的使用</div>                {/* 如果这块使用setup里面的变量、方法 要加this */}                <h2>当前数字:{this.counter}</h2>                <button onClick={this.add}>加 1</button>                <button onClick={this.decrement} >减 1</button>                <hr />                <Test>                    {/* 这个里面写入传入的内容,也就是传入一个插槽 */}                    {{ default: props => <p>我是父传入子的</p> }}                </Test>            </div >        )    }}</script>
复制代码
2)子组件
  1. <script>export default {    /**     * 接收夫传入的内容     */    render() {        return (            <div>                <p>我是组件</p>                {/* 这块也有可能没穿,你要显示一个默认值,这个时候,你就要用三元运算符 */}                {this.$slots.default()}            </div>        )    }}</script>
复制代码
注:如果你要h函数来写组件,请仔细查看文档,以上讲解,只是入门级。
到此这篇关于Vue h函数的使用详解的文章就介绍到这了,更多相关Vue h函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:http://www.jb51.net/article/233468.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

浏览排行

(36663)2019-11-5 公共云钱包资金盘骗局揭秘: 网络传销+原始股骗局合体!

(20853)2019-12-20 12月17日 邓智天法院直播庭审疑问全解答!

(19844)2019-12-1 环保币GEC资金盘骗局最新消息: 即将崩盘!

(14887)2018-12-24 罗田县人民法院公布【第五批失信被执行人名单】 ...

(14190)2019-11-3 曝光!PTFX已经崩盘跑路,投资者血流成河!

(13339)2019-11-9 巨胸肥臀大长腿,嫩模糯美子真人COS不知火舞福利污图

(11694)2019-8-7 湖北电力网上缴费,支付宝绑定户号的初始密码是什么?

(11344)2018-10-17 罗田县人民政府“12345”市民服务热线服务指南

(10131)2019-12-11 公安定性了, 趣码是非法传销! 趣码怎么退回365元?

(9969)2019-12-15 满足你对女同事的幻想 风骚秘书阿朱销魂眼神勾魂摄魄

最新发表

[无理取闹]2022-8-18 德媒述评:“屋顶”成中国光伏发展新蓝海

[开心每一天]2022-8-18 港媒:中国完善期货市场法律框架

[zhanwenfang]2022-8-18 港媒报道:中国多地出台政策鼓励生育

[jiantengxie]2022-8-18 现场视频!东部战区飞行员俯瞰澎湖列岛

[Mandy1008]2022-8-18 东部战区位台岛周边海空域组织多军兵种联合战备警巡和实战化演练

[ulteawx]2022-8-18 俄媒:俄吊销捷克和保加利亚企业军机维修许可证

[不要问我]2022-8-18 俄国防部:一架英国侦察机侵犯俄领空遭驱离

[曾磊]2022-8-18 俄媒:斯洛伐克向乌克兰提供多门自行榴弹炮

[不要问我]2022-8-18 外媒:新西兰将向英国派遣120名军事人员协助培训乌军人

[hylin]2022-8-18 法媒:以军空袭叙境内目标致多人死伤

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2022-8-18 21:05 , Processed in 0.129693 second(s), 37 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表