vue todolist案例_nodejs mvc

vue todolist案例_nodejs mvc1.应用模板下载:TodoMVC案例官网:http://todomvc.com如图下载模板:2.npm安装依赖通过nmp安装相关依赖,进入vscode,找到文件,右键点击在集成终端中打开,输入命令npmi进行安装;并且安装npmivue@2.6.103.引入Vue.js我们在app.js中编写Vue代码,所以要在app.js前面引入4.数据渲染4.1当任务列表(items)没有数据时,#main和#footer标识的标签应该被..

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1.应用模板下载:

TodoMVC 案例官网:http://todomvc.com

如图下载模板:

vue todolist案例_nodejs mvc

2. npm安装依赖

通过 nmp 安装相关依赖,进入vs code ,找到文件,右键点击在集成终端中打开,输入命令npm i进行安装;并且安装npm i vue@2.6.10

3.引入Vue.js

 我们在 app.js 中编写Vue代码,所以要在 app.js 前面引入

 vue todolist案例_nodejs mvc

4.数据渲染

4.1当任务列表(items )没有数据时, #main 和#footer 标识的标签应该被隐藏

            vue todolist案例_nodejs mvc

 

4.2 

  1. 在最上面的文本框中添加新的任务。

  2. 不允许添加非空数据。

  3. 按Enter键添加任务列表中,并清空文本框。

  4. 当加载页面后文本框自动获得焦点,在 input 上使用 autofocus 属性可获得。

vue todolist案例_nodejs mvc

 

 4.3

  1. 左下角要显示未完成的任务数量。确保数字是由<strong>标签包装的。

  2. 还要将item单词多元化( 1 没有s , 其他数字均有s ): 0 items , 1 item ,2 items

 vue todolist案例_nodejs mvc

 

 4.4

vue todolist案例_nodejs mvc

 

4.5

  1. 单击右下角Clear completed按钮时,移除所有已完成任务。

  2. 单击Clear completed按钮后,确保复选框清除了选中状态

  3. 当列表中没有已完成的任务时,应该隐藏Clear completed按钮。

vue todolist案例_nodejs mvc

 

4.6

  1. 双击<label>(某个任务项)进入编辑状态(在<li>上通过.editing进行切换状态)。

  2. 进入编辑状态后输入框显示原内容,并获取编辑焦点。

  3. 输入状态按Esc 取消编辑, editing 样式应该被移除。

  4. 按Enter键 或 失去焦点时 保存改变数据,移除editing 样式;

vue todolist案例_nodejs mvc

 

4.7

根据点击的不同状态( All / Active / Completed ),进行过滤出对应的任务,并进行样式的切换。

vue todolist案例_nodejs mvc

 

4.8

将所有任务项数据持久化到localStorage中,它主要是用于本地存储数据。

完整代码展示

index.html:

<!doctype html>

<html lang=”en”>

    <head>

        <meta charset=”utf-8″>

        <meta name=”viewport” content=”width=device-width, initial-scale=1″>

        <title>Template • TodoMVC</title>

        <link rel=”stylesheet” href=”node_modules/todomvc-common/base.css”>

        <link rel=”stylesheet” href=”node_modules/todomvc-app-css/index.css”>

        <!– CSS overrides – remove if you don’t need it –>

        <link rel=”stylesheet” href=”css/app.css”>

       

    <body>

        <section class=”todoapp” id=”todoapp” >

            <header class=”header”>

                <h1>todos</h1>

                <input @keyup.enter=”additem” class=”new-todo” placeholder=”What needs to be done?” v-todoappfocus>

            </header>

            <!– This section should be hidden by default and shown when there are todos –>

            <section class=”main” v-show=”items.length” >

                <input id=”toggle-all” class=”toggle-all” type=”checkbox”  v-model=”toggleall”>

                <label for=”toggle-all”>Mark all as complete</label>

                <ul class=”todo-list” >

                    <!– These are here just to show the structure of the list items –>

                    <!– List items should get the class `editing` when editing and `completed` when marked as completed –>

                    <li v-for=”(item,index) in filterArr” :key=”index” :class=”{completed:item.completed,editing:currentItem==item}” >

                        <div class=”view”>

                            <input class=”toggle” type=”checkbox” v-model=”item.completed”  >

                            <label @dblclick=”editItem(item)”>{
{item.content}}</label>

                            <button class=”destroy” @click=”clearitem(index)”></button>

                        </div>

                        <input class=”edit” v-model=”item.content”   v-todofocus=”currentItem==item”

                        @keyup.enter=”saveItem(index)” @keyup.esc=”escItem” @keyup.esc=”escItem”>

                    </li>

                </ul>

            </section>

            <!– This footer should hidden by default and shown when there are todos –>

            <footer class=”footer” v-show=”items.length”>

                <!– This should be `0 items left` by default –>

                <span class=”todo-count”><strong>{
{itemcount}}</strong> item{
{itemcount>1?’s’:”}} left</span>

                <!– Remove this if you don’t implement routing –>

                <ul class=”filters” >

                    <li>

                        <a  :class=”{selected:filterStatus==”}” href=”#/” >All</a>

                    </li>

                    <li>

                        <a :class=”{selected:filterStatus==’active’}” href=”#/active”>Active</a>

                    </li>

                    <li>

                        <a :class=”{selected:filterStatus==’completed’}” href=”#/completed”>Completed</a>

                    </li>

                </ul>

                <!– Hidden if no completed items are left ↓ –>

                <button class=”clear-completed” @click=”clearcompleted”>Clear completed</button>

            </footer>

        </section>

        <footer class=”info”>

            <p>Double-click to edit a todo</p>

            <!– Remove the below line ↓ –>

            <p>Template by <a href=”http://sindresorhus.com”>Sindre Sorhus</a></p>

            <!– Change this out with your name and url ↓ –>

            <p>Created by <a href=”http://todomvc.com”>you</a></p>

            <p>Part of <a href=”http://todomvc.com”>TodoMVC</a></p>

        </footer>

        <!– Scripts here. Don’t remove ↓ –>

        <script src=”node_modules/todomvc-common/base.js”></script>

        <script src=”../node_modules/vue/dist/vue.js”></script>

        <script src=”js/app.js”></script>

    </body>

