<!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功能开发

     -->

    <div id="root">

        <div>

            <input v-model="inputValue" />

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

        </div>

        <ul>

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

                {{item}}

            </li>

        </ul>

    </div>

    <script>

        new Vue({

            el:"#root",

            data:{

                inputValue: 'hello',

                list: []

            },

            methods: {

                handleSubmit: function() {

                    this.list.push(this.inputValue)

                    this.inputValue = ''

                }

            }

        })

    </script>

</body>

</html>

Vue学习之todolist功能开发的更多相关文章

  1. Todolist功能开发

    一.属性绑定和双向数据绑定: v-bind:title 或简写成 :title实现title属性绑定: v-model实现双向数据绑定(双向是指:当数据变了,input的value会改变:当input ...

  2. Vue学习笔记(五)——配置开发环境及初建项目

    前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...

  3. SpringMVC学习记录四——功能开发及参数绑定

    9       商品修改功能开发 9.1      需求 操作流程: 1.进入商品查询列表页面 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询) 要修改的商品从数据库查询,根据 ...

  4. Vue学习之todolist删除功能

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

  5. 3-1 todolist功能开发

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

  6. Vue学习之todolist组件拆分

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

  7. vue学习【一、开发环境搭建】

    一.安装node.js https://nodejs.org/en/ 建议安装LTS版本 安装完毕之后cmd命令查看node版本,如果不识别,记住设置环境变量 显示上面信息则安装成功 二.设置node ...

  8. SpringMVC学习记录五——功能开发及参数处理

    15       包装类型pojo参数绑定 15.1      需求 商品查询controller方法中实现商品查询条件传入. 15.2      实现方法 第一种方法:在形参中 添加HttpServ ...

  9. IOS开发－OC学习－常用功能代码片段整理

    IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...

随机推荐

  1. mongo常用语法

    首先要能进入控制台,进不去自己解决. 基本操作: show users:显示用户 show dbs:显示数据库列表 use <db name> 切换/创建数据库 show collecti ...

  2. 分布式事务TransactionScope所导致几个坑

    记录一下,个人见解,欢迎指正 错误: 1.该伙伴事务管理器已经禁止了它对远程/网络事务的支持. (异常来自 HRESULT:0x8004D025)2.事务已被隐式或显式提交,或已终止3.此操作对该事务 ...

  3. .NetCore从零开始使用Skywalking分布式追踪系统

    本文将从0开妈搭建两个webapi项目,使用Skywalking来追踪他们之间的调用关系及响应时间.开发环境为VisualStudio2019 1:安装Skywalking,可参考:https://w ...

  4. Chrome 开发工具之 Application

    Chrome 开发者工具有 Application 这么一个面板,主要作用是检查 web 应用加载的所有资源,包括 Manifest.Service Workers.Local Storage.Ses ...

  5. .Net Core 2.2与Java 12性能对比

    我发现基准游戏(https://benchmarksgame-team.pages.debian.net/benchmarksgame/fastest/csharp.html)是一套非常好的基准测试. ...

  6. 极简Docker和Kubernetes发展史

    2013年 Docker项目开源 2013年,以AWS及OpenStack,以Cloud Foundry为代表的开源Pass项目,成了云计算领域的一股清流,pass提供了一种"应用托管&qu ...

  7. 线程、进程的区别，Java的几个线程状态

    线程.进程的区别        进程的定义:进程就是程序在一个数据集合上的一次执行过程.他与程序的区别在于程序是静态的代码,而进程是动态的执行过程. 进程的特性:1.结构性,进程由程序块.数据块.进程 ...

  8. Web安全开发规范手册V1.0

    一.背景 团队最近频繁遭受网络攻击,引起了部门技术负责人的重视,笔者在团队中相对来说更懂安全,因此花了点时间编辑了一份安全开发自检清单,觉得应该也有不少读者有需要,所以将其分享出来. 二.自检清单 检 ...

  9. Spring中老生常谈的FactoryBean

    本文完整代码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/factorybean Factory ...

  10. Java-手动搭建SSM（Maven）

    一.环境部署 操作系统:windows10专业版 jdk:1.8.0_144 IDE:eclipse-oxygen 服务器:tomcat 9.0 数据库:mysql 5.7.18 Maven:3.54 ...