学习vue.js组件使用props属性报错，按照官方文档写，但报错

Question

代码如下

 <div id="box6">
      <my-component2 :showInfor="hello"></my-component2>
      <my-component2 :showInfor="hi"></my-component2>
 </div>
 
 <script type="text/javascript">
     Vue.component('my-component2',{
          props: ['showInfor'],
          template: "<div><h4>{{showInfor}}</h4></div>",
          computed: {
            showInforRes: function(){
              return this.showInfor+" world!"
            }
          }
        })
        var com2 = new Vue({
          el: '#box6'
        })
</script>

报错如下

Answer 1

<div id="box6">
    <my-component2 show-infor="hello"></my-component2>
    <my-component2 show-infor="hi"></my-component2>
</div>

<script type="text/javascript">
    Vue.component('my-component2',{
        props: ['showInfor'],
        template: "<div><h4>{{showInfor}}</h4></div>",
        computed: {
            showInforRes: function(){
                return this.showInfor+" world!"
            }
        }
    })
    var com2 = new Vue({
        el: '#box6'
    })
</script>

//说明：属性前去掉冒号，冒号表面是动态属性。同时改成-链接形式，不要驼峰形式，这是推荐标准写法。

Answer 2

不认识英文吗……下面说的那么清楚的…………

hello和hi没有定义。