[Vue warn]: Cannot find element 原因及处理

vue的第一个入门程序报错：[Vue warn]: Cannot find element遇到的问题如下：<!DOCTYPE HTML><html><meta lang="en" charset="utf-8"></html><head><title>VUE20201109</title></head>

Hai Ts'ungchih

15679人浏览 · 2020-11-14 09:03:56

Hai Ts'ungchih · 2020-11-14 09:03:56 发布

vue的第一个入门程序报错：[Vue warn]: Cannot find element

——————Vue学习记录

遇到的问题如下：
并未显示msg中的内容

<!DOCTYPE HTML>
<html>
<meta lang="en" charset="utf-8">
</html>
<head>
    <title>VUE20201109</title>
</head>

<body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
    el:'#app',
    data:{
        msg:'你好啊，vue！'
    }
})
</script>
<!-- <script src="20201109.js"></script> -->
<div id="app">
{{msg}}
</div>
</body>

原因：dom元素被加载之前，就引用了dom标签，所以找不到，换句话说，是script标签在id为app的div之前了。
解决方法2种：
1.将script标签移到最下面。
2.在script中加入window.onload函数。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^