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)


相关推荐

发表回复

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

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