知识点

1. 使用vue3开发todolist
2. composition api

 使用vue3开发todolist

1. 定义一个文本框，用来输入todo事件，并且为这个文本框绑定输入事件

2. <script>
      const myview=Vue.creatApp({
          template:'<div>
                      <input :value="inputvalue"@input="handleInputChange"/>
                     </div>'
           setup(){
                const {ref}=Vue;
                let inputvalue=ref('');
                const handleInputChange=(e)=>{inputvalue.value=e.target.value;};
                return{  inputvalue,
                         handleInputChange}}    
        })
       const vm=myview.mount("#mydiv");
   </script>

    

3. 定义一个数组，用来存储代办事项

   <script>
     const app=Vue.creatApp({
        template:'<div> 
                   <input :value="inputvalue" @input="handleInputChange"/>
                   <ul> <li v-for="{item,index} in list" :key="index"/>{ item }</li> </ul>
                   </div>'
         setup(){
           const {ref ,reactive}=Vue;
           let inputvalue=ref("111");
           const handleInputChange=(e)=>{inputvalue.value=e.target.value;}
           const list=reactive(["vue","英语"，"数据结构"]);//用这个响应式数组来存储所有的代办事项
                 },
   
          return{ inputvalue,
                   handleInputChange,
                   list},;
   })
      const vm=app.mount("#mydiv");
   </script>

   4.定义一个按钮，用来将用户输入的事件添加到数组当中去

   <script>
       const app=Vue.creatApp({
         template:'<div>
              <input :value="inputValue" @input="handleInputChange"/>
              <button @click="handleSubmit">提交</button>
              <ul> <li v-for="{item,index} in list" :key="index"> { item }</li></ul>
             </div>',
          setup(){
           const { ref,reavtive}=Vue;
           const inputvalue=ref('');
           const list=reavtive([]);
           const handleInputChange=(e)=>{ inputvalue.value=e.target.value;}
           const handlesubmit=()=>{list.push(inputvalue.value);//将用户输入的事件加入列表
                                    inputvalue.value='';}//清空inputvalue的值}
           return{ inputvalue,
                   list,
                   handleImputCjange,
                   handlesubmit,};
           })
        const vm =app.mount("#mydiv");
   </script>

   5.代码优化，可以将一整套操作封装成为一个函数，实现逻辑复用

   <script> 
     const useinputeffect=()=>{
      const{ref}=Vue;
      const inputvalue=ref('');
      const handleInputChange=(e)=>{inputvalue.value=e.target.value;};
      return {inputvalue,handleInputChange;}   
   }
     const uselisteffect=()=>{
        const{reactive}=Vue;
         const list=reactive([]);
         const addItemToList=(item)=>{list.push(item);item.value='';};
         return{list,addItemToList;}
   }
   
      const app=Vue.creatApp({
          template:'<div>
                <input :value="inputvalue" @input="handleInputChange"/>
                 <button @click="handleSubmit">提交</button>
                <ul> <li v-for="{ item,index } in list" :key={index}> { item }</li>
                    </div>',
            setup(){
             const {inputValue,handleInputChange}=useinputeffect();
             const {list,addItemToList}=uselisteffect();
             const handlesubmit=()=>{
               addItemToList(inputvalue);};
   },
            return{ inputvalue,
                    handleInputChange,
                    addItemToList,
                     list,
                    handleSubmit},     
   
   ;});
    const vm=app.mount("#mydiv");
   </script>

 Composition API

composition的字面意思是组合api，前面我们用过的ref，reactive，setup都属于vue3当中的comoposition api语法，通过使用comoposition，可以更好地维护项目代码，并且提高业务逻辑代码的复用性。

总结

通过本次学习，用vue3制作了一个简单的todolist功能，并且对comoposition api有了一定的了解。 

标签：const,todolist,handleInputChange,list,value,简易版,inputvalue,vue3,ref
来源： https://blog.csdn.net/weixin_44858541/article/details/121765998