<!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. Spring-Boot:多种配置注入方式

    package com.example.el; import org.springframework.beans.factory.annotation.Value; import org.spring ...

  2. aabccd统计每个字符出现的次数,结果显示{ a: 2, b: 1, c: 2, d: 1 };去掉重复的字符,使结果显示abcd

    遍历字符串的方式和遍历数组的方式有点相似,或者说就是相同的.在学习数组的遍历方法之前,可以通过for循环去遍历数组,同样,字符串也可以:字符串跟数组都有一个length的属性.下面代码奉上,个人思路! ...

  3. RabbitMQ的各个参数

    简介 原文:https://blog.csdn.net/vbirdbest/article/details/78670550 本节主要讨论队列声明的各个参数 queueDeclare(String q ...

  4. Linux命令行中好用的快捷键

    Ctrl + L:清屏,与clear同效: Ctrl + D:终结当前程序,向终端传递EOF(End Of File): Ctrl + A:光标移至一行命令开头: Ctrl + E:光标移至一行命令结 ...

  5. 矩阵微分与向量函数Taylor展开

    参考博客:https://blog.csdn.net/a_big_pig/article/details/78994033

  6. 随笔编号-16 MySQL查看表及索引大小方法

    目标:阿里云OS数据库DMS,单个主库最大存储空间为2T.最近公司业务扩展很快,一天数据量达到7.9G左右.要求备份清理历史数据,备份到其他磁盘. 准备: 如果想知道MySQL数据库中每个表占用的空间 ...

  7. Java任务调度框架Quartz教程实例

    介绍: Quartz框架是一个全功能.开源的任务调度服务,可以集成几乎任何的java应用程序—从小的单片机系统到大型的电子商务系统.Quartz可以执行上千上万的任务调度.   核心概念   Quar ...

  8. sql server创建序列sequence

    1.创建一个序列对象 CREATE SEQUENCE [schema_name . ] sequence_name START WITH <constant> INCREMENT BY & ...

  9. Win10下安装python3.x+pycharm+autopep8

    一.安装Python3.X 1.Pythong官方网站:http://python.org/getit/   下载windows的安装包.有以下几个选项: 这里选择windows x86-64 exc ...

  10. 消息中间件——RabbitMQ(九)RabbitMQ整合Spring AMQP实战!(全)

    前言 1. AMQP 核心组件 RabbitAdmin SpringAMQP声明 RabbitTemplate SimpleMessageListenerContainer MessageListen ...