v-model中.number

最近在学习vue记录下踩坑过程:
vue官方文档中对于v-model中.number的描述:

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

失败例子(求哪位好心大哥指正错误):

<div id="app">
  <!--这里返回的值是字符串-->
  <input id="model1" v-model="age1" type="number"><br>
  <!--用了.number将返回的字符串转成数字-->
  <input id="model2" v-model.number="age2" type="number">

  <button @click="showType">验证</button>
</div>

<script src="../../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      age1: '',
      age2: ''
    },
    methods: {
      showType: function (){
        var x1 = document.getElementById("model1");
        alert("x1 type:"+typeof (x1));
        var x2 = document.getElementById("model2");
        alert("x2 type:"+typeof (x2))
      }
    }
  })
</script>

输出都是object…
下面是在overstack上找的例子:

<div id="app">
  <input type="text" v-model.number="age">
  <pre>
    {{ $data }}
  </pre>
</div>

<script src="../../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        age: ''
      }
    }
  })
</script>

前几天遇到的问题,定于vue的全局组件的时候,定义的组件要写在创建vue实例对象之前,不然不生效(暂时还不知道为啥)。。。