VueJS 快速渲染模板

Question

有没有一种类似于 KnockoutJS 的方法可以通过 Id 从模板中快速轻松地呈现内容？

<script type="text/html" id="template-example"><span>Hello world!</span></script>

<div data-bind="template: '#template-example'"></div>

我已经阅读了文档但没有找到任何东西，并且还尝试创建一个名为 quick-template 的组件，其中模板属性使用了道具中的值，但我没有渲染任何东西。 可能是因为在填充道具之前绑定了模板

版本 2.6.12

Answer 1

谈到 Vue，唯一有信誉的来源是文档。

---

理论上：

模板是每个 vue 组件的核心部分。 事实上，一个 vue 组件不会在没有它的情况下渲染（或者没有render函数——我认为这只是提供模板的另一种方式，因为这就是它返回的内容）。
它可以提供为：

• template: rawHTML （HTML 字符串）
• template: '#some-id' （其中#some-id指向<template> 、 <script type="text/x-template">或普通 DOM 元素）。
• <template>content</template> - 在 SFC 中
• render函数（返回一个 HTML 字符串）。 覆盖提供template的任何其他形式。
• el: '#some-id' ， template由id为^{1, 2}的 DOM 元素的.innerHTML组成。

我不会介绍渲染功能，它们与您的情况无关。 Vue 解析 HTML 和 JSX。 Vue loader 接受预处理器，这使得它与 PUG 兼容，使用插件。

---

在实践中：

1. 将模板注册为组件，具有所需的template属性，以及他们可能需要的任何其他内容（ props 、 data 、 computed 、 methods 、 components 、 directives 、 filters 、 emits 、 watch 、 expose 、 compilerOptions 、 inheritAttrs 、 mixins 、 extends和/或生命周期挂钩）。

2. 在您的应用程序中使用它们。

演示³ ：

 Vue.component('some-list', { template: '#some-list', props: ['powers'] }) Vue.component('some-item', { template: '#some-item', props: ['value'] }) Vue.component('svg-example', { template: '#svg-example' }) new Vue({ el: '#app', data: () => ({ myComponents: ['some-list', 'svg-example'], powers: 8 }), methods: { getPowers(comp) { return (comp === 'some-list') && Number(this.powers) } } })

 #app { display: flex; justify-content: space-evenly; } #app input { height: min-content; } #app div > div { padding: 3px 7px; }

 <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> <div id="app"> <span v-text="powers"></span> <input type="range" v-model="powers" min="2" max="12"> <component v-for="component in myComponents" :powers="getPowers(component)" :key="component" :is="component" /> </div> <template id="some-list"> <div> <some-item v-for="(item, key) in powers" :key="key" :value="item" /> </div> </template> <template id="some-item"> <div v-text="Math.pow(2, value)" /> </template> <template id="svg-example"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 200" width="300"> <image href="https://picsum.photos/300/200" /> </svg> </template>

相同的示例^{4、5 ，}在应用程序上注册组件，而不是在 Vue 上全局注册：

 new Vue({ el: '#app', components: { SomeList: { template: '#some-list', props: ['powers'], components: { SomeItem: { template: '<div v-text="Math.pow(2, value)" />', props: ['value'] } } }, SvgExample: { template: '#svg-example' } }, data: () => ({ powers: 8 }) })

 #app { display: flex; justify-content: space-evenly; } #app input { height: min-content; } #app div > div { padding: 3px 7px; }

 <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> <div id="app"> <span>{{powers}}</span> <input type="range" v-model="powers" min="2" max="12"> <some-list :powers="Number(powers)"></some-list> <svg-example></svg-example> </div> <script type="text/x-template" id="some-list"> <div> <some-item v-for="(item, key) in powers" :key="key" :value="item" /> </div> </script> <!-- innerHTML of this hidden div is used as template --> <div id="svg-example" style="display: none"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 200" width="300"> <image href="https://picsum.photos/id/4/300/200" /> </svg> </div>

---

笔记：

¹ - 仅适用于new Vue({}) 。
² - 占位符（初始 DOM 元素）将替换为 Vue 挂载过程的结果，因此在挂载之前注册在元素上的任何事件都将丢失。
³ - 模板可以在 DOM 中的任何位置，不一定在 Vue 应用程序中。
⁴ - 不太灵活（ SomeItem组件需要在SomeList组件中声明，如果在 App 中声明， <SomeList />不能使用它 - 不知道为什么，我希望它可用于子组件）。
⁵ - 我用两个示例之间的替代语法调整了一些东西，所以你可以比较它们

Answer 2

您可以注册一个自定义组件并将脚本标签的内容用作模板。

Vue.component('my-component', '#template-example');

然后在你的 Vue 应用程序的某个地方：

<div id="app">
   <my-component></my-component>
</div>