欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?h函數(shù)的使用詳解

 更新時間：2021年12月31日 15:39:30   作者：前端怎么那么菜  
本文主要介紹了Vue?h函數(shù)的使用詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、認識

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

? h() 到底會返回什么呢？其實不是一個實際的 DOM 元素。它更準確的名字可能是 createNodeDescription，因為它所包含的信息會告訴 Vue 頁面上需要渲染什么樣的節(jié)點，包括及其子節(jié)點的描述信息。我們把這樣的節(jié)點描述為“虛擬節(jié)點 (virtual node)”，也常簡寫它為 VNode 。“虛擬 DOM”是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。

二、使用

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

1、h() 參數(shù)

h() 函數(shù)是一個用于創(chuàng)建 VNode 的實用程序。也許可以更準確地將其命名為 createVNode()，但由于頻繁使用和簡潔，它被稱為 h() 。它接受三個參數(shù)：

// @returns {VNode}
h(
    // {String | Object | Function} tag
    // 一個 HTML 標簽名、一個組件、一個異步組件、或
    // 一個函數(shù)式組件。
    //
    // 必需的。
    'div',

    // {Object} props
    // 與 attribute、prop 和事件相對應(yīng)的對象。
    // 這會在模板中用到。
    //
    // 可選的(在開發(fā)時。建議傳，實在沒有傳的時候，傳入 null)
    {},

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

2、簡單的使用

3、實現(xiàn)一個計數(shù)器案例

<script>
/* 設(shè)置樣式需要在這引入，如果使用style標簽，則不能寫scoped，不利于設(shè)置局部樣式，所以不建議 */
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, `當(dāng)前計數(shù)：${this.counter}`),
            h("button", { onClick: () => this.counter++, class: "button" }, "加 1"),
            h("button", { onClick: () => this.counter--, class: "button" }, "減 1")
        ])
    }
}
</script>

修改成純setup的寫法：

<script>
/* 設(shè)置樣式需要在這引入，如果使用style標簽，則不能寫scoped，不利于設(shè)置局部樣式，所以不建議 */
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, `當(dāng)前計數(shù)：${counter.value}`),
                h("button", { onClick: () => counter.value++, class: "button" }, "加 1"),
                h("button", { onClick: () => counter.value--, class: "button" }, "減 1")
            ])
        }
    }
}
</script>

4、函數(shù)組件和插槽的使用

1）父組件

<script>
import { h, ref } from "vue";
import Test from "./components/Test.vue"
export default {
    setup() {
        return {}
    },
    render() {
        return h(Test, null, {
            // default 對應(yīng)的是一個函數(shù)，default是默認插槽
            default: props => h("span", null, "父傳入到組件中的內(nèi)容：" + props.name)
        })
    }
}
</script>

2）子組件

<script>
import { h } from "vue";

export default {
    /**
     * 接收夫傳入的內(nèi)容
     */
    render() {
        return h("div", null, [
            h("div", null, "我是子組件"),
            /**
             * 在這判斷別人是否傳入
             * 也可以寫 null，啥也不展示
             * 也可以在傳入一個參數(shù)，使用的是 函數(shù)傳參
             */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div", null, "我是子組件的默認值")
        ])
    }
}
</script>

注：在項目中，如果你像上面一樣寫代碼，就太苦逼了，所以這個時候就要用 JSX。

三、jsx的使用

1、jsx的認識

jsx我們通常會通過Babel來進行轉(zhuǎn)換（React編寫的jsx就是通過babel轉(zhuǎn)換的）；

對于Vue來說，我們只需要在Babel中配置對應(yīng)的插件即可；

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

2、下載Babel插件支持vue（現(xiàn)在貌似腳手架直接支持）

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

3、配置babel

1）在根目錄下創(chuàng)建 .babel.config.js

2）在.babel.config.js 里面加入，如下代碼

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

4、簡單的使用

<script>
import { ref } from 'vue'
export default {
    setup() {
        let counter = ref(0)
        return { counter }
    },
    render() {
        return (
            <div>
                <div>JSX的使用</div>
                <h2>當(dāng)前數(shù)字：{this.counter}</h2>
            </div>


        )
    }
}
</script>

5、計數(shù)器案例

<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>當(dāng)前數(shù)字：{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.decrement} >減 1</button>
            </div >
        )
    }
}
</script>

6、組件和插槽的使用

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>當(dāng)前數(shù)字：{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.decrement} >減 1</button>
                <hr />
                <Test>
                    {/* 這個里面寫入傳入的內(nèi)容,也就是傳入一個插槽 */}
                    {{ default: props => <p>我是父傳入子的</p> }}
                </Test>
            </div >
        )
    }
}
</script>

2）子組件

<script>
export default {
    /**
     * 接收夫傳入的內(nèi)容
     */
    render() {
        return (
            <div>
                <p>我是組件</p>
                {/* 這塊也有可能沒穿，你要顯示一個默認值，這個時候，你就要用三元運算符 */}
                {this.$slots.default()}
            </div>
        )
    }
}
</script>

 注：如果你要h函數(shù)來寫組件，請仔細查看文檔，以上講解，只是入門級。

到此這篇關(guān)于Vue h函數(shù)的使用詳解的文章就介紹到這了,更多相關(guān)Vue h函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue實現(xiàn)當(dāng)前頁面刷新的七種方法總結(jié)

    Vue實現(xiàn)當(dāng)前頁面刷新的七種方法總結(jié)

    大家在vue項目中當(dāng)刪除或者增加一條記錄的時候希望當(dāng)前頁面可以重新刷新，但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,所以本文就給大家分享了七種vue實現(xiàn)當(dāng)前頁面刷新的方法,需要的朋友可以參考下
    2023-07-07
  • 解決vue項目axios每次請求session不一致的問題

    解決vue項目axios每次請求session不一致的問題

    這篇文章主要介紹了解決vue項目axios每次請求session不一致的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)

    Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)

    這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue注冊組件命名時不能用大寫的原因淺析

    Vue注冊組件命名時不能用大寫的原因淺析

    這段時間一直在弄vue，當(dāng)然也遇到很多問題，這里就來跟大家分享一些注冊自定義模板組件的心得 ,需要的朋友可以參考下
    2019-04-04
  • vue :style設(shè)置背景圖片方式backgroundImage

    vue :style設(shè)置背景圖片方式backgroundImage

    這篇文章主要介紹了vue :style設(shè)置背景圖片方式backgroundImage,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 如何利用vue.js實現(xiàn)拖放功能

    如何利用vue.js實現(xiàn)拖放功能

    這篇文章主要給大家介紹了如何利用vue.js實現(xiàn)拖放功能的相關(guān)資料，本文并未使用現(xiàn)有的庫，而是使用內(nèi)置的HTML拖放API來實現(xiàn)簡單的拖放系統(tǒng)，需要的朋友可以參考下
    2021-06-06
  • vue 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)

    vue 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)

    這篇文章主要介紹了vue 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 一篇文章帶你吃透Vuex3的狀態(tài)管理

    一篇文章帶你吃透Vuex3的狀態(tài)管理

    Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下
    2022-07-07
  • vue實現(xiàn)簡單無縫滾動效果

    vue實現(xiàn)簡單無縫滾動效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue實現(xiàn)在進行增刪改操作后刷新頁面

    vue實現(xiàn)在進行增刪改操作后刷新頁面

    這篇文章主要介紹了vue實現(xiàn)在進行增刪改操作后刷新頁面，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論