[Vue3 API] – DOM

# DOM

# template

  • 类型:string

  • 详细:

    一个字符串模板作为 component 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

    如果值以 # 开始,则它将被用作 querySelector,并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

    注意

    出于安全考虑,你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。

    注意

    如果 Vue 选项中包含渲染函数,该模板将被忽略。

  • 参考

  • 生命周期图示

  • 通过插槽分发内容

# render

  • 类型:Function

  • 详细:

    字符串模板的另一种选择,允许你充分利用 JavaScript 的编程功能。

  • 用法:

    <div id="app" class="demo">
    <my-title blog-title="A Perfect Vue"></my-title>
    </div>
    
    const app = Vue.createApp({})
    app.component('my-title', {
    render() {
    return Vue.h(
    'h2',           // 标签名称
    this.blogTitle  // 标签内容
    )
    },
    props: {
    blogTitle: {
    type: String,
    required: true
    }
    }
    })
    app.mount('#app')
    

    注意

    render 函数的优先级高于从挂载元素 template 选项或内置 DOM 提取出的 HTML 模板编译渲染函数。

  • 参考 Render Functions

以上是[Vue3 API] – DOM的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>