Question

如何分离脚本模板和html。这个模板使文档太大了。我应该怎么做才能缓存它？

<script id="search-game-result-tpl" type="text/html">
<li class="" data-id=''>
    ...
</li>
</script>
<script id="search-tag-result-tpl" type="text/html">
<li class="" data-id=''>
    ...
</li>
</script>
<script id="search-question-result-tpl" type="text/html">
<li class="" data-id=''>
    ...
</li>
</script>

Answer 1

（代表问题作者发布解决方案）。

1，创建一个新的模板文件，说“/js/template/tipwindow.html”

 <div class="container"
      ...
 </div>

2，在主html文件中，使用xmlhttlrequest获取模板并插入主html并执行逻辑。

(function() {

        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/js/template/tipwindow.html', true);
        xhr.responseType = 'document';
        xhr.onload = function (e) {
            var doc = e.target.response;
            var container = doc.querySelector('.container');
            document.body.appendChild(container);

            doLogic();
        }
        xhr.send();

        function doLogic() {
              .....
        }

}

如何从html制作vuejs模板？

1 个答案: