Question

我尝试了多种方法将我的VueJS代码嵌入页面中，包括：

包含在window.onLoad函数中。
标题中包含了一些JS。
包含在标题中的库。
把JS放在vue之上，因为我得到了一个＆＃34;作者＆＃34;未定义的消息。

我终于放弃了。我尝试了多种方法，没有任何作用。 Vue dev工具说那里＆＃39; defo一个叫做＃34; Doug＆＃34;但它并没有显示出来。为什么呢？

这是我博客页面上的代码

<p>So here goes. I’m going to create a VueJS 2.0 Hello World app then follow it up with  Gist and a JSFiddle link to the code.</p>

<div id="app">
    <input type="text" v-on:input="changeAuthorName">
    I, {{ author }}, made this
</div>

<script type="text/javascript">
window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            author: 'Doug'
        },
        methods: {
            changeAuthorName: function(event) {
                this.author = event.target.value;
            }
        }
    });
};
</script>

我做错了什么？

Answer 1

如果您查看页面上的控制台，则说明

[Vue warn]: Cannot find element: #app

当你的代码出现在元素之前时，这并不令人惊讶。

目前

  <script>
new Vue({
    el: '#app',
    data: {
        author: 'Doug'
    },
    methods: {
        changeAuthorName: function(event) {
            this.author = event.target.value;
        }
    }
});
</script>

  <div id="app">
    <input type="text" v-on:input="changeAuthorName">
    I, {{ author }}, made this
</div>

所以在这样的元素下移动代码

    <div id="app">
        <input type="text" v-on:input="changeAuthorName">
        I, {{ author }}, made this
    </div>
        <script>
    new Vue({
        el: '#app',
        data: {
            author: 'Doug'
        },
        methods: {
            changeAuthorName: function(event) {
                this.author = event.target.value;
            }
        }
    });
</script>

以供参考，这是您的非工作版本

https://jsbin.com/honucayanu/1/edit?html,console,output

并交换

https://jsbin.com/cerasanili/1/edit?html,console,output

作为额外的奖励你可以做到

<div id="app">
    <input type="text" v-model="author">
    I, {{ author }}, made this
</div>
    <script>
new Vue({
    el: '#app',
    data: {
        author: 'Doug'
    },    
});
</script>

为什么我在Fiddle中使用的包含的VueJS代码不能在我的博客上工作？

1 个答案: