vue3制作简易版todolist（学习笔记）

2021-12-07 19:31:48 阅读：174 来源： 互联网

标签：const todolist handleInputChange list value 简易版 inputvalue vue3 ref

知识点

使用vue3开发todolist
composition api

使用vue3开发todolist

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

<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>

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

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3制作简易版todolist（学习笔记）

知识点

使用vue3开发todolist

Composition API

总结