vue.js学习笔记（一）

客官°小女子只卖身不卖艺 2022-07-13 05:23 213阅读 0赞

最近在通过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。反过来错误即可解决。

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关前端学习笔记：React学习笔记（一）

React的起源和发展 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设In

左手的ㄟ右手/ 2023年10月06日 16:02/ 0 赞/ 28 阅读

相关 Redis学习笔记一

Redis入门什么是Redis（Remote Dictionary Server）？ C语言编写的开源的高性能非关系型数据库（NoSQL） Redis

迈不过友情╰/ 2022年11月14日 10:29/ 0 赞/ 192 阅读

相关 Redis学习笔记《一》

Redis实战与源码 ![image-20210316081204206][] 一、问题画像 ![image-20210316081358165][] 二、R

- 日理万妓/ 2022年10月22日 02:55/ 0 赞/ 231 阅读

相关 vuejs初次学习入门

不得不说我对前端技术还是有追求的，这几天了解了下vuejs，记点笔记 vuejs是一个mvvm框架，博主以java开发为主，后台的mvc模式可以说是web开发的标配，没想

今天药忘吃喽~/ 2022年07月11日 07:29/ 0 赞/ 299 阅读

相关 VueJs学习汇总

最近更新时间：2017年6月2日16:58:06 [《我的博客地图》][Link 1] 前端的框架很多，需要不断的摸索和学习，截止20170602已经接触和使

落日映苍穹つ/ 2022年06月15日 12:11/ 0 赞/ 472 阅读

相关 Redis学习笔记(一)

初识Redis 首先Redis是完全开源免费的，遵守BSD协议，是一个高性能的key-value数据库，Redis支持数据的持久化，可以将内存中的数据

淩亂°似流年/ 2022年05月27日 03:55/ 0 赞/ 225 阅读

相关 vuejs学习笔记

把一个对象所有元素打印出来对象： editRoomData: { id: "", roomNo:""

Bertha 。/ 2022年05月01日 12:10/ 0 赞/ 253 阅读

相关 VueJS中学习使用Vuex详解

[转载https://segmentfault.com/a/1190000015782272][https_segmentfault.com_a_119000001578227

梦里梦外;/ 2021年09月30日 05:58/ 0 赞/ 392 阅读

相关【Vue 学习】- VueJS 生命周期

一、概述 Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8

向右看齐/ 2021年09月21日 01:16/ 0 赞/ 482 阅读

相关【Vue 学习】- VueJS 简单入门

目录一、概述 1、Vue 介绍 2、MVVM 模式二、Vue 入门 1、使用 IDEA 开发 Vue 2、插值表达式 --------------------

末蓝、/ 2021年09月21日 00:52/ 0 赞/ 784 阅读