vue.js 入门无效

Question

我是第一次尝试 vue.js，并且是初学者 javascript 程序员。我正在经历 vue.js getting started page

我的html代码是：

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>React Tutorial</title>
      <script src="bower_components/vue/dist/vue.js"></script>
      <script src="js/myVue.js"></script>
    </head>
    <body>
        <div id="demo">
            <h1>&#123;&#123;title | uppercase&#125;&#125;</h1>
            <ul>
                <li
                    v-for="todos"
                    v-on="click: done = !done"
                    class="&#123;&#123;done ? 'done' : ''&#125;&#125;">
                    &#123;&#123;content&#125;&#125;
                </li>
            </ul>
        </div>
    </body>
</html>

和myVue.js文件是

window.onload = function () {
    var demo = new Vue({
        el: '#demo',
        data: {
            title: 'todos',
            todos: [
                {
                    done: true,
                    content: 'Learn JavaScript'
                },
                {
                    done: false,
                    content: 'Learn Vue.js'
                }
            ]
        }
    });
}

入门代码很旧，因为 v-repeat 已贬值并替换为 v-for。当我使用 v-for 时，我收到警告 "alias is required in v-for"。我还收到未定义的未捕获类型错误 "cannot read property "create"。

JSFiddle 代码也不起作用。

Answer 1

v-for requires alias 意味着您必须在 for 循环中命名变量，如下所示：

<li
    v-for="todo in todos"
    @click="todo.done = !todo.done"
    v-bind:class="{'done' : todo.done}">
    {{todo.content}}
</li>

vue.js 入门无效

vue.js getting started not working

javascript

vue.js