vue.js學習筆記（一）

阿新 • • 發佈：2019-02-15

最近在通過vue.js的官網學習其框架，我將會把我在學習過程中遇到的錯誤和自己的收貨分享出來，希望與大家共勉。

html程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>

</head>
<body>
    <div id="app">
      <ul>
        <todo-item v-for="item in groceryList" 
 v-bind:todo="item"></todo-item>
      </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="testvue.js"></script>
</body>
</html>

js程式碼

window.onload = function() {
    Vue.component("todo-item", {
        props: ["todo" 
],
        template: "<li>{{todo.text}}</li>"
    })
    var app = new Vue({
      el: '#app',
      data: {
        groceryList: [
        {text: "a"},
        {text: "b"},
        {text: "c"}
        ]
      }
    });
}

在做這個例子的過程，發現我的程式碼老是報錯，具體為：

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. (found in root instance)

這個錯誤出現的原因是我在測試的過程中先新建了Vue，然後註冊元件，即先 new Vue，之後 Vue.component。反過來錯誤即可解決。

Vue.js學習筆記（一）--------簡介

1.什麼是Vue? Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以

vue.js學習筆記（一）

最近在通過vue.js的官網學習其框架，我將會把我在學習過程中遇到的錯誤和自己的收貨分享出來，希望與大家共勉。 html程式碼： <!DOCTYPE html> <html lang="en"> <head>

vue-router學習筆記（一）

改變 from 發生回調筆記 win 存在下一個表示學習vue-router首先要認識的兩個屬性 $router 和 $route。 $router指的是router實例，$route則是當前激活的路由信息對象，是只讀屬性，不可更改，但是可以watch（監聽）。

Vue.js學習筆記（二）

head 改變 vue ntb con UNC 關註 tle element Vue.js不支持IE8及以下的版本，因為vue使用了IE8無法模擬的ECMAScript5的特性，它支持所有兼容ECMAScript5的瀏覽器。 1 <!DOCTYPE html>

vue.js學習筆記（七）--外掛

在日常的專案中，如果我們需要頻繁的使用某些功能，那麼最好的辦法就是將這個功能封裝成函式來使用。在vue中，我們同樣也會經常將常用的元件分離出來，這樣既便於我們的使用，同時也便於之後的維護。同樣，當某個元件在許多專案中都要頻繁的使用，那麼我們可以將其寫成一個外掛，vue官方的文件中也

vue.js學習筆記（六）--利用v-model實現父子元件間的雙向通訊

部落格：https://fisher-zh.github.io/ 在Vue中，我們可以使用prop屬性來進行父子元件間的通訊，在之前的文章Vue踩坑之路–父子元件通訊總結中有介紹過。但是prop 是單向繫結的，我們無法在元件中直接修改prop傳遞的屬性。

vue.js學習筆記（五）--axios中取消請求

部落格：https://fisher-zh.github.io/ 在平時的開發過程中，我們會經常遇到選單切換的問題，在一些切換頻率較低的情況下，在切換到另一個頁面的時候，上一個頁面基本沒有未完成的非同步請求，即時有，在一些情況下也是可以忽略的。但是，在一些切換頻率較高的

vue.js學習筆記（四）--變化檢測問題

部落格地址：https://fisher-zh.github.io Vue追蹤變化是通過把一個普通 JavaScript 物件傳給 Vue 例項的 data 選項，Vue將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 g

vue.js學習筆記（三）--父子元件通訊總結

部落格地址：https://fisher-zh.github.io 在使用Vue的過程中，如果需要進行父子元件間的通訊，通過查閱官方文件我們可以瞭解到只需要在子元件要顯式地用 props選項宣告它期待獲得的資料，同時在其使用過程中傳入相應的資料即可，例如： Vu

vue.js學習筆記（二）--指令的使用

部落格地址：https://fisher-zh.github.io vue之實現列表的新增點選。使用指令：v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"&

D3.js學習筆記（一）

D3.js學習資源： http://wiki.jikexueyuan.com/project/d3wiki/introduction.html 極客學院關於D3.js的系列文章； http://d3.decembercafe.org/ http://www.ourd3js.com/wor

147.Node.js學習筆記（一）2018.11.27

1. Node.js介紹 1.1 Node.js是什麼 Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.js學習筆記（一）——完整的響應html頁面（包括css，js檔案）

Node.js學習筆記（一）——完整的響應html頁面（包括css，js檔案）新手學習部落格，如存在問題，歡迎指出！終於解決了這個問題！之前寫的程式碼，然後只能加載出html檔案，然後在網上找到了解決方案。參考部落格這裡標記一下最主要的幾個點： node.js

JS學習筆記（一）——JavaScript的同步和非同步執行

如有錯誤歡迎指正 JavaScript的裝載和執行有兩種特性：1.載入後馬上執行 2.載入的時候會阻塞後面的js的載入和html文件的載入，可以理解為序列地載入。因此，當要通過JS對DOM樹進行操作的時候往往會發生查詢不到某一個元素的情況。下面是一個例子： &

Vue.js學習總結（一.）

1、什麼是Vue.js： Vue.js是一套構建使用者介面的漸進式框架。 Vue的核心庫只關注檢視層 Vue.js的目標是通過儘可能簡單的API實現響應的資料繫結和組合的檢視元件 2、單頁應用程式（SPA）單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用。 3、Vue.js為什麼

Vue.js 學習筆記（1）Centos環境下部署開發環境

1.安裝JS依賴管理工具npm yum install npm 2. 安裝vue npm install vue 3. 安裝vue命令列工具CLI sudo npm install --global vue-cli 4. 初始化專案 vue init webpack ne

原生js學習筆記（一）

js程式是單執行緒依次執行，例如for(var i=1;i<=3;i++){ console.log(i); setTimeout(function(){ console.log(i); //輸出：1,2,3，4,4,4 },0) }js定時器有兩種

React.js學習筆記（一）生命週期

componentWillMount（）{ console.log（ “建立之前”） } componentDidMount（）{ console.log（ “建立之後”） } componentWillUpdate（）{

【轉】Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

ack 目錄 javascrip 難度時間網站開發 clas jetbrains 常用目錄學習資料簡介安裝Node.js npm簡介開發工具 Sublime Node.js開發環境配置擴展：安裝多版本管理器學習資料　　1.深入淺出Node.j

vue.js學習筆記（Vuejs——組件——props數據傳遞）

元素綁定筆記即使大小寫 return span com 簡單 ①組件實例的作用域：是孤立的，簡單的來說，組件和組件之間，即使有同名屬性，值也不共享。 <div id="app"> <add></add>

vue.js學習筆記（一）

相關推薦