Javascript Vue Js应用程序抛出Js预期错误

我正在通过

Visual Studio 2017

学习

Vue js

。我正在尝试建立几个按钮的应用程序。我想在单击特定按钮时显示消息。但是当我遵守这个代码时，我得到了以下错误

严重性代码描述项目文件行抑制状态 警告TS1005（JS）“：”应为。VueJSAP JavaScript内容文件C:\Users\Khundokar Nirjor\Documents\Visual Studio 2017\Projects\VueJSAP\VueJSAP\src\App.vue 21活动

这是我的

App.vue

代码：

<template>
    <div id="databinding">
        <div id="counter-event-example">
            <p style="font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter v-for="(item, index) in languages"
                            v-bind:item="item"
                            v-bind:index="index"
                            v-on:showlanguage="languagedisp"></button-counter>
        </div>
    </div>
</template>

<script>

    import Vue from 'vue';
    export default {
        name: 'app',
        components: {

        },
        Vue.component('button-counter', {// error on this line

            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
                return {
                    counter: 0
                }
            },
            props: ['item'],
            methods: {
                displayLanguage: function (lng) {
                    console.log(lng);
                    this.$emit('showlanguage', lng);
                }
            },
        })


      var vm= new Vue({// error on this line
            el: '#databinding',
            data: {
                languageclicked: "",
                languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
                languagedisp: function (a) {
                    this.languageclicked = a;
                }
            }
        })



    }

</script>

<style>
</style>

显示的语言：{{languageclicked}

从“Vue”导入Vue；
导出默认值{
名称：“应用程序”，
组成部分：{
},
Vue.component（'button-counter'，{//此行出错
模板：“{item}}”，
数据：函数（）{
返回{
柜台:0
}
},
道具：['item']，
方法：{
显示语言：功能（lng）{
控制台日志（lng）；
这是$emit（'showlanguage'，lng）；
}
},
})
var vm=new Vue（{//此行出错
el:“#数据绑定”，
数据：{
语言：“，
语言：[“Java”、“PHP”、“C++”、“C”、“Javascript”、“C#”、“Python”、“HTML”]
},
方法：{
languagedisp：函数（a）{
this.languageclicked=a；
}
}
})
}

这里的问题是因为代码位于对象内部。

---

如果将

按钮计数器

组件移到

组件：{}

的正上方，

---

对象外部的vm部分应该可以解决这个问题。

看起来你的代码在对象内部。你能解释一下你的观点吗？它就像：

{var a=1}

它是对象内部的一条语句。对象应该是

{key:value}

按钮计数器组件应该在

组件{}的内部，

就在它的正上方vm部分应该在对象的外部