vue入门填坑之--Uncaught SyntaxError Unexpected token '<'最近小企在开发商城

最近小企在开发商城项目,使用的vue前端框架.没有系统想学习,各种百度各种搜.在一次学习组件基础的时候遇到一个错误:Uncaught SyntaxError Unexpected token '<'. 网上查找了相关资料,各路大佬说的都很高端,没有找到像我这样基础的bug问题答案.我就对项目进行了重新的书写,让后复制粘贴文档中的示例,发现我的错误原因是没有给组件模板添加单引号.以下是错误代码示例.

<body>
    <div id="root">
        {{name}}
        <ol>
           <game-item v-for="item in games" v-bind:game="item"></game-item>
        </ol>
        <button-counter></button-counter>
    </div>
</body>
<script>
Vue.component('game-item',{
    props:['game'],
    template:' <li>{{game.title}}</li>'
});
Vue.component('button-counter',{
    data:function(){
        return {
            count: '0'
        }
    },
    template: <button v-on:click="count++">You clicked me {{ count }} times.</button>  //错误代码
    // template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'  //正确代码
});
new Vue({
    el:'#root',
    data:{
        name:'i an learn vue',
        games:[
            {title:'斗地主'},
            {title:'下象棋'},
            {title:'打麻雀'},
            {title:'穿火线'},
        ]
    },
})

</script>

仅此记录一下,给像我一样的小白一点参考