1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>todolist</title>
  9.      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10.  </head>
  11.  
  12.  <body>
  13.      <div id="app">
  14.          <input type="text" name="" id="" v-model="inputValue">
  15.          <button v-on:click="handleBtnClick">提交</button>
  16.          <!-- 把li标签里的内容整体变成一个组件 -->
  17.          <ul>
  18.              <!-- <li v-for="item in list">{{item}}</li> -->
  19.              <!-- v-bind:向子组件传递一个绑定值 -->
  20.              <todo-item v-bind:content="item" v-for="item in list">
  21.              </todo-item>
  22.          </ul>
  23.      </div>
  24.  
  25.      <script>
  26.          // Vue.component('TodoItem', {
  27.          //     props: ['content'], //从父组件接收的内容
  28.          //     template: '<li>{{content}}</li>',
  29.          // }); //vue提供的创建全局组件的方法
  30.  
  31.          //注册局部对象
  32.          var TodoItem = {
  33.              props: ['content'],  //定义接收外部传递过来的数据
  34.              template: '<li>{{content}}</li>',  //子组件的模板
  35.          };
  36.  
  37.          var app = new Vue({
  38.              el: '#app',
  39.              components: {
  40.                  TodoItem: TodoItem, //把局部组件注册到实例中
  41.              },
  42.              data: {
  43.                  list: [],
  44.                  inputValue: ''
  45.              },
  46.              methods: {
  47.                  handleBtnClick: function() {
  48.                      this.list.push(this.inputValue);
  49.                      this.inputValue = '';
  50.                  }
  51.              }
  52.          });
  53.      </script>
  54.  </body>
  55.  
  56.  </html>

使用前端组件化思想修改todolist的更多相关文章

  1. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  2. 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  3. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  4. 基于layui的框架模版，采用模块化设计，接口分离，组件化思想

    代码地址如下:http://www.demodashi.com/demo/13362.html 1. 准备工作 编辑器vscode,需要安装liveServer插件在前端开启静态服务器 或者使用hbu ...

  5. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  6. AppBoxFuture(六): 前端组件化开发

      前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端 ...

  7. 如何通过 Vue＋Webpack 来做通用的前端组件化架构设计

    目录:   1. 架构选型     2. 架构目录介绍     3. 架构说明     4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...

  8. 前端组件化Polymer深入篇(1)

    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...

  9. 前端组件化-Web Components【转】

    以下全部转自:http://www.cnblogs.com/pqjwyn/p/7401918.html 前端组件化的痛点在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟 ...

随机推荐

  1. User survey（用户调研）

    郑文武——小学二年级学生 姓名 郑文武  性别.年龄 男.9岁                      职业 学生 收入 父母给的零花钱 知识层次和能力 会使用手机 生活/工作情况 努力学习但数学成 ...

  2. Maya学习笔记

    软件: Maya 2016 : 参考教材: Maya 2016 中文版标准教程 ; 改变视图颜色 [窗口]|[设置/首项选择]|[颜色设置]|[3D视图]: 观察视图 旋转视图 Alt + 鼠标左键 ...

  3. 1003 我要通过！| PAT (Basic Level) Practice

    1003 我要通过! (20 分) "答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的"答案正确"大派送 -- 只要读入的字符串满足下列条件 ...

  4. C# 正则提取字符串（提取一个或多个）

    实例一:string result = ""; string str = "大家好! <User EntryTime='2010-10-7' Email='zhan ...

  5. maven编译，控制台中文乱码解决方案

    如下图,在使用maven运行后,在控制台看到中文展示乱码 出现这个的原因是源码使用UTF-8,但是maven编译的时候使用GBK标准,如下图   为了让maven编译的时候使用UTF-8标准,使用在p ...

  6. area point sql

    UPDATE aa_info_area t,(SELECT areaId, areacenter,CONCAT('POINT(' ,substring_index(areacenter,',', 1) ...

  7. Js获取上一月份

    new Date(new Date().setMonth(new Date().getMonth() - 1))

  8. git 常用命令总结(一)

    1.初始化版本库: .进入工程根目录目录 .创建项目目录 mkdir 项目目录名称 .进入创建的项目中 cd 项目名称 pwd 显示当前目录 .项目初始化 git init //完成后会在项目目录下生 ...

  9. Qt Lighthouse学习(二)，就是QPA(Qt Platform Abstraction) 项目的名字

    上一次关注Qt Lighthouse是在6月初,可是现在都8月底了.时间真快... Lighthouse 是 QPA(Qt Platform Abstraction) 项目的名字,它使得将Qt移植到新 ...

  10. Java中线程安全的集合

    如果多线程并发的访问与一个数据结构,那么很容易破坏一个数据结构. 例如,一个线程可能要向一个散列表中插入一条数据的过程中,被剥夺了控制权.如果另外一个线程也开始遍历同一个链表,很可能造成混乱,抛出异常 ...