这里是用一个vue和vuex写的简单的一个备忘录。 vue:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script> <script src="./vuex.min.js"></script> <script> window.onload=function(){ new Vue({ el:"#app", data:{ // 备忘录信息 msg:"", index:1, // 用来存放所有备忘录信息的数组 list:[] }, methods:{ addMemo(){ // 一条备忘录信息的内容 // 将ID，信息，时间封装，都为变量。 var diary={ id:this.index, msg:this.msg, // 获取到当前时间 // new Date（）为对象，转换成字符串类型 time:new Date().toLocaleString() } //追加List中的信息 this.list.push(diary); //完成备忘录信息之后清空 this.msg=""; //ID自加 this.index++; }, delMemo(id){ //返回删除后的List信息 //通过过滤来删除id //箭头函数 this.list=this.list.filter((item)=>{return item.id!=id}) } } }) } </script> <style> h2{ color:#666; text-align: center; } form{ width:300px; height:50px; background-color: rgba(189, 187, 187, 0.349); margin :auto; text-align: center; line-height: 50px; border-radius: 40px; } ul{ list-style:none; } li{ text-align: center; background-color: rgba(202, 199, 199, 0.322); box-shadow: 2px 2px 2px rgb(221, 221, 221); margin:5px; } </style> </head> <body> <div id="app"> <h2>备忘录</h2> <!-- #是为了防止跳转 --> <!-- prevent阻止表单的默认跳转行为 --> <form action="#" @submit.prevent="addMemo"> <!-- 编写备忘录 --> <!-- 双向数据绑定 --> <input type="text" placeholder="请记录信息" v-model="msg"> <!-- 表单提交 --> <input type="submit" value="完成"> </form> <ul> <li v-for="item in list"> <span>{{item.id}}.</span> <span>{{item.msg}}</span> <span>{{item.time}}</span> <!-- 通过id来删除信息 --> <input type="submit" value="删除" @click.prevent="delMemo(item.id)"> </li> </ul> </div> </body> </html> vuex: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script> <script src="./vuex.min.js"></script> <script src="./jquery-3.5.0.min.js"></script> <script> window.onload=function(){ //1、实例化 var store=new Vuex.Store({ state:{ //数据维护 list:[] }, getters:{ //获取器 list:state=>state.list, //相当于下面的函数 // list:function(state){ // return state.list // } }, mutations:{ //突变(同步请求) addMemo(state,diary){ state.list.push(diary); }, delMemo(state,id){ state.list=state.list.filter((item)=>{ return item.id!=id }) } }, actions:{ //动作(异步请求) // getData(context,diary){ // $.ajax({ // url:'http://39.106.221.65:7788/baseUser/findAll', // success:function(data){ // // console.log(data) // context.commit("addMemo",diary); // } // }) // } } }) //2、注入到vue实例中 new Vue({ el:"#app", store,//注入状态机 data:{ msg:'', index:1 }, //定义list computed:{ list:function(){ //1、直接获取到list--数据 // return this.$store.state.list //2、通过getters获取到list--函数 return this.$store.getters.list } }, methods:{ addMemo(){ var diary={ id:this.index, msg:this.msg, time:new Date().toLocaleString() } //1、触发突变->改变state->维护list(同步) this.$store.commit("addMemo",diary); //2、触发动作->触发突变->改变state(异步) // this.$store.dispatch("getData",diary) this.msg=""; this.index++; }, delMemo(id){ //触发突变->修改atate this.$store.commit("delMemo",id); } } }) } </script> <style> h2{ color:#666; text-align: center; } form{ width:300px; height:50px; background-color: rgba(189, 187, 187, 0.349); margin :auto; text-align: center; line-height: 50px; border-radius: 40px; } ul{ list-style:none; } li{ text-align: center; background-color: rgba(202, 199, 199, 0.322); box-shadow: 2px 2px 2px rgb(221, 221, 221); margin:5px; } </style> </head> <body> <div id="app"> <h2>备忘录</h2> <form action="#" @submit.prevent="addMemo"> <input type="text" v-model='msg'> <input type="submit" value="保存"> </form> <ul> <li v-for='item in list'> <span>{{item.id}}、</span> <span>{{item.msg}}、</span> <span>{{item.time}}</span> <a href="#" @click.prevent='delMemo(item.id)'>删除</a> </li> </ul> </div> </body> </html>