正文

vue学习之todolist删除功能(代码片段)

twodoge  twodoge  2023-02-19  318

关键词：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>

    <!-- todolist组件拆分 删除功能
        
        例如当
        <li v-for="(item, index) of list" :key="index">
                item
            </li>
        非常庞大或者复杂的时候，就可以才分出来进行维护

        Vue.component()定义的组件成为全局组件

        var Todo-item 为局部组件,需要再vue中进行注册

        组件和实例之间的关系
        1、每个组件都是vue的一个实例
        2、父组件向子组件传值是通过属性的形式进行的
     -->

    <!-- 此为父组件模板 -->
    <div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item
             v-for="(item, index) of list"
             :key="index"
             :content="item"
             :index="index"
             @delete="handleDelete"
            >
            </todo-item>
        </ul>
    </div>
    
    <script>

        //子组件
        Vue.component('todo-item', 
            props:['content','index'],
            template: '<li @click="handleClick">content</li>',
            methods:
                handleClick: function() 
                    //向外触发一个事件
                    this.$emit('delete', this.index)
                
            
        )

        // var TodoItem = 
        //     template: '<li>item</li>'
        // 

        //父组件
        new Vue(
            el:"#root",
            // components:
            //     'todo-item': TodoItem
            // ,
            data:
                inputValue: 'hello',
                list: []
            ,
            methods: 
                handleSubmit: function() 
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                ,
                handleDelete: function(index)
                    this.list.splice(index, 1)
                
            
        )
    </script>
</body>
</html>

24.vue学习之-变异方法filter与regexp实现评论搜索功能(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="hdcms"><liv-for="... 查看详情

todolist---插入和删除----vue(代码片段)

1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>todolist删除</title>6<linkrel="stylesheet"href="test1.css">7<scripttype="text/javascript" 查看详情

vue学习之vuex(代码片段)

单向数据流概念Vuex介绍解决问题多个视图依赖于同一状态（菜单导航）来自不同视图的行为需要变更为同意状态（例如：评论弹幕）Vuex应运而生为vue.js开发的状态管理模式组件状态集中管理组件状态改变遵循统一的规则store.js//... 查看详情

2.1todolist功能开发(代码片段)

todolist功能开发<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>todolist功能开发</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue. 查看详情

android学习之数据存储全方案(代码片段)

这里写目录标题文件文件存储文件保存文件读入SharedPreferences得到对象的三种方式存储数据读取数据CheckBox控件记住密码功能SQLite数据库存储创建升级添加数据更新数据删除数据查询数据LitePal准备配置添加数据更新数据将所有数... 查看详情

4.vuex学习之gettersmapgetters(代码片段)

gettters可以理解为计算属性在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1constgetters=//vue2.0不要使用箭头函数,getters主要任务就是对状态state对象里面的数据，执行计算后输出count:function(state)ret... 查看详情

基于vue的todolist案例(代码片段)

前言：todolist案例真的算是经典了，不管你是学习原生js，还是学习jq，还是学习vue，亦或者是react，todolist是练习必不可少的练习demo了，下面我们来看看这个案例。需要完整代码的小朋友戳这里获取资... 查看详情

vue.js源码学习之flag篇(代码片段)

TheProgressiveJavaScriptFramework——vuejs.org起因第一次接触Vue.js是因为要做一个通讯录的外包项目，这个项目要有前台展示和中后台管理，从轮子做起肯定是不明智的选择，所以当时初步定下的是Vue.js+ElementUI的技术栈。项目过程很漫... 查看详情

vue.js基础学习之组件

什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性... 查看详情

3.vuex学习之mutationsmapmutations(代码片段)

mutations状态更改　　在mutations对象中创建更改state状态的方法。mapMutations是vuex提供的辅助函数在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1//触发的状态，mutations是同步的constmutations=jian(st 查看详情

5.vuex学习之acrionsmapactions(代码片段)

Action类似于mutation，不同在于：　　1.Action提交的是mutation，而不是直接变更状态。　　2.Action可以包含任意异步操作。在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1,age:10//触发的状态，mutatio... 查看详情

flask学习之基础知识与功能(代码片段)

一：flask的背景介绍Flask是一个基于Python开发并且依赖jinja2模板和WerkzeugWSGI服务的一个微型框架，对于Werkzeug本质是Socket服务端，其用于接收http请求并对请求进行预处理，然后触发Flask框架，开发人员基于Flask框架提供的功能对请... 查看详情

12.vue学习之-循环li,if判断示例讲解class中应用表达式(代码片段)

功能:当点击按键时,改变当前循环数组里的status里的值,判断staus里的当前的值来,切换显示删除和恢复的按钮判断staus里的当前的值来改变span标签里的字体颜色样式<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equ... 查看详情

vue学习之组件(代码片段)

vue官方文档中定义组件通过调用Vue.component方法，一般没使用定义组件一个组件为一个vue文件，包含template（必须有），script，style三部分 //com.vue<templatelang="html"><div>//只能有一个html标签包裹里面所有节点　　　ch... 查看详情

c学习之单向链表的删除与清除操作(代码片段)

我们尝试用for循环，来搜索链表中的某个元素。在搜到数据的同时能否将其删除呢？链表删除的原理：如图所示，只需将待删除节点的上一个节点指向下一个节点即可（部分代码如下）scanf("%d",&num... 查看详情

vue学习之vue属性绑定和双向数据绑定(代码片段)

···<!DOCTYPEhtml>vue<divid="root"><div:title="title">himan</div><inputv-model="content&quo... 查看详情

flutter学习之混合开发(代码片段)

Flutter学习之混合开发1.调用原生功能1.1Camera（已有三方插件支持直接调用）1.1.1添加依赖1.1.2平台配置1.1.3代码实现1.2电池信息（没有三方插件支持，需要编写原生代码）1.2.1平台通过介绍1.2.2创建测试项目1.2.3... 查看详情

#yyds干货盘点#react笔记之学习之完成删除功能

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情