<!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. 《Java 8 in Action》Chapter 2：通过行为参数化传递代码

    你将了解行为参数化,这是Java 8非常依赖的一种软件开发模式,也是引入 Lambda表达式的主要原因.行为参数化就是可以帮助你处理频繁变更的需求的一种软件开发模式.一言以蔽之,它意味 着拿出一个代码 ...

  2. python学习之并发编程

    目录 一.并发编程之多进程 1.multiprocessing模块介绍 2.Process类的介绍 3.Process类的使用 3.1 创建开启子进程的两种方式 3.2 获取进程pid 3.3验证进程 ...

  3. 快应用 吸顶 bug

    官网说, 加载页面时,所有元素的appear事件都会被触发一次.因此,需要过滤第一次的appear事件:  但是,即使设置了过滤,也无效 于是,我把show属性改成了if属性,问题就解决 如下图:  

  4. Java 并发编程(一)：摩拳擦掌

    这篇文章的标题原本叫做——Java 并发编程(一):简介,作者名叫小二.但我在接到投稿时觉得这标题不够新颖,不够吸引读者的眼球,就在发文的时候强行修改了标题(也不咋滴). 小二是一名 Java 程序员 ...

  5. 设计模式（C#）——05适配器模式

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321       自然界有一条规则--适者生存.意思是生物要使用自然界的变化:在程序界中则需要新环境调用现存对象.那么,如何在新环境中 ...

  6. Filter（过滤器）（有待补充）

    Filter(过滤器) 一.Filter(过滤器)简介 Filter 的基本功能是对 Servlet 容器调用 Servlet 的过程进行拦截,从而在 Servlet 进行响应处理的前后实现一些特殊的 ...

  7. Leetcode之回溯法专题-131. 分割回文串（Palindrome Partitioning）

    Leetcode之回溯法专题-131. 分割回文串(Palindrome Partitioning) 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回 s 所有可能的分割方案. ...

  8. MSIL实用指南-数据类型转换

    一.类的强制转换1.转换成某个类用Castclass指令.实例代码:ilGenerator.Emit( OpCodes.Castclass , typeof(ClassA) ); 2.转换成某个值类型 ...

  9. Oracle - Tables

    创建表 a: Sql语句创建 -- Create table create table Table_Name ( 字段1 VARCHAR2(50), 字段2 VARCHAR2(50) not null ...

  10. 82天突破1000star，项目团队梳理出软件开源必须注意的8个方面

    近期,我们在GitHub上开源了微服务任务调度框架SIA-TASK,82天,收获了1000+个star!由于这是SIA团队第一次开源项目,开源的相关工作,团队之前并没有太多的经验,因此我们特别整理了本 ...