Vue挂载事件不"正常"

Question

我正在尝试构建一个页面,其中一旦加载页面就应该设置变量.我放置了我的方法,并尝试重复调试它,完全没有任何结果,然后我试着只是在控制台打印一个字符串,mounted也没有发生任何事情......我不确定我是否遗漏了一些东西.

我支持我的项目usnig Vue CLI,目前,在下面的代码中,我希望HelloWorld.vue从模板中插入更改

我还添加了一个按钮作为支票,

<button onclick="foo">foo</button>

页面的脚本部分如下所示:

<script>
    export default {
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            mounted: function() {
                console.log("Mounted!")
            },
            foo: function() {
                console.log("button")
            }
        }
    }
</script>

预期的行为是"安装!" 在保存和刷新时在控制台上,每当我单击按钮时"按钮".显示页面时我什么也得不到,只要我点击按钮,就会出现"按钮".是mounted用在这里还是我失去了别的错误的功能？

Answer 1

啊.这是人们做的一个简单而常见的错误.这是你应该如何编写挂载.

<script>
    export default {
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            foo: function() {
                console.log("button")
            }
        },
        mounted: function() {
            console.log("Mounted!")
        },
    }
</script>

安装应与方法,数据或计算在同一级别.不在内部方法.

这就是全部,现在应该可以了.

我希望它有所帮助.

Answer 2

这不是这里的问题，但当我忘记包含结束</script>标签时，我也经历了同样的事情。以防万一它可以让其他人省去一些麻烦......