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>