JS中內(nèi)聯(lián)模板字符串是指什么?

圖片描述

在Vuejs的入門文檔中看到這個(gè),有點(diǎn)不太理解,我試過(guò)用反引號(hào),但是會(huì)報(bào)錯(cuò),又去搜索所謂內(nèi)聯(lián)模板字符串,也沒(méi)有發(fā)現(xiàn)完全匹配的答案.求指導(dǎo).

回答

編輯回答

浪蕩不羈

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

是這個(gè)嗎？

2017年3月4日 01:07

編輯回答

涼心人

大神們不要把問(wèn)題復(fù)雜化好不啦

受到 HTML 本身的一些限制,像 <ul>、<ol>、<table>、<select> 這樣的元素里允許包含的元素有限制，而另一些像 <option> 這樣的元素只能出現(xiàn)在某些特定元素的內(nèi)部。變通的方案是使用特殊的 is 特性
應(yīng)當(dāng)注意，如果使用來(lái)自以下來(lái)源之一的字符串模板，則沒(méi)有這些限制：
-----------<script type="text/x-template">
-----------JavaScript 內(nèi)聯(lián)模板字符串
-----------.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模板標(biāo)簽也可以

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

        <!--模板內(nèi)容存放區(qū)域-->
        <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>

或者內(nèi)聯(lián)模板字符串也行

<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>

當(dāng)然了，單頁(yè)應(yīng)用的組件文件xxx.vue更是沒(méi)問(wèn)題了，就不演示了

2018年4月22日 05:21

編輯回答

薄荷糖

我也給JavaScript 內(nèi)聯(lián)模板字符串搞懵逼了哈哈

2018年6月3日 21:50

編輯回答

網(wǎng)妓

類似于下面這種，可能含有mustache表達(dá)式的，同時(shí)支持es6模板字符串語(yǔ)法。

<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>

頁(yè)面效果

2017年12月25日 23:09

編輯回答

吃藕丑

//內(nèi)聯(lián)模板字符串
Vue.component('component1',{
    template: '<tr><td>child component</td></tr>'
});
Vue.component('component2',{
    template: '<table><component1></component1></table>'
});

2017年1月21日 05:03