Vue記事本實(shí)例詳解
更新時(shí)間：2021年06月24日 15:33:35 作者：影修
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)記事本功能的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)例功能點(diǎn)不多，主要難點(diǎn)在于筆記文本對(duì)象數(shù)組的添加，刪除，以及對(duì)組件的綁定同步事件。
核心代碼
<section id="todoapp">
<!-- 輸入框 -->
<header class="header">
<h1>記事本</h1>
<input
v-model="note"
autofocus="autofocus"
autocomplete="off"
placeholder="請(qǐng)輸入任務(wù)"
class="new-todo"
/>
<div style="text-align: right;width: 90%;height: 3%;">
<button value="記錄" style="text-align: center" @click="addnote">記錄</button>
</div>
</header>
<!-- 列表區(qū)域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(n,index) in notes">
<div class="view">
<span class="index">{{index+1}}</span> <label>{{n}}</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 統(tǒng)計(jì)和清空 -->
<footer class="footer">
<span class="todo-count"><strong>{{notes.length}}</strong> items left </span>
<button class="clear-completed" @click="delnote">
Clear
</button>
</footer>
</section>
<script>
let vue = new Vue({
el:"#todoapp",
data:{
note:"好好學(xué)習(xí)，天天向上",
index:0,
notes:[
"寫代碼",
"吃飯飯",
"睡覺(jué)覺(jué)"
]
},
methods:{
addnote:function () {
this.notes.push(this.note);
},
delnote:function () {
this.notes = [];
}
}
});
</script>
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue深拷貝的三種實(shí)現(xiàn)方式：1、通過(guò)遞歸方式實(shí)現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實(shí)現(xiàn)深拷貝,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
vue axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝的實(shí)現(xiàn)
這篇文章主要介紹了vue axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue.config.js中configureWebpack與chainWebpack區(qū)別及說(shuō)明
這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
我們所熟知的Vue.js也在如何提取公共代碼復(fù)用方面也一直在探索優(yōu)化，本文小編就來(lái)和各位聊聊Vue.js代碼復(fù)用的前世今生，希望對(duì)大家學(xué)習(xí)Vue有一定的幫助2023-05-05
ElementUI對(duì)table的指定列進(jìn)行合算
本文主要介紹了ElementUI對(duì)table的指定列進(jìn)行合算，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子
這篇文章主要介紹了詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子，本文整合出具備基礎(chǔ)功能的前端架子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vite+vue3項(xiàng)目集成ESLint與prettier的過(guò)程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中集成ESLint與prettier的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁(yè)面title
今天小編就為大家分享一篇vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁(yè)面title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決
這篇文章主要介紹了vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動(dòng)導(dǎo)入,也支持自定義插件的自動(dòng)導(dǎo)入,是一個(gè)功能強(qiáng)大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-08-08