使用Vue寫一個todoList事件備忘錄經(jīng)典小案例
前言
前幾天無聊用Vue框架寫了一個todoList事件備忘錄小案例,自己感覺挺好玩的，溫馨提示：請大家提前到Vue官網(wǎng)下載一個Vue框架文文件（后續(xù)需要引入到項(xiàng)目里面）,接下類給大家分析一下這個經(jī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ù)據(jù)和內(nèi)容不能寫死，方便后續(xù)添加或修改內(nèi)容，這樣的話使用上面這種方法，你就發(fā)現(xiàn)這個方法效率很低，而且每次修改或者添加新的內(nèi)容的時候都得添加一個<li></li>標(biāo)簽 ，這就很繁瑣，而且效率也不怎么高,那么有沒有一種效率高的方法來實(shí)現(xiàn)對應(yīng)操作呢？事實(shí)證明它是有的。
寫一個容器div,將內(nèi)容全部放入,vue本身不是全局生效,需要指定生效的位置
<div id="app">
<h1>{{title}}</h1>
<!-- 添加一個文本框 -->
<input type="text">
v-on 簡寫 @綁定事件指令 點(diǎn)擊button時觸發(fā) add方法
<button @click="add()">提交</button>
v-for 循環(huán)產(chǎn)生的結(jié)構(gòu)
(item,index) 數(shù)組中內(nèi)容和內(nèi)容對應(yīng)的索引值
in 循環(huán)的數(shù)組
<ul>
<li v-for="(item,index) in lists">
{{item}}
</li>
</ul>
</div>
3、初始化一個vue項(xiàng)目
<script> </script>
//創(chuàng)建一個vue對象
//let 定義一個變量
//用于保存 后方Vue對象
//數(shù)據(jù): 數(shù)組:[1,2,3]
放置同樣類型的元素
//{ // key:value //}//循環(huán)過程中 先要將循環(huán)的數(shù)據(jù),顯示對應(yīng)的結(jié)構(gòu)中 //數(shù)組如何顯示到頁面中： 插值表達(dá)式{{}}
//給提交按鈕添加一個點(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)容、找到對應(yīng)的數(shù)組
//順利開學(xué)?。?！
//直接在數(shù)組中 追加 順利開學(xué)
//如何找到對應(yīng)的數(shù)組?
//this對象 -> vue對象
//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>
<!-- 寫一個容器div,將內(nèi)容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
<div id="app">
<h1>{{title}}</h1>
<!-- 添加一個文本框 -->
<input type="text">
<!-- v-on 簡寫 @綁定事件指令 點(diǎn)擊button時觸發(fā) add方法 -->
<button @click="add()">提交</button>
<ul>
<!-- v-for 循環(huán)產(chǎn)生的結(jié)構(gòu)
(item,index) 數(shù)組中內(nèi)容和內(nèi)容對應(yīng)的索引值
in 循環(huán)的數(shù)組-->
<li v-for="(item,index) in lists">
{{item}}
</li>
</ul>
</div>
<!-- 初始化一個vue項(xiàng)目 -->
<script>
//創(chuàng)建一個vue對象
//let 定義一個變量
//用于保存 后方Vue對象
//數(shù)據(jù): 數(shù)組:[1,2,3] 放置同樣類型的元素
//{
// key:value
//}
//循環(huán)過程中 先要將循環(huán)的數(shù)據(jù),顯示對應(yīng)的結(jié)構(gòu)中
//數(shù)組如何顯示到頁面中： 插值表達(dá)式{{}}
//給提交按鈕添加一個點(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é)
//如何找到對應(yīng)的數(shù)組?
//this對象 -> vue對象
//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>
<!-- 寫一個容器div,將內(nèi)容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
<div id="app">
<h1>{{title}}</h1>
<!-- 添加一個文本框 -->
<input type="text">
<!-- v-on 簡寫 @綁定事件指令 點(diǎn)擊button時觸發(fā) add方法 -->
<button @click="add()">提交</button>
<ul>
<!-- v-for 循環(huán)產(chǎn)生的結(jié)構(gòu)
(item,index) 數(shù)組中內(nèi)容和內(nèi)容對應(yīng)的索引值
in 循環(huán)的數(shù)組-->
<li v-for="(item,index) in lists">
{{item}}
</li>
</ul>
</div>
<!-- 初始化一個vue項(xiàng)目 -->
<script>
//創(chuàng)建一個vue對象
//let 定義一個變量
//用于保存 后方Vue對象
//數(shù)據(jù): 數(shù)組:[1,2,3] 放置同樣類型的元素
//{
// key:value
//}
//循環(huán)過程中 先要將循環(huán)的數(shù)據(jù),顯示對應(yīng)的結(jié)構(gòu)中
//數(shù)組如何顯示到頁面中： 插值表達(dá)式{{}}
//給提交按鈕添加一個點(diǎn)擊事件
let vm=new Vue({
//el:選項(xiàng)
el:"#app",//el綁定生效的區(qū)間
data:{//本次需要哪些數(shù)據(jù)
lists:["放假在家休息兩天","去看升旗儀式","寫一份手抄報","看大典"],
title:"國慶節(jié)快樂"
},
methods:{
add(){
//順利開學(xué)！?。?
//直接在數(shù)組中 追加 順利開學(xué)
//如何找到對應(yīng)的數(shù)組?
//this對象 -> vue對象
//lists
// console.log(this.lists)
this.lists.push("祝生日快樂!!!")
// console.log(1)
}
}
})
</script>
</body>
</html>
總結(jié)
到此這篇關(guān)于使用Vue寫一個todoList事件備忘錄經(jīng)典小案例的文章就介紹到這了,更多相關(guān)Vue todoList事件備忘錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目如何實(shí)現(xiàn)切換主題色思路
這篇文章主要介紹了Vue項(xiàng)目如何實(shí)現(xiàn)切換主題色思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
自定義指令，其實(shí)就是在vue提供的鉤子中寫代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實(shí)現(xiàn)與使用，需要的可以參考一下2023-05-05
Vue?3引入了Composition?API，這是一套新的API用于編寫組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下2023-02-02
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03
下面小編就為大家分享一篇iview日期控件,雙向綁定日期格式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
解決vue 項(xiàng)目引入字體圖標(biāo)報錯、不顯示等問題
今天小編就為大家分享一篇解決vue 項(xiàng)目引入字體圖標(biāo)報錯、不顯示等問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個功能呢？接下來跟隨腳本之家小編一起看看吧2018-03-03
這篇文章主要介紹了vue中的自定義分頁插件組件的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue如何實(shí)現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項(xiàng)目中,使用ElementUI的el-upload組件可以輕松實(shí)現(xiàn)文件上傳功能,通過配置組件參數(shù)和實(shí)現(xiàn)相應(yīng)的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)視數(shù)據(jù)的原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02