如何为 Vue.js 实例应用动态创建的模板？答案

【问题标题】：How to apply dynamically created template for Vue.js instance?如何为 Vue.js 实例应用动态创建的模板？
【发布时间】：2018-04-25 16:52:43
【问题描述】：

我可以使用带有 Vue.js 实例的静态模板，如下所示。 firstPlaceholder 的内容被替换为模板staticTemplate 的内容，text 属性被正确呈现。（可能需要 Chrome 才能正常工作。）

但是，如果我动态创建模板，渲染将不起作用。 secondPlaceholder 不见了。也许这是一个时间问题？

=>如何调整我的代码以使用 dynamicTemplate 呈现 secondPlaceholder？

<!doctype html>
<html>

<head>
	   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  
    <template id = "staticTemplate">
      <div>{{text}}</div>
    </template> 
  
    <div id ="firstPlaceholder"></div>
  
    <div id ="secondPlaceholder"></div>      
	
	<script>
    
    	var dynamicTemplate = document.createElement('template');
      dynamicTemplate.id = 'dynamicTemplate';
      var div = document.createElement('div');
      div.innerText = '{{text}}';
      dynamicTemplate.appendChild(div);
      
      var staticTemplate = document.getElementById('staticTemplate');
      document.body.insertBefore(dynamicTemplate, staticTemplate);
    
      new Vue({
        el: '#firstPlaceholder',
        template: '#staticTemplate',
        data: {
          text: 'My first text'
        }
      }); 
      
      new Vue({
        el: '#secondPlaceholder',
        template: '#dynamicTemplate',
        data: {
          text: 'My second text'
        }
      });       
     
	</script>
</body>
</html>

【问题讨论】：

标签： javascript templates vue.js

【解决方案1】：

检查Dom template，

HTML 内容模板 () 元素是一种机制保存在页面被渲染时不被渲染的客户端内容已加载，但随后可能会在运行时使用 JavaScript。

<template> 包含一个内容属性，通常我们会通过该属性读取模板内容。所以你可以将你的 html 添加到内容中。

如果直接appendChild转<template>，可以打印出html，然后会发现什么都没有添加。

简单修复：只需将 dynamicTemplate.appendChild(childDiv) 更改为 dynamicTemplate.content.appendChild(childDiv)

因为某些浏览器可能不支持<template>，您可能必须使用<div> 代替然后隐藏它。

PS：我发现有些文档说<template>的attribute=content是只读的HTMLTemplateElement，可能用div代替template会更好。

也你可以试试vue render()，这对你的情况会更好。

function isSupportTemplate() {
  return 'content' in document.createElement('template')
}

function createVueInstance(supported) {
  if(supported) {//check browser whether support template
    var dynamicTemplate = document.createElement('template');
    dynamicTemplate.id = 'dynamicTemplate';
    var childDiv = document.createElement('div');
    childDiv.innerText = 'support <template>: {{text}}-{{text}}';
    dynamicTemplate.content.appendChild(childDiv); //apend your html to template content
    document.body.appendChild(dynamicTemplate)

    var staticTemplate = document.getElementById('staticTemplate');
    document.body.insertBefore(dynamicTemplate, staticTemplate);
  }
  else {
    var dynamicTemplate = document.createElement('div');
    dynamicTemplate.id = 'dynamicTemplate';
    dynamicTemplate.style.display = 'none'
    var childDiv = document.createElement('div');
    childDiv.innerText = 'not support <template>: {{text}}-{{text}}';
    dynamicTemplate.appendChild(childDiv); //append your html to template content
    document.body.appendChild(dynamicTemplate)

    var staticTemplate = document.getElementById('staticTemplate');
    document.body.insertBefore(dynamicTemplate, staticTemplate);
  }

  new Vue({
    el: '#firstPlaceholder',
    template: '#staticTemplate',
    data: {
      text: 'My first text'
    }
  }); 

  new Vue({
    el: '#secondPlaceholder',
    template: '#dynamicTemplate',
    data: {
      text: 'My second text'
    }
  });
}

<!doctype html>
<html>

<head>
	   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <button onclick="createVueInstance(isSupportTemplate())">Support Template</button>
  <button onclick="createVueInstance(!isSupportTemplate())">Not Support Template</button>
    <template id = "staticTemplate">
      <div>{{text}}</div>
    </template> 
  
    <div id ="firstPlaceholder"></div>
  
    <div id ="secondPlaceholder"></div>      
	
</body>
</html>

【讨论】：

【解决方案2】：

它不能直接用于您的示例，但也许您可以使用Async Components 获得所需的结果。

【讨论】：