精华内容
下载资源
问答
  • 技术测试Vue待办事项列表 应用概述 以可读的方式列出待办事项,并显示优先级 优先将新项目添加到列表中 从列表中删除一个项目 清除整个清单 能够编辑现有项目 进入页面后保存到本地存储并重新加载 按优先级排序 单元...
  • vue 待办事项案列

    2020-07-03 16:48:19
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...待办事项列表</title> <style> .completed { text-decorati
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>待办事项列表</title>
      <style>
        .completed {
          text-decoration: line-through;
          color: #666;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <header>
          <h1>待办事项列表</h1>
          <h2>今日事,今日毕!</h2>
        </header>
        <div>
          <input
            type="text"
            placeholder="请输入新的待办事项"
            v-model="inputValue"
            @keydown.enter="addTodoItem"
          >
          <button @click="addTodoItem">添加</button>
        </div>
        <!-- 显示所有待办事项 -->
        <div v-if="todos.length === 0">没有待办事项,请添加</div>
        <ul v-else>
          <li
            v-for="todo in todos"
            :key="todo.id"
          >
            <span :class="{completed: todo.completed}">标题:{{ todo.title }}。状态:{{ todo.completed ? '已完成' : '未完成' }}。</span>
            <button @click="toggleTodoItem(todo.id)">修改为{{ todo.completed ? '未' : '已' }}完成</button>
            <button @click="deleteTodoItem(todo.id)">删除</button>
        </li>
        </ul>
      </div>
    
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
      <script>
        // 全局的 id 编号
        let index = 2
    
        new Vue({
          el: '#app',
          data: { // 数据
            todos: [ // 保存所有待办事项
              {
                id: 1,
                title: '复习 HTML',
                completed: true
              },
              {
                id: 2,
                title: '复习 Javascript',
                completed: false
              }
            ],
            inputValue: '' // 文本框中输入的新的待办事项
          },
          methods: { // 方法
            /**
             * 添加新的待办事项
             */
            addTodoItem() {
              if (this.inputValue.length === 0) { // 如果输入内容为空,则不添加
                return
              }
              // 向数组中添加新的待办事项表示的对象
              this.todos.push({
                id: ++index,
                title: this.inputValue,
                completed: false
              })
              // 清空输入框内容
              this.inputValue = ''
            },
            /**
             * 修改状态
             * @param id 待修改状态的待办事项 id
             */
            toggleTodoItem(id) {
              this.todos = this.todos.map(todo => {
                if (todo.id === id) {
                  todo.completed = !todo.completed
                }
                return todo
              })
            },
            /**
             * 删除待办事项
             */
            deleteTodoItem(id) {
              this.todos = this.todos.filter(todo => todo.id !== id)
            }
          }
        })
      </script>
    </body>
    </html>
    
    展开全文
  • vue_todo 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 前言如果您所在公司有用过类似的todo list产品,那应该对其不是很陌生。todo list(待办事项列表),非常有名的todo list产品有Teambition,JIRA等等。...本次《todo list: Vue待办事项任务管理》,分为一下章节...

    6466806bea95a62ac9ee3bd27baa363b.png

    前言

    如果您所在公司有用过类似的todo list产品,那应该对其不是很陌生。todo list(待办事项列表),非常有名的todo list产品有Teambition,JIRA等等。Teambition是收费的,而且价格也不是很便宜啦(但是人家的功能确实还可以,可谓非常强大)。

    27e610f4d9a4562f659b18841a5bf613.png

    所以,就在自己倒腾一个简单的,有兴趣的同学可以持续关注。

    本次《todo list: Vue待办事项任务管理》,分为一下章节:
    第一章: 初识(项目搭建、基本功能组件实现)
    第二章: 数据动态化处理(localStorage + Vuex),可新增,可编辑
    第三章:待办事项自定义分组
    第四章:待办事项添加描述图片等信息
    第五章:可线上操作,入库Mysql
    第六章:多人协同处理待办事项,权限管理
    第七章:完结:线上发布

    初步定义7个章节,实际开发中有可能有所增减。

    脚手架搭建项目

    vue init webpack todo-list

    90b5acb0aac6bad8702eb0c6b59e306c.png

    然后我们来看看整个项目结构

    b1da96124760d3a788aaf68e05d4c4a2.png

    除了红框标识以外,全部都是自动生成的。

    大家也看到了app.styl样式文件,这里我用到了stylus,怎么加入它了???

    npm i stylus stylus-loader -S

    安装后,修改build/utils.js文件

    const postcssLoader = {
      ...
    }
    
    // 增加stylusLoader
    const stylusLoader = {
      loader: 'stylus-loader',
      options: {
        sourceMap: options.sourceMap
      }
    }
    
    function generateLoaders (loader, loaderOptions) {
      // 数组增加stylusLoader
      const loaders = options.usePostCSS ? [stylusLoader, cssLoader, postcssLoader] : [cssLoader]
      ...
    }

    这样,即可使用stylus了。

    vuedraggable

    看名字,大家应该就知道vuedraggable是什么了,vue的拖拽组件。先看看示例:

    2e93f88d3dd3f66d78702661e0855392.gif

    看这个图,有没有觉得它就是为了Todo List量身定做的一样。

    vuedraggable git地址

    npm i vuedraggable -S

    安装后,我们来看看如何具体使用。

    Todo List基础组件

    我们在components目录下新建list.vuelist-item.vue2个文件,作为基础组件,list.vue是每个分组列表、list-item.vue是列表里面的每个任务。

    list.vue的html代码

    <div id="list" class="clearfix">
      <div class="list-group" v-for="(item, index) in listData" :key="index">
        <div class="list-title">{{item.title}}</div>
        <draggable class="draggable" :list="item.list" group="people">
          <transition-group>
            <div class="draggable-item" v-for="element in item.list" :key="element.id">
              <list-item :objData="element"></list-item>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>

    list.vue的javascript代码

    import ListItem from './list-item'
    import Draggable from 'vuedraggable'
    
    export default {
      props: {
        listData: {
          type: [Array],
          default: () => []
        }
      },
      components: {
        ListItem,
        Draggable
      }
    }

    这里的Draggable就是上面的vuedraggable组件,用法也是很简单拉。引入模块后

    <draggable class="draggable" :list="list" group="people">
      <transition-group>
        <div class="draggable-item" v-for="element in list" :key="element.id">
          {{element.name}}
        </div>
      </transition-group>
    </draggable>

    list.vue对应的样式是主要部分(stylus代码)

    #list
      height 100%
      background-color #f5f5f5
      padding 20px
      .list-group
        float left
        width 240px
        height 100%
        margin-right 20px
        .list-title
          font-size 14px
          font-weight 700
          margin-bottom 10px
        .draggable
          height 100%
          .draggable-item
            margin-bottom 8px

    list-item.vue的html代码

    <template>
      <div class="item">
        <span>{{objData.name}}</span>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        objData: {
          type: [Object],
          default: () => {}
        }
      }
    }
    </script>
    
    <style lang='stylus'>
      @import './list-item.styl';
    </style>

    这个目前就超级的简单了,把对象里面的name显示出来即可,后面主要围绕这个做功能了。

    接下来,就是引用list.vue组件了。

    引用components/list.vue组件

    <template>
      <list :listData="todoData"></list>
    </template>
    
    <script>
    import List from '../components/list'
    
    export default {
      data () {
        return {
          todoData: [{
            title: '待处理',
            list: [{
              id: 1,
              name: '测试1'
            }...]
          }, {
            title: '进行中',
            list: [{
              id: 6,
              name: '测试6'
            }...]
          }, {
            title: '已完成',
            list: [{
              id: 11,
              name: '测试11'
            }...]
          }]
        }
      },
      components: {
        List
      }
    }
    </script>

    19b8edfbbdb068e7a63c7319ec2b76ed.gif

    总结

    第一章节的核心部分就是draggable组件的运用,然后稍加样式,即可形成todo list的锥形。后续内容会持续更新,请持续关注。


    作者:向建峰_Javan

    链接:http://www.imooc.com/article/287012

    来源:慕课网

    本文首次发布于慕课网 ,转载请注明出处,谢谢合作

    展开全文
  • 待办事项vue 待办事项清单 (todolist) Todo app made by studying Vue.js 通过研究Vue.js制作的Todo应用 功能 (function) Enter / edit / delete tasks Save task (LocalStorage) Switch task status in 3 steps ...

    待办事项vue

    待办事项清单 (todolist)

    Todo app made by studying Vue.js

    通过研究Vue.js制作的Todo应用

    功能 (function)

    Enter / edit / delete tasks
    Save task (LocalStorage)
    Switch task status in 3 steps (Todo / In Progress / Done)
    Sort list

    图书馆 (Library)

    VueDraggable
    BootstrapVue
    VueFontawesome

    建立 (Build)

    # install dependencies
    npm install
    
    # serve with hot reload at localhost: 8080
    npm run serve
    
    # Lints and fixes files
    npm run lint
    
    # create production files
    npm run build
    
    # Customize configuration
    See [Configuration Reference] (https://cli.vuejs.org/config/).

    翻译自: https://vuejsexamples.com/todo-list-created-with-vue-js/

    待办事项vue

    展开全文
  • 待办事项vue 待办事项清单 (To-Do-List) A simple to-do list app created with only Vue.js! 仅使用Vue.js创建的一个简单的待办事项列表应用程序! 如何运行这个程序 (How to Run this App) npm install npm run...

    待办事项vue

    待办事项清单 (To-Do-List)

    A simple to-do list app created with only Vue.js!

    仅使用Vue.js创建的一个简单的待办事项列表应用程序!

    如何运行这个程序 (How to Run this App)

    npm install
    npm run serve

    编译并最小化生产 (Compiles and Minifies for Production)

    npm run build

    皮棉和修复文件 (Lints and Fixes Files)

    npm run lint

    内置 (Built with)

    • Vue.js - JavaScript Framework

      Vue.js-JavaScript框架

    • Materialize CSS - CSS Framework

      实现CSS-CSS框架

    翻译自: https://vuejsexamples.com/to-do-list-application-created-with-only-vue-js/

    待办事项vue

    展开全文
  • 待办事项清单 待办事项清单-vue
  • Vue 简易待办事项

    2021-04-09 21:58:18
    事项时: 有事项时: 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
  • vue.js添加待办事项样式特效是一款支持自定义创建和删除事项列表功能。
  • Vue.js待办事项清单代码基于Vue.js 2.6.11制作,自定义添加新事项功能,事项删除功能。
  • Txdx是待办事项清单,只是为了学习Vue。 安装所有依赖项: yarn install 启动应用程序: yarn serve 输入待办事项,然后按Enter 通过单击文本来切换待办事项状态 通过单击感叹号图标切换待办事项优先级 通过...
  • vue-adonis-todo:使用阿多尼斯和vue待办事项清单
  • 待办事项vue pawaTask (pawaTask) A simple todo list application that keeps track of your time. 一个简单的待办事项列表应用程序,可以跟踪您的时间。 如何 (How To) ...
  • 基于vue, vuex, vue-router, vuetify, vue CLI3 搭建的一个简单的代办事项清单demo。 使用日历视图更好地管理代办事项。添加事项时,可以选择事项开始和结束的日期时间,事件将被添加到日历中对应的位置,可视化的...
  • vue管理待办事项

    2020-07-20 14:15:14
    <!DOCTYPE html> <html> <head> ...meta charset="utf-8">...script src="vue.js"> </script> <div id="app"> <input type="text" v-model="newTo
  • ③每条待办事项可自由选择是否删除 ④可自由添加事务进入待办事项中,回车键效果一样 ⑤有数字提示总事项和未完成事项 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=.....
  • Vue待办清单

    2018-10-28 22:10:07
    用javascript一个很有名的框架写的,一个由中国人开发出来的框架VUE,具体用了HTML5,CSS3,javascript和Vue
  • vue.js添加待办事项清单表单代码,一款基于vue.js创建待办事项列表表单ui模板。
  • vue学习实现待办事项功能

    千次阅读 2019-06-14 16:22:43
    先下载vue.js,网址:https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入 代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
  • 1、在输入框中输入待办事项并按回车键可以把内容添加到下面列表中,并且待办事项总数会随之增加 2、点击复选框,实现选中或不选中效果(即完成或未完成) 3、选项卡后有“❌”按钮,完成后点击该按钮可以删除该事项 ...
  • 1 <template> 2 3 4 <div id="app"> 5 6 <input type="text" v-model='todo' @keydown="doAdd($event)" /> 7 8 9 <br> 10 ...
  • 待办事项清单
  • 提示碰撞课程 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
  • vue 实现简单的待办事项,记事本功能.pdf
  • Vue-todolist
  • Vue todolist 待办事项 已经完成 和进行中为list数据添加状态,双向绑定、以及键盘回车事件完善代码,css样式美化,完整代码 为list数据添加状态,双向绑定、以及键盘回车事件 template: <template> <div ...
  • 初学vue的时候,做了一个待办事项清单。 首页 First.vue <template> <div id="app"> <div class="q">待办事项清单</div> <p class="e">不积跬步无以至千里</p> <hr ...
  • 基于vue全家桶的代办事项demo:项目简介 项目介绍 基于vue, vuex, vue-router, vuetify, vue CLI3 搭建的一个简单的代办事项清单demo。 使用日历视图更好地管理代办事项。 添加事项时,可以选择事项开始和结束的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,482
精华内容 992
关键字:

vue待办事项事项

vue 订阅