Question

我刚刚开始学习使用Vue。我写了如下的非常简单的代码。

<!DOCTYPE HTML>
<html>
    <head>

    </head>
    <body>
        <script src="https://unpkg.com/vue"></script>
        <div id="app">
            <h2>{{number}}</h2>
            <h2>Here it is!</h2>
        </div>
    </body>

<script type="text/javascript">

var app = new Vue({
            el: '#app',
            data: {
                number:0
            }
        })

</script>
</html>

但是，没有number值。

但是，当我仅在Chrome上通过Ctrl+O打开该代码时，它就会成功显示！

我确实通过chrome开发工具检查了network，并且从vue.js成功获得了https://unpkg.com/vue@2.5.22/dist/vue.js了，这是怎么回事？

Answer 1

从头开始加载框架是一个很好的开始。参见下面的示例，在这里可以正常工作。

<!DOCTYPE HTML>
<html>
    <head>
    <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <h2>{{number}}</h2>
            <h2>Here it is!</h2>
            <button @click="clk">click</button>
        </div>
        <script type="text/javascript">

        var app = new Vue({
          el: '#app',
          data: {
              number: 0
          },
          methods: {
            clk(){
              this.number++;
            }
          }
        })

        </script>
    </body>
</html>

Answer 2

我认为您应该从函数中返回一个对象以获取数据。

data：function（）{ 返回{ 数：0 }; }

Vue为什么不显示？

2 个答案: