zoukankan      html  css  js  c++  java
  • Vue全家桶--06 ToDoMVC

    Vue全家桶--06 ToDoMVC

    6.1 项目介绍与演示

    6.2 需求说明

    6.3 下载与导入模板

    6.4 初始化项目

    6.5 数据列表渲染

    6.5.1 功能分析

    6.5.2 有数据列表功能实现

    app.js声明一个存储任务数据的数组items,并初始化一些数据,注意ES6的写法

    (function (Vue) {//表示依赖了全局的 Vue, 其实不加也可以,只是更加明确点
        
        //const 表示申明的变量是不可变得,ES6
        const items=[
            {
                id:1,
                content:'Vue/js',
                completed:false
            },
            {
                id:2,
                content:'java',
                completed:false
            },
            {
                id:3,
                content:'C#',
                completed:true
            }
        ]
    
        new Vue({
            el:'#todoapp',
            data:{
                title:'Hello,todos',
                items // 对象属性简写,等价于items: items
            }
    
        });
    
    })(Vue);

    修改html页面

    <ul class="todo-list">
                        <!-- 
                            三种状态:未完成(没有样式),已完成(.completed),编辑中(.editing)
                         -->
                         <!-- 修改1.v-for迭代;2.:class={key为class样式名,value为获取的数据true或false} -->
                        <li v-for='(item,index) in items' :class="{completed:item.completed}">
                            <div class="view">
                                <!-- 修改:1.v-model绑定状态值是否选中 -->
                                <input class="toggle" type="checkbox" v-model="item.completed">
                                <!-- 修改:1.{{content}}显示内容 -->
                                <label>{{item.content}}</label>
                                <!-- 修改:1. :value 绑定id删除 -->
                                <button class="destroy" :value="item.id"></button>
                            </div>
                            <input class="edit" value="Create a TodoMVC template">
                        </li>
                    </ul>

    6.5.3 无数据列表功能实现

    **原标签直接添加 v-show 方式

    <!-- item.length 当值为0时,表示false,则不显示 -->
                <section class="main" v-show="items.length">
                    <input id="toggle-all" class="toggle-all" type="checkbox">
                    <label for="toggle-all">Mark all as complete</label>
                    <ul class="todo-list">
                        <!-- 
                            三种状态:未完成(没有样式),已完成(.completed),编辑中(.editing)
                         -->
                         <!-- 修改1.v-for迭代;2.:class={key为class样式名,value为获取的数据true或false} -->
                        <li v-for='(item,index) in items' :class="{completed:item.completed}">
                            <div class="view">
                                <!-- 修改:1.v-model绑定状态值是否选中 -->
                                <input class="toggle" type="checkbox" v-model="item.completed">
                                <!-- 修改:1.{{content}}显示内容 -->
                                <label>{{item.content}}</label>
                                <!-- 修改:1. :value 绑定id删除 -->
                                <button class="destroy" :value="item.id"></button>
                            </div>
                            <input class="edit" value="Create a TodoMVC template">
                        </li>
                    </ul>
                </section>
                <!-- item.length 当值为0时,表示false,则不显示 -->
                <footer class="footer" v-show="items.length">

    **添加一个div标签 再加上v-show 方式

    <!-- item.length 当值为0时,表示false,则不显示 -->
            <div v-show="items.length">
                <section class="main">
                    <input id="toggle-all" class="toggle-all" type="checkbox">
                    <label for="toggle-all">Mark all as complete</label>
                    <ul class="todo-list">
                        <!-- 
                            三种状态:未完成(没有样式),已完成(.completed),编辑中(.editing)
                         -->
                        <!-- 修改1.v-for迭代;2.:class={key为class样式名,value为获取的数据true或false} -->
                        <li v-for='(item,index) in items' :class="{completed:item.completed}">
                            <div class="view">
                                <!-- 修改:1.v-model绑定状态值是否选中 -->
                                <input class="toggle" type="checkbox" v-model="item.completed">
                                <!-- 修改:1.{{content}}显示内容 -->
                                <label>{{item.content}}</label>
                                <!-- 修改:1. :value 绑定id删除 -->
                                <button class="destroy" :value="item.id"></button>
                            </div>
                            <input class="edit" value="Create a TodoMVC template">
                        </li>
                    </ul>
                </section>
                <footer class="footer">
                    <!-- This should be `0 items left` by default -->
                    <span class="todo-count"><strong>0</strong> item left</span>
                    <!-- Remove this if you don't implement routing -->
                    <ul class="filters">
                        <li>
                            <a class="selected" href="#/">All</a>
                        </li>
                        <li>
                            <a href="#/active">Active</a>
                        </li>
                        <li>
                            <a href="#/completed">Completed</a>
                        </li>
                    </ul>
                    <!-- Hidden if no completed items are left ↓ -->
                    <button class="clear-completed">Clear completed</button>
                </footer>
            </div>

    **template 与 v-if 结合使用的方式

    <!-- template元素,页面渲染之后这个template元素就不会有,
            需要使用 v-if 与 template搭配,如果使用 v-show 是不行的 -->
            <template v-if="items.length">
                <section class="main">
                    <input id="toggle-all" class="toggle-all" type="checkbox">
                    <label for="toggle-all">Mark all as complete</label>
                    <ul class="todo-list">
                        <!-- 
                            三种状态:未完成(没有样式),已完成(.completed),编辑中(.editing)
                         -->
                        <!-- 修改1.v-for迭代;2.:class={key为class样式名,value为获取的数据true或false} -->
                        <li v-for='(item,index) in items' :class="{completed:item.completed}">
                            <div class="view">
                                <!-- 修改:1.v-model绑定状态值是否选中 -->
                                <input class="toggle" type="checkbox" v-model="item.completed">
                                <!-- 修改:1.{{content}}显示内容 -->
                                <label>{{item.content}}</label>
                                <!-- 修改:1. :value 绑定id删除 -->
                                <button class="destroy" :value="item.id"></button>
                            </div>
                            <input class="edit" value="Create a TodoMVC template">
                        </li>
                    </ul>
                </section>
                <footer class="footer">
                    <!-- This should be `0 items left` by default -->
                    <span class="todo-count"><strong>0</strong> item left</span>
                    <!-- Remove this if you don't implement routing -->
                    <ul class="filters">
                        <li>
                            <a class="selected" href="#/">All</a>
                        </li>
                        <li>
                            <a href="#/active">Active</a>
                        </li>
                        <li>
                            <a href="#/completed">Completed</a>
                        </li>
                    </ul>
                    <!-- Hidden if no completed items are left ↓ -->
                    <button class="clear-completed">Clear completed</button>
                </footer>
            </template>

    6.6 添加任务

    文本框中可添加新的任务;内容不能为空;enter添加,添加完清空文本框

    <!-- 添加任务,keyup.enter 回车键监听 -->
                <input class="new-todo" @keyup.enter="addItem" placeholder="What needs to be done?" autofocus>
    new Vue({
            el: '#todoapp',
            data: {
                title: 'Hello,todos',
                items // 对象属性简写,等价于items: items
            },
            methods: {
                addItem(event) { //对象属性函数简写,等价于addItem:function(){} ES6
                    
                    const content = event.target.value.trim();//获取文本框输入的数据,去除空格
                    const id = this.items.length;//生成id
    
                    if (content.length > 0) {//输入框不为空添加到数组中
                        this.items.push({
                            id,//ES6 等价于id:id
                            content,
                            completed: false
                        });
                    } else { return; }
    
                    event.target.value='';//清空文本
    
                }
            }
    
        });

    6.7 显示所有未完成任务数

     计算属性来完成

    <span class="todo-count"><strong>{{remaining}}</strong> item{{remaining === 1?'':'s'}} left</span>
    new Vue({
            el: '#todoapp',
            data: {
                title: 'Hello,todos',
                items // 对象属性简写,等价于items: items
            },
            computed: {
                remaining() {
                    const unItems =
                        this.items.filter(item => {
                            return !item.completed;
                        });
                    //console.log(unItems);
                    return unItems.length;
                }
            },
            methods: {
                addItem(event) { //对象属性函数简写,等价于addItem:function(){} ES6
                    const content = event.target.value.trim();//获取文本框输入的数据,去除空格
                    const id = this.items.length;//生成id
                    if (content.length > 0) {//输入框不为空添加到数组中
                        this.items.push({
                            id,//ES6 等价于id:id
                            content,
                            completed: false
                        });
                    } else { return; }
                    event.target.value = '';//清空文本
                }
            }
    
        });

    6.8 切换所有任务状态

    计算属性--toggleAll

    双向绑定计算属性

    <input id="toggle-all" v-model="toggleAll" class="toggle-all" type="checkbox">
    toggleAll: {
                    //当任务列表 中的状态发生变化之后,则更新复选框的状态
                    get() {
                        return this.remaining === 0;
                    },
                    //当复选框的状态更新之后,则将任务列表中的状态更新
                    set(newValue) { //newValue 当计算属性toggleAll改变时,newValue获取改变后的值
    
                        //当点击复选框之后,复选框的值会发生改变,就会触发set方法调用
                        //将迭代出数组中的所有任务项,然后将当前复选框的状态值赋值给每一个任务的状态值
                        this.items.forEach(item => {
                            item.completed = newValue;
                        });
                    }
                }

    6.9 移除任务项

    removeItem函数

    <button class="destroy" :value="item.id" @click="removeItem(index)"></button>
        //移除任务项
                removeItem(index) { 
                    console.log(index);
                    this.items.splice(index, 1);
                }

    6.10 清楚所有已完成的任务

     添加一个 removecompleted 函数绑定到 清楚已完成任务按钮上,并且添加v-show标签

    <button v-show="items.length > remaining" @click="removecompleted" class="clear-completed">Clear completed</button>
    removecompleted(){
                   this.items =    this.items.filter( item => !item.completed);
                }

    6.11 编辑任务项

    6.12 路由状态切换(过滤不同状态数据)

    6.13 数据持久化

    You are never too old to set another goal or to dream a new dream!!!
  • 相关阅读:
    字典-字典练习
    元组
    切片
    列表-列表练习
    一个登录小程序
    py定义变量-循环-条件判断
    charles抓包
    接口测试-Http状态码-postman上传文件
    jm解决乱码问题-参数化-数据库操作-文件上传下载
    (二)CRLF注入
  • 原文地址:https://www.cnblogs.com/youguess/p/15456849.html
Copyright © 2011-2022 走看看