Vue.js 未显示字符串模板

我在创建组件/模板时遇到问题。我实际上是按照这里的说明来做的：

我的代码与视频中的代码基本相同（当然除了错误）

我的问题是，组件根本不会显示

以下是我完整的Vue.JS代码：

Vue.config.devtools = true;
var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app',

});
Vue.component('product', {
    template:
    `<div class='product'>
        <button class="btn btn-outline-success my-2 my-sm-0">Items [[ cart ]]</button>
        <div class="row">
            <div class="col-md">
                <img :src=image class="rounded float-left" alt="..." style="width: 50%">
            </div>
            <div class="col-md">
                <h1>Products: [[ title ]]</h1>
                <p>Description: [[ description ]]</p>
                <p v-if="inStock">In Stock</p>
                <p v-else :class="{outOfStock: inStock == 0}">Out of stock</p>
                <ul v-for="detail in details">
                    <li>[[ detail ]]</li>
                </ul>
                <div v-for="(variant, index) in variants"
                     :key="variant.variantId"
                     class="color-box"
                     @mouseover="updateProduct(variant.variantImage, index)"
                     :style="{ backgroundColor: variant.variantColor }">
                </div>
                <br>
                <button @click="addToCart"
                        :disabled="!inStock">
                    Add to Cart
                </button>
            </div>
        </div>
    </div>`,
    data() {
        return {
            product: 'Essen ',
            brand: "Muhannad Kalieh",
            description: 'Thats my description for the socks',
            selectedVariant: 0,
            onSale: true,
            details: ["Selber zubereitet", "frische Zutaten", "schmeckt geil nahuj"],
            variants: [
                {
                    variantId: 2224,
                    variantColor: "green",
                    variantQuantity: 15,
                    variantImage: '/images/essen1.jpeg',
                    sale: 1
                },
                {
                    variantId: 34,
                    variantColor: "blue",
                    variantQuantity: 0,
                    variantImage: '/images/essen2.jpeg',
                    sale: 0
                }
            ],
            cart: 0
        }
    },
    methods: {
        addToCart() {
            this.cart += 1
        },
        updateProduct(variantImage, index) {
            this.selectedVariant = index;
        }
    },
    computed: {
        title() {
            return this.brand + ' ' + this.product;
        },
        image() {
            return this.variants[this.selectedVariant].variantImage;
        },
        inStock() {
            return this.variants[this.selectedVariant].variantQuantity;
        }
    }
});

Vue.config.devtools=true；
var app=新的Vue({
分隔符：['['，']]']，
el:“#应用程序”，
});
Vue.组件（“产品”{
模板：
`
商品[[购物车]]
产品：[[标题]]
说明：[[说明]]

库存
缺货

[[详情]]



添加到购物车
`,
数据（）{
返回{
产品：“埃森”，
品牌：“Muhannad Kalieh”，
描述：'这是我对袜子的描述'，
所选变量：0，
安赛尔：是的，
详细信息：[“塞尔伯·祖贝雷特”、“弗里希·祖塔滕”、“施梅克特·盖尔·纳胡吉”]，
变体：[
{
瓦里安蒂德：2224，
variantColor:“绿色”，
差异数量：15，
Variatimage:“/images/esse1.jpeg”，
销售:1
},
{
瓦里安蒂德：34，
variantColor:“蓝色”，
差异数量：0，
Variatimage:“/images/esse2.jpeg”，
销售:0
}
],
购物车：0
}
},
方法：{
addToCart（）{
此值为1.cart+=1
},
updateProduct（变量年龄、索引）{
this.selectedVariant=索引；
}
},
计算：{
标题（）{
退回此.brand+“”+此.product；
},
图像（）{
返回this.variants[this.selectedVariant].variantImage；
},
inStock（）{
返回this.variants[this.selectedVariant].variantQuantity；
}
}
});

还有HTML

<div id="app">
    <product></product>
</div>

在我尝试将代码用作组件之前，所有的代码都工作正常。也许是因为delimeters？还是背勾呢？我真的没有任何线索了

---

谢谢你的帮助

必须在vue实例上方声明组件。在Vue.js模板中，您需要将自定义模板封装在附加的

中，如下所示：

// your template
Vue.component('product', {
template:
    `
     <div>
         <div class='product'>
           ... your vue codes here
         </div>
     </div>
    `    
});

Vue.config.devtools = true;
var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app'
});

//您的模板
Vue.组件（“产品”{
模板：
`
…您的vue代码在这里
`    
});
Vue.config.devtools=true；
var app=新的Vue({
分隔符：['['，']]']，
el:“#应用程序”
});

必须在vue实例上方声明组件。在Vue.js模板中，您需要将自定义模板封装在附加的

中，如下所示：

// your template
Vue.component('product', {
template:
    `
     <div>
         <div class='product'>
           ... your vue codes here
         </div>
     </div>
    `    
});

Vue.config.devtools = true;
var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app'
});

//您的模板
Vue.组件（“产品”{
模板：
`
…您的vue代码在这里
`    
});
Vue.config.devtools=true；
var app=新的Vue({
分隔符：['['，']]']，
el:“#应用程序”
});

在实例化新的Vue实例之前，需要声明组件。 此外，为了使分隔符起作用，您需要将它们放在组件声明中

您可以看到一个工作示例

---

在实例化新的Vue实例之前，需要声明组件。 此外，为了使分隔符起作用，您需要将它们放在组件声明中

您可以看到一个工作示例

---

//编辑——我更改了delimeters do[[var]]，因为我在laravel框架中使用vue.js。Laravels delimeters与{{}一起尝试在

尝试之前添加

，对我无效此文件的扩展名是什么。vue？您正在使用webpack吗？//编辑--我更改了delimeters do[[var]]，因为我在laravel框架中使用vue.js。Laravels delimeters与{{}一起尝试在

尝试之前添加

，对我无效此文件的扩展名是什么。vue？你在使用webpack吗？哎呀，我迟到了一点：-）没听你的评论我迟到了一点：-）没听你的评论