</html>

app.js:

// (function (window) {

//  ‘use strict’;

//  // Your starting point. Enjoy the ride!

// })(window);

(function(Vue){

     //本地数据保存

    var itemStorage={

        fetch(){

            return JSON.parse(localStorage.getItem(‘todo-vuejs’) || ‘[]’);

        },

        save(datas){

            localStorage.setItem(‘todo-vuejs’,JSON.stringify(datas));

        }

    }

   //全局指令,自动获取焦点

    Vue.directive(‘todoappfocus’,

    {

        inserted:function(el){

            el.focus()

        }

    })

   

   

    var app=new Vue({

        el:’#todoapp’,

        data:{

            items:itemStorage.fetch(),

            currentItem:null,

            filterStatus:”

           

        },

        //局部指令,自动获取焦点

        directives:{

            ‘todofocus’:{

                update:function(el,binding){

                   

                    el.focus()

                }

            }

        }

       

        ,

        methods: {

            //添加任务项

            additem(event){

                const  content= event.target.value.trim()

                //获取到input标签的value值

                if(!content.length){

                    return false

                }

                var id=this.items.length+1;

                this.items.push({

                    id:id,

                    content:content,

                    completed:false

                })

                event.target.value=”

            },

            //清除单个li标签

            clearitem(index){

                this.items.splice(index,1)

            },

            //清除已完成的li标签

            clearcompleted(){

                this.items=this.items.filter(function(item){

                    return !item.completed

                })

            },

            //编辑数据

            editItem(item){

                this.currentItem=item

            },

            //保存数据,按enter退出编辑

            saveItem(item){

                if(!event.target.value){

                    return

                }

             item.content=event.target.value.trim()

             this.currentItem=null

            },

            //按esc退出编辑

            escItem(){

                this.currentItem=null

            }

           

           

        },

        computed:{

            //计算未完成数目

            itemcount(){

                return this.items.filter(function(item){

                    return !item.completed

                }).length

                //filter() 不会改变原始数组

            },

            toggleall:{

                 //当全部被勾选,全选项被勾选

                get:function(){if(this.items.filter(function(item){

                    return !item.completed

                }).length>0)

                return false;

                else return true;},

                //全选项被勾选,子选项被赋予newvalue值:true

                set:function(newValue){

                    this.items.forEach((item) => {

                        item.completed = newValue

                    })

                }

               

               

            },

            //判断路由状态

            filterArr(){

                switch(this.filterStatus){

                    case “active”:return this.items.filter(item=>

                        !item.completed

                    )

                    break;

                    case “completed”:return this.items.filter(item=>

                        item.completed

                    );

                    break;

                    default:return this.items

                }

            }

           

        }

    })

    window.οnhashchange=function(){

        app.filterStatus=window.location.hash.substr(2)

        //获取点击的路由hash

       

    }

    window.onhashchange();

})(Vue)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194830.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ps磨皮滤镜插件Portraiture 3

    ps磨皮滤镜插件Portraiture 3Photoshop必备滤镜插件,Portraiture3formac(ps磨皮滤镜插件)是一款支持自动皮肤平滑、愈合和增强效果的磨皮插件,portraiture3主要针对人像进行皮肤修饰、磨皮润色等处理,还可以平滑和去除缺陷,同时保留皮肤纹理和重要的人像细节,功能十分强大,安装即为激活成功教程版。ps磨皮滤镜插件特色介绍Photoshop的画像消除了选择性蒙版和逐像素处理的繁琐的手工劳动,以帮助您在肖像修饰中实现卓越。Imagenomic发布了Photoshop的磨皮滤镜Portraiture

  • shell脚本实际运用_shell脚本调用另一个脚本

    shell脚本实际运用_shell脚本调用另一个脚本日常中常用的Linux脚本

  • Burp Suite安装配置详解(附Java 环境安装)

    Burp Suite安装配置详解(附Java 环境安装)BurpSuite安装配置详解1.Java安装与环境配置详解1.0下载JavaSDK1.8最新版2.0配置Java环境变量功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,…

  • javascript中条件运算符判断成年_c语言中条件运算符

    javascript中条件运算符判断成年_c语言中条件运算符条件运算符也称三木运算符,三元运算符;例题:// 是否年满18岁 varnum=+prompt(‘请输入年龄’); num>=18&&num>0?alert(‘你已成年’):alert(‘你未满18岁’); // 从两个数中找最大值 varnum1=+prompt(‘输入第一个数字’); varnum2=+prompt(‘输入…

  • 在线网站客服系统源码

    在线网站客服系统源码在线网站客服系统源码支持ios苹果/Android安卓软件/app开发包装编号:9738655242264144小心心

  • Java获取当前时间年月日_JS得出当前年月日时间的代码

    Java获取当前时间年月日_JS得出当前年月日时间的代码packagecom.ob;importjava.text.ParseException;importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;publicclassDateTest{ publicstaticvoidmain(String[]args)

    2022年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号