<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue</title>

    <script src="vue.js"></script>

</head>

<body>

    <!-- todolist组件拆分

        例如当

        <li v-for="(item, index) of list" :key="index">

                {{item}}

            </li>

        非常庞大或者复杂的时候，就可以才分出来进行维护

        Vue.component({})定义的组件成为全局组件

        var Todo-item 为局部组件,需要再vue中进行注册

     -->

    <div id="root">

        <div>

            <input v-model="inputValue" />

            <button @click="handleSubmit">提交</button>

        </div>

        <ul>

            <todo-item

             v-for="(item, index) of list"

             :key="index"

             :content="item"

            >

            </todo-item>

        </ul>

    </div>

    <script>

        Vue.component('todo-item', {

            props:['content'],

            template: '<li>{{content}}</li>'

        })

        // var TodoItem = {

        //     template: '<li>item</li>'

        // }

        new Vue({

            el:"#root",

            // components:{

            //     'todo-item': TodoItem

            // },

            data:{

                inputValue: 'hello',

                list: []

            },

            methods: {

                handleSubmit: function() {

                    this.list.push(this.inputValue)

                    this.inputValue = ''

                }

            }

        })

    </script>

</body>

</html>

Vue学习之todolist组件拆分的更多相关文章

  1. Vue学习之todolist删除功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  3. 38.VUE学习之-全局组件和局部组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. Vue学习系列(二)——组件详解

    前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...

  5. Vue学习之不同组件之间的消息传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  7. Vue 学习笔记之 —— 组件（踩了个坑）

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...

  8. vue学习记录⑤（组件通信-父与子）

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  9. Vue学习之todolist功能开发

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Feign详细构建过程及自定义扩展

    探究清楚 feign 的原理,自定义 feign 功能 **spring-cloud-openfeign-core-2.1.1.RELEASE.jar** 中 **HystrixFeign** 的详细 ...

  2. Ubuntu系统开发环境完整搭建

    安装搜狗输入法 点击我下载哦 idea快捷键冲突 输入发占用快捷键.撤掉输入法的快捷键.还有系统自带快捷键也要取消. 安装deepin-terminal 在tools工具包中找到deepin-term ...

  3. Arduino 常用函数参考文档

    封装好的API,使得程序中的语句更容易被理解,我们不用理会单片机中繁杂的寄存器配置,就能直观的控制Arduino,增强程序可读性的同时,也提高了开发效率. 本篇主要介绍: 一,项目结构 1.setup ...

  4. Java 从入门到进阶之路（三）

    之前的文章我们介绍了 Java 中的变量和基本数据类型,本章我们来看一下 Java 的运算符和表达式. 计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操 ...

  5. Jmeter 02 Jmeter断言之响应断言

    看完上一篇博客,相信大家应该可以使用Jmeter发送HTTP请求了.那么我们既然是要测试,就肯定需要判断结果了.Jmeter对于请求的响应数据提供了几种断言机制,这里大概说一下比较常用的几种断言. 响 ...

  6. Azure DevOps vsts-agent-linux 安装出错, Must not run with sudo

    在linux安装 vsts-agent-linux 在vsts-agent-linux的解压目录运行./config.sh, 提示"Must not run with sudo", ...

  7. Delphi - StringReplace用法

    StringReplace用法 在开发过程中,有时候我们需要对字符串进行替换操作,屏蔽或者和谐某些字符,可使用Delphi自带的函数StringReplace函数. 通过代码进行说明: //函数原型 ...

  8. 同步机制之一--Synchronized，以及此机制下的锁的本质和种类

    Java中,为了实现同步的操作临界区,线程在执行临界区的代码时,需要获得某个对象的锁.本文介绍获得对象的锁的方法之一----Synchronized关键字. Synchronized关键字的用法 Cl ...

  9. Struts2中文乱码问题 过滤器源码分析

    整理自网上: 前几天在论坛上看到一篇帖子,是关于Struts2.0中文乱码的,楼主采用的是spring的字符编码过滤器 (CharacterEncodingFilter)统一编码为GBK,前台提交表单 ...

  10. 2014-2015 Petrozavodsk Winter Training Camp, Contest.58 (Makoto rng_58 Soejima contest)

    2014-2015 Petrozavodsk Winter Training Camp, Contest.58 (Makoto rng_58 Soejima contest) Problem A. M ...