Vue Errors

1. 报错代码示例：

  <div id="app">
    <person v-bind:age="27" v-bind:msg="有 v-bind 前缀"></person>
    <person age="27" msg="没有 v-bind 前缀"></person>
  </div>
  <script>
    Vue.component('person', {
      props: ['age', 'msg', 'man'],
      template: `
        <div>
          {{ age }} 类型：{{ typeof age }} --- {{msg}}
        </div>
      `
    });

    const vm = new Vue({
      el: '#app'
    });
  </script>

报错截图：

报错分析：使用v-bind，变成一个 JavaScript 表达式：msg = 有 v-bind 前缀，显然这种写法是错误的，因为 = 号右边不是一个正确的数据类型（字符串需要引号包裹）。

修复：v-bind:msg="'有 v-bind 前缀'" （双引号内还要有单引号）

完整代码：

  <div id="app">
    <person v-bind:age="27" v-bind:msg="'有 v-bind 前缀'"></person>
    <person age="27" msg="没有 v-bind 前缀"></person>
  </div>
  <script>
    Vue.component('person', {
      props: ['age', 'msg', 'man'],
      template: `
        <div>
          {{ age }} 类型：{{ typeof age }} --- {{msg}}
        </div>
      `
    });

    const vm = new Vue({
      el: '#app'
    });

显示结果：

27 类型：number --- 有 v-bind 前缀
27 类型：string --- 没有 v-bind 前缀