vue简易记事本开发详解

2024-12-19 12:59:47

本文实例为大家分享了vue实现易记事本的具体代码，供大家参考，具体内容如下

css代码

#todoapp {
   margin: 0 400px;
   width: 600px;
   background-color: gray;
   text-align: center;
}
.content {
   margin:0px 100px;
}
.todo {
  margin: 10px;
  text-align: left;
  background-color:green;
}
.btn {
   float: right;
   background-color: lawngreen;
}
.clear{
   background-color: lightseagreen;
}
.list{
   margin-left: 10px;
}

html代码加js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" >
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="todoapp">
       <div class="header">
        <h1>小黑记事本</h1>
        <input type="text" v-model="inputValue"   placeholder="请输入任务"> <button @click="add">添加</button>
       </div>
       <div class="content">
        <ul class="todolist" v-for="(item,index) in list">
            <div class="todo">
                <span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">删除</button>
            </div>

        </ul>
       </div>
       <div>
           <button @click="clearBoth" class="clear">全部清除</button>
       </div>
    </div>
    <script>
        var app = new Vue({
            el:"#todoapp",
            data: {
               list:["吃饭饭","打游戏","吃西瓜"],
               inputValue:""
            },
            methods: {
                remove:function(index){
                  this.list.splice(index,1)
                },
                add: function () {
                    this.list.push(this.inputValue)
                },
                clearBoth:function(){
                  this.list.splice(0,this.list.length)
                }

            }
        })
    </script>
</body>
</html>

运行效果截图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue记事本实例详解

本文实例为大家分享了Vue实现记事本功能的具体代码,供大家参考,具体内容如下实例功能点不多,主要难点在于笔记文本对象数组的添加,删除,以及对组件的绑定同步事件. 核心代码 <section id="todoapp">  <header class="header"> <h1>记事本</h1> <input v-model="note" autofocus=
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

前言首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其中最大的问题是使用 vue-cli 构建应用时遇到的问题.通过这些问题深入探索 vue 以及 vuex . 我对于框架的学习一直断断续续,最先接触的是 react,所以有一些先入为主的观念,喜欢 react 更多一点,尤其在应用的构建层面来说.之所以断断续续,是因为自己 JS 基础较弱,刚开始学习的
vue-cli+webpack记事本项目创建

vue-cli+webpack记事本项目使用的是vue-cli2.0里面的项目构建工具webpack 项目的准备工作: 1.了解vue2.0 2.了解一些ES6 3.储备一些webpack知识参照项目地址:vue2.0构建单页应用最佳实战我们将会选择使用一些vue周边的库 vue-cli , vue-router , vue-resource , vuex 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resourc
基于vue2.0+vuex+localStorage开发的本地记事本示例

本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果功能说明支持回车添加事件支持事件状态切换添加事件 -> 进入未完成列表未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据支持筛选事件支持编辑事件支持删除事件支持清空所有事件
vue实现记事本小功能

本文实例为大家分享了vue实现记事本小功能的具体代码,供大家参考,具体内容如下直接上代码: <!DOCTYPE html> <html lang="en"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <meta http-equiv="Content-Type" content=&q
vue实现记事本功能

本文实例为大家分享了vue实现记事本功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>记事本</title> <meta http-equiv="X-UA-Compatible&q
vue简易记事本开发详解

本文实例为大家分享了vue实现易记事本的具体代码,供大家参考,具体内容如下 css代码 #todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center; } .content { margin:0px 100px; } .todo { margin: 10px; text-align: left; background-color:green; } .btn { float: right;
Java文件(io)编程之记事本开发详解

本文实例为大家分享了Java开发简易记事本的具体代码,供大家参考,具体内容如下 public class NotePad extends JFrame implements ActionListener{ //定义需要的组件 JTextArea jta=null; //多行文本框 JMenuBar jmb=null; //菜单条 JMenu jm1=null; //菜单 JMenuItem jmi1=null,jmi2=null; //菜单项 public static void main(St
Vue header组件开发详解

一. header 组件开发之数据的传递 1. App.vue 引入组件 import header from './components/header/header' 2. App.vue 中注册组件 export default { components:{ v-header:header } } 3. 使用组件 <v-header :sell="sellerObj"></v-header> 解释::sell="sellerObj",这
Vue shopCart 组件开发详解

一.shopCart组件 (1) goods 父组件和子组件 shopCart 传参 deliveryPrice:{ // 单价从json seller 对象数据中获取 type:Number, default:0 }, minPrice:{ // 最低起送价从json seller 对象数据中获取 type:Number, default:20 } 其中 deliveryPrice 和 minPrice 的数据都是从 data.json数据中 seller 对象下获得.所以在good
Vue 短信验证码组件开发详解

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn
vue demi支持sfc方式的vue2vue3通用库开发详解

目录背景技术要点 vue-demi sfc compiler 实现方式 vue2.6 + vue3 + vite + vue-demi package.json vite.config.ts main.ts postinstall vue2.7 + vue3 + vite + vue-demi + yarn workspaces 目前没找到vue3为主包的开发方式注意点 1.@vue/composition-api重复引用问题 2.由于要兼容vue2,vue3的 setup sfc语法糖不
Vue.extend构造器的详解

Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组
基于Vue单文件组件详解

本文将详细介绍Vue单文件组件概述在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon
Python实现简易Web爬虫详解

简介: 网络爬虫(又被称为网页蜘蛛),网络机器人,是一种按照一定的规则,自动地抓信息的程序或者脚本.假设互联网是一张很大的蜘蛛网,每个页面之间都通过超链接这根线相互连接,那么我们的爬虫小程序就能够通过这些线不断的搜寻到新的网页. Python作为一种代表简单主义思想的解释型.面向对象.功能强大的高级编程语言.它语法简洁并且具有动态数据类型和高层次的抽象数据结构,这使得它具有良好的跨平台特性,特别适用于爬虫等程序的实现,此外Python还提供了例如Spyder这样的爬虫框架,BeautifulSo
VUE安装使用教程详解

如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

vue简易记事本开发详解

相关推荐

随机推荐