<!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. 05 requests模块进阶

    1. 基于requests模块的代理IP操作 - 爬虫中为什么需要使用代理 一些网站会有相应的反爬虫措施,例如很多网站会检测某一段时间某个IP的访问次数,如果访问频率太快以至于看起来不像正常访客,它可 ...

  2. Linux 终端命令格式

    Linux 终端命令格式 一.目标 了解终端命令格式 知道如何查阅终端命令帮助信息 二. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相 ...

  3. Pycharm2019.2.1永久激活

    Pycharm2019.2.1永久激活 Pycharm官网自7月24更新到pycharm2019.2版本后,在短短的一个月内与8月23又带来新版本2019.2.1,不可说更新不快,对于"喜新 ...

  4. 企查查app (完结)

    在经历前两次探索之后,终于可以把所有的加密关键参数搞定了. 已删除!!!! 好了现在基本结束了. 根据这个我写了一自动抓取企查查每日新增数据,需要的话可以去看看 企查查app新增企业数据抓取 关注小白 ...

  5. wcf项目跨域问题处理

    最近做了一个wcf项目,请求发起的项目是一个webform项目,所以这是分开的两个项目端口必然不一样,理所当然存在跨域问题. 有的人当下就反应过来jsonp,jsonp只能用于get请求,对于参数比较 ...

  6. Hadoop RPC机制详解

    网络通信模块是分布式系统中最底层的模块,他直接支撑了上层分布式环境下复杂的进程间通信逻辑,是所有分布式系统的基础.远程过程调用(RPC)是一种常用的分布式网络通信协议,他允许运行于一台计算机的程序调用 ...

  7. Codeforces 1004D

    题意略. 思路: 有两个点要注意一下: 1.这个菱形矩阵是8对称的,也即可以是沿45°对角线对称. 2.菱形矩阵上的数字表明了这个点到中心0点的距离,这对于确定位置有帮助. 这个题目简直刷新人生观,这 ...

  8. 导航页的开发--手机web app开发笔记

    好了,的所有的基础知识已经准备完毕了,现在开始制作引导页.这个引导页需要一个HTML文件,JS文件,一个CSS文件.在HBuilderX中根目录下添加“Guid.html”,在JS文件夹添加“myth ...

  9. 【Appium】Appium+Python环境搭建

    环境准备: 1.jdk 2.android-sdk 3.python 4.Node.js 5.appium 6.Appium-Python-Client 1. 下载jdk1.7:http://www. ...

  10. 牛客-2018多校算法第五场D-集合问题+并查集

    集合问题 题意: 给你a,b和n个数p[i],问你如何分配这n个数给A,B集合,并且满足: 若x在集合A中,则a-x必须也在集合A中. 若x在集合B中,则b-x必须也在集合B中. 思路:并查集操作,自 ...