使用Vue寫一個(gè)todoList事件備忘錄經(jīng)典小案例

更新時(shí)間：2022年10月27日 11:31:09 作者：愛笑的陳sir

學(xué)習(xí)了幾天Vue之后終于迎來了第一個(gè)小案例,todoList是非常常見地一個(gè)小案例,下面這篇文章主要給大家介紹了關(guān)于使用Vue寫一個(gè)todoList事件備忘錄經(jīng)典小案例的相關(guān)資料,需要的朋友可以參考下

前言

前幾天無聊用Vue框架寫了一個(gè)todoList事件備忘錄小案例,自己感覺挺好玩的，溫馨提示：請(qǐng)大家提前到Vue官網(wǎng)下載一個(gè)Vue框架文文件（后續(xù)需要引入到項(xiàng)目里面）,接下類給大家分析一下這個(gè)經(jīng)典小案例：

Vue.js官網(wǎng)

1、基本寫法

   </head>
<body>
    <ul>
        <li>
            14天核酸檢測
        </li>
        <li>
            9.3開學(xué)
        </li>
        <li>
            開學(xué)第一課
        </li>
    </ul>

input文本框

button按鈕

<button>提交</button>

2、實(shí)際運(yùn)用開發(fā)

在實(shí)際運(yùn)用開發(fā)時(shí)，我們的數(shù)據(jù)和內(nèi)容不能寫死，方便后續(xù)添加或修改內(nèi)容，這樣的話使用上面這種方法，你就發(fā)現(xiàn)這個(gè)方法效率很低，而且每次修改或者添加新的內(nèi)容的時(shí)候都得添加一個(gè)<li></li>標(biāo)簽 ，這就很繁瑣，而且效率也不怎么高,那么有沒有一種效率高的方法來實(shí)現(xiàn)對(duì)應(yīng)操作呢？事實(shí)證明它是有的。

寫一個(gè)容器div,將內(nèi)容全部放入,vue本身不是全局生效,需要指定生效的位置

<div id="app">
 <h1>{{title}}</h1>
<!-- 添加一個(gè)文本框 -->
<input type="text">

v-on 簡寫 @綁定事件指令點(diǎn)擊button時(shí)觸發(fā) add方法

<button @click="add()">提交</button>

v-for 循環(huán)產(chǎn)生的結(jié)構(gòu)
(item,index) 數(shù)組中內(nèi)容和內(nèi)容對(duì)應(yīng)的索引值
in 循環(huán)的數(shù)組

   <ul>
      <li v-for="(item,index) in lists">
          {{item}}
      </li>
   </ul> 
    </div>

3、初始化一個(gè)vue項(xiàng)目

<script>

</script>

//創(chuàng)建一個(gè)vue對(duì)象
//let 定義一個(gè)變量
//用于保存后方Vue對(duì)象
//數(shù)據(jù): 數(shù)組:[1,2,3]
放置同樣類型的元素
//{ // key:value //}

//循環(huán)過程中先要將循環(huán)的數(shù)據(jù),顯示對(duì)應(yīng)的結(jié)構(gòu)中 //數(shù)組如何顯示到頁面中：插值表達(dá)式{{}}
//給提交按鈕添加一個(gè)點(diǎn)擊事件

let vm=new Vue({
       //el:選項(xiàng)
       el:"#app",//el綁定生效的區(qū)間
       data:{//本次需要哪些數(shù)據(jù)
          lists:["14天核酸檢測","開學(xué)9.3","開學(xué)第一課","專接本"],
          title:"希望可以順利開學(xué)"
      
        },
        methods:{
            add(){

4、如何在數(shù)組中追加內(nèi)容、找到對(duì)應(yīng)的數(shù)組

//順利開學(xué)?。?！
//直接在數(shù)組中追加順利開學(xué)
//如何找到對(duì)應(yīng)的數(shù)組?
//this對(duì)象 -> vue對(duì)象
//lists

console.log(this.lists)

                this.lists.push("順利開學(xué)!!!")
                // console.log(1)
                
            }
        }
   })

5、todoList事件備忘錄源碼分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <script src="js/vue221.js"></script>
</head>
<body>
    <!-- 寫一個(gè)容器div,將內(nèi)容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
    <div id="app">
        <h1>{{title}}</h1>
    <!-- 添加一個(gè)文本框 -->
    <input type="text">
    <!-- v-on  簡寫 @綁定事件指令  點(diǎn)擊button時(shí)觸發(fā) add方法 -->
    <button @click="add()">提交</button>
   <ul>
       <!-- v-for 循環(huán)產(chǎn)生的結(jié)構(gòu) 
       (item,index) 數(shù)組中內(nèi)容和內(nèi)容對(duì)應(yīng)的索引值
       in 循環(huán)的數(shù)組--> 
      <li v-for="(item,index) in lists">
          {{item}}
      </li>
   </ul> 
    </div>
    <!-- 初始化一個(gè)vue項(xiàng)目 -->
    <script>
   //創(chuàng)建一個(gè)vue對(duì)象
   //let 定義一個(gè)變量
   //用于保存 后方Vue對(duì)象
   //數(shù)據(jù): 數(shù)組:[1,2,3] 放置同樣類型的元素
   //{
   //    key:value
   //}
   //循環(huán)過程中 先要將循環(huán)的數(shù)據(jù),顯示對(duì)應(yīng)的結(jié)構(gòu)中
   //數(shù)組如何顯示到頁面中： 插值表達(dá)式{{}}
   //給提交按鈕添加一個(gè)點(diǎn)擊事件
   let vm=new Vue({
       //el:選項(xiàng)
       el:"#app",//el綁定生效的區(qū)間
       data:{//本次需要哪些數(shù)據(jù)
          lists:["14天檢測","開學(xué)9.3","開學(xué)第一課","專接本"],
          title:"希望可以順利開學(xué)"
      
        },
        methods:{
            add(){
                //順利開學(xué)！??！
                //直接在數(shù)組中  追加  順利開學(xué)
                //如何找到對(duì)應(yīng)的數(shù)組?
                //this對(duì)象 -> vue對(duì)象
                //lists
                // console.log(this.lists)
                this.lists.push("順利開學(xué)!!!")
                // console.log(1)
            }
        }
   })
    </script>
</body>
</html>

6、祖國母親七十三周年生日快樂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <script src="js/vue221.js"></script>
</head>
<body>
    <!-- 寫一個(gè)容器div,將內(nèi)容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
    <div id="app">
        <h1>{{title}}</h1>
    <!-- 添加一個(gè)文本框 -->
    <input type="text">
    <!-- v-on  簡寫 @綁定事件指令  點(diǎn)擊button時(shí)觸發(fā) add方法 -->
    <button @click="add()">提交</button>
   <ul>
       <!-- v-for 循環(huán)產(chǎn)生的結(jié)構(gòu) 
       (item,index) 數(shù)組中內(nèi)容和內(nèi)容對(duì)應(yīng)的索引值
       in 循環(huán)的數(shù)組--> 
      <li v-for="(item,index) in lists">
          {{item}}
      </li>
   </ul> 
    </div>
    <!-- 初始化一個(gè)vue項(xiàng)目 -->
    <script>
   //創(chuàng)建一個(gè)vue對(duì)象
   //let 定義一個(gè)變量
   //用于保存 后方Vue對(duì)象
   //數(shù)據(jù): 數(shù)組:[1,2,3] 放置同樣類型的元素
   //{
   //    key:value
   //}
   //循環(huán)過程中 先要將循環(huán)的數(shù)據(jù),顯示對(duì)應(yīng)的結(jié)構(gòu)中
   //數(shù)組如何顯示到頁面中： 插值表達(dá)式{{}}
   //給提交按鈕添加一個(gè)點(diǎn)擊事件
   let vm=new Vue({
       //el:選項(xiàng)
       el:"#app",//el綁定生效的區(qū)間
       data:{//本次需要哪些數(shù)據(jù)
          lists:["放假在家休息兩天","去看升旗儀式","寫一份手抄報(bào)","看大典"],
          title:"國慶節(jié)快樂"
      
        },
        methods:{
            add(){
                //順利開學(xué)?。?！
                //直接在數(shù)組中  追加  順利開學(xué)
                //如何找到對(duì)應(yīng)的數(shù)組?
                //this對(duì)象 -> vue對(duì)象
                //lists
                // console.log(this.lists)
                this.lists.push("祝生日快樂!!!")
                // console.log(1)
            }
        }
   })
    </script>
</body>
</html>