Vue记事本实例详解

2024-08-02 12:07:31

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

实例功能点不多，主要难点在于笔记文本对象数组的添加，删除，以及对组件的绑定同步事件。

核心代码

<section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>记事本</h1>
        <input
                v-model="note"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
        <div style="text-align: right;width: 90%;height: 3%;">
          <button value="记录" style="text-align: center" @click="addnote">记录</button>
        </div>

      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(n,index) in notes">
            <div class="view">
              <span class="index">{{index+1}}</span> <label>{{n}}</label>
              <button class="destroy"></button>
            </div>
          </li>

        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"><strong>{{notes.length}}</strong> items left </span>
        <button class="clear-completed" @click="delnote">
          Clear
        </button>
      </footer>
    </section>
      <script>
      let vue = new Vue({
        el:"#todoapp",
        data:{
          note:"好好学习，天天向上",
          index:0,
          notes:[
                  "写代码",
                  "吃饭饭",
                  "睡觉觉"
          ]
        },
        methods:{
          addnote:function () {
            this.notes.push(this.note);
          },
          delnote:function () {
            this.notes = [];
          }
        }
      });
</script>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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

基于vue2.0+vuex+localStorage开发的本地记事本示例

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

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

目录前言: 1. 安装 1.1 npm安装 1.2 vue-cli安装 2. 初始化项目 2.1vue init命令讲解 2.2 项目初始化 3. 运行项目 4. 成功页面 5. 项目结构 5.1 总体框架 5.2 配置目录文件详解 5.3src项目核心文件讲解 6. VUE-ROUTER 6.1 快速入门 6.2 页面跳转 6.3子路由-路由嵌套 6.4路由传递参数 6.5命名路由-命名视图-重定向-别名前言: 官方文档 vue-cli是vue官方出品的快速构建单页应用的脚手架,里面集成了
vue中v-model动态生成的实例详解

vue中v-model动态生成的实例详解前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <
Vue项目webpack打包部署到服务器的实例详解

Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'
Vue.js框架路由使用方法实例详解

Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-
Vue组件选项props实例详解

前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项使用Prop传递数据
Vue.js进行查询操作的实例详解

Vue.js进行查询操作的实例详解实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>
Vue Ajax跨域请求实例详解

一.设置config/index.js || proxyTable添加 proxyTable: { '/api': { target: 'http://192.168.48.239:8080/ydzl', changeOrigin: true, pathRewrite: { '^/api': '' } } 二.mian.js 添加vue全局属性 Vue.prototype.HOST = '/api' 三.如果是post的话 1.修改数据格式 transformRequest: [function
vue实现简单表格组件实例详解

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件按钮组件等等,vue三大核心组件路由状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说第一步:构建一个简单的vue项目,老规矩
基于vue+canvas的excel-like组件实例详解

a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能. vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your project import Vue from 'vue' import Grid fro

Vue记事本实例详解

相关推荐

随机推荐