刚学习 Vue 遇到一个很奇葩的问题

[蓝兔先生]

不啰嗦， 直接上代码。

1， 页面代码：从 bootcss.com 官网上下载了一个 4 版本的 模板。其中出现问题的代码:

<!-- Graphs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
          datasets: [{
            data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
            lineTension: 0,
            backgroundColor: 'transparent',
            borderColor: '#007bff',
            borderWidth: 4,
            pointBackgroundColor: '#007bff'
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: false
              }
            }]
          },
          legend: {
            display: false,
          }
        }
      });
    </script>

2，问题来了。当我不去实例化 Vue 对象时，整个页面显示很完整。


一旦我去实例化 Vue 对象，那么图形那一块就不显示了。

<script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>

求教。

[朽木自雕xmzd]

可以去下载vue-devtools进行调试，而且你这种创建的方式好像不对，var vm = new Vue({el:"#app"})

[jio可]

使用vue以后整个#app内容会重新渲染，直接使用document.getElementById("myChart")会获取不到dom，延迟一下执行或者用this.$refs.myChart <div ref="myChart"></div>