JS中内联模板字符串是指什么?_JavaScript_论坛

JS中内联模板字符串是指什么?

gu***di 分类：JavaScript 人气：969 回帖：4 发布于6年前收藏

链接描述

在Vuejs的入门文档中看到这个,有点不太理解,我试过用反引号,但是会报错,又去搜索所谓内联模板字符串,也没有发现完全匹配的答案.求指导.

标签：javascript

讨论这个帖子（4）垃圾回帖将一律封号处理……

Lv5 码农

轻***却交互设计师 6年前#1

大神们不要把问题复杂化好不啦

受到 HTML 本身的一些限制,像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性
应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：
-----------<script type="text/x-template">
-----------JavaScript 内联模板字符串
-----------.vue 组件

这句话意思是：

这样不可以

<body>
    <div id="app">
        <select>
            <optioncomp></optioncomp>
        </select>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            components:{
                'optioncomp':{
                    template: '<option >a</option>'
                }
            }
        })
    </script>
</body>

但是用is特殊属性可以：

<body>
    <div id="app">
        <select>
            <option is="optioncomp"></option>
        </select>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            components:{
                'optioncomp':{
                    template: '<option >a</option>'
                }
            }
        })
    </script>
</body>

或者temp模板标签也可以

<body>
    <div id="app">
        <select>
            <option is="optioncomp"></option>
        </select>

        <!--模板内容存放区域-->
        <script type="x-template" id="optioncompTemp">
            <option >a</option>
        </script>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            components:{
                'optioncomp':{
                    template: '#optioncompTemp'
                }
            }
        })
    </script>
</body>

或者内联模板字符串也行

<body>
    <div id="app">
        <selectcomp></selectcomp>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        Vue.component('optioncomp',{
            template: '<option >a</option>'
        });
        new Vue({
            el: '#app',
            components:{
                'selectcomp':{
                    template: ' <select> <optioncomp></optioncomp></select>'
                }
            }
        })
    </script>
</body>

当然了，单页应用的组件文件xxx.vue更是没问题了，就不演示了

Lv4 码徒

醉***o JAVA开发工程师 6年前#2

类似于下面这种，可能含有mustache表达式的，同时支持es6模板字符串语法。

<div id="app">
    <checkbox-test></checkbox-test>
</div>
</body>
<script>
    var content="content-test";
    Vue.component('checkbox-test', {
        template: `<div  @click="check">
              <div class="title">{{ title }}</div>
              <div class="title">${content}</div>
            </div>`,
        data() {
            return { checked: false, title: 'title-test' }
        },
        methods: {
            check() { this.checked = !this.checked; }
        }
    });

    window.vm=new Vue({
        el:"#app",
    });
</script>

页面效果

Lv5 码农

wg***ge 页面重构设计 6年前#3

//内联模板字符串
Vue.component('component1',{
    template: '<tr><td>child component</td></tr>'
});
Vue.component('component2',{
    template: '<table><component1></component1></table>'
});

Lv3 码奴

18***30 Linux系统工程师 6年前#4

深入浅出ES6（四）：模板字符串

是这个吗？

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取