Vue报错 [Vue warn]: Cannot find element

时间 2019-11-19

标签 vue 报错 warn element 繁體版

原文原文链接

在前端开发全面进入前端的时代做为一个合格的前端开发工做者框架是不可或缺的Vue React Anguar 做为前端小白,追随大佬的脚步来到来到博客园,更新如今正在学习的Vuejavascript

注 : 相信学习Vue的都已经比较熟练的掌握了Js基础 ES6 jquery 平常代码调试 Node.js 环境 npm使用否则学Vue可能比较吃力css

推荐安装Vue的Chrome拓展程序方便调试代码(在谷歌商店搜索Vue 下载第一个)html

vue官网指南 > https://cn.vuejs.org/v2/guide/index.html前端

vue在线库vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue -- Hello wordjava

HTML代码: 
<div id="app">
        {{ message }}
    </div>

js代码:
var app = new Vue({
    el: '#app',  //el指定位置 css选择器
    data: {
        message: 'Hello Vue!'   //加载数据  app.message能够直接访问
    }
})

看到这一步,能够确认咱们打印出了第一行Vue代码,咱们要怎么确认呢？打开你的浏览器的 JavaScript 控制台，并修改 app.message 的值，你将看到上例相应地更新jquery

注意!!!!!!! 刚开始会遇到这样的错误 [Vue warn]: Cannot find element

为何呢 ? 由于: 你的脚本是在目标dom元素被加载到dom以前执行npm

具体解释: 你已经将你的脚本放置在页面的头部或放置在div元素以前的脚本标记。因此当脚本执行时，它将没法找到目标元素，从而出现错误。浏览器

个人解决办法将引用的Vue库和main.js 放在代码的最后面app

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
<script src="vue.js"></script>
<script src="main.js"></script>
</html>

新手请勿踩坑

接下在就开始Vue学习了

参考 Vue官方文档书籍:Vue.js实战我的感受文档说说的很好可是细节说的并很少在博客中也对小细节进行补充

实例与数据

Vue.js 的建立很是简单 ,使用构造函数Vue就能够建立Vue的根实例,并启动Vue实例

var app = new Vue({
    el:"#app",
    data:{}
    //选项
})

变量app表明这个实例

事实上几乎全部的代码都是一个对象,写入Vue的实例选项内

上面说的太正式了说简单点吧,首先说一下 el 与data表明什么

el : 用于指定一个页面已经存在的DOM (就是 id class) 来挂载Vue实例可使用js的DOM原生代码或者CSS选择器
data : 能够理解为Vue用到的数据值

var app = new Vue({
    el:"#app",//document.getElementById("app") 固然推荐css选择器写法啦
    data:{
        data:1    //html 的{{ data }} 就是 1
    }
    //选项
})

Vue特性双向绑定

Vue.js颇有特点的功能不说太多贴代码

<div id="app1">
       <input type="text" v-model="my">  //v-model 双向绑定
       {{ my }}
  </div>

js:
new Vue({
    el:"#app1",
    data:{
        my:"欢迎来到Vue"
    }
})

在输入框内输入就是左边的input就会实时变化

虽然 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，可是 Vue 是单项数据流，v-model 只是语法糖而已不过这不影响初学者使用,了解一下

今天就写这么多吧

2018-2-26 23:42

Vue报错 [Vue warn]: Cannot find element

实例与数据

Vue特性 双向绑定

Vue特性双向绑定