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就會實時變化