初學Vue練手的簡易todolist

阿新 • • 發佈：2018-12-25

此簡易Demo就不寫樣式了，主要是熟悉Vue的指令

功能：新增、刪除待辦事項
這裡寫圖片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>簡易todolistDemo</h2 
>
        <input type="text" v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <p>待辦事項:</p>
        <ul>
            <todo-item v-for="(item,index) in list"
                :key="index"
                :content="item"
                :index 
="index"
                @delete="handleDelete">
            </todo-item>
        </ul>

    </div>
<script>

    Vue.component('todo-item',{
        props:['content','index'],
        template:'<li @click="handleClick">{{content}}</li>',
        methods:{
            handleClick:function 
(){
                this.$emit('delete',this.index);
            }
        }
    });

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue);
                this.inputValue = '';
            },
            handleDelete:function(index){
                this.list.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

初學Vue練手的簡易todolist

此簡易Demo就不寫樣式了，主要是熟悉Vue的指令功能：新增、刪除待辦事項 <!DOCTYPE html> <html> <head lang="en"&

vue練手小項目--眼鏡在線試戴

keywords div 地址 == pro 另一個包括 .sh nbsp 最近看到了一個眼鏡在線試戴小項目使用純js手寫的，本人剛學習vue.js沒多久，便試試用vue做做看了，還沒完善。其中包括初始圖片加載，使用keywords查找，父子組件之間傳遞信息，子組件之間

java初學基礎班經典練手小程式300例

本文轉載於http://blog.sina.com.cn/s/blog_7192f33401016v43.html 一.函式 1. ********************************************************************************

初學Python不知道做什麼專案好？來看看練手專案如何？

對於初學者來說，在學習程式設計的初期，由於基礎知識點的學習是比較無聊的，所以大家可能會有所反感，為了減弱大家的反感，我給大家帶來一個簡單的小專案——實現屏保計時器，這個專案就算是剛學Python的小夥伴，我相信也能做出來。我們先來看看效果吧！是不

js初學練手：Csdn Ads Cleaner

這裡啦：https://greasyfork.org/zh-CN/scripts/376621-csdn-ads-cleaner 隔壁csdn的廣告太猖獗啦！寫個js管管它需配合TemperMonkey使用，點選左上角的按鈕就可以清除廣告。 V1.0程式碼： /

vue.js搭建使用者管理系統練手（二）----頁面框架搭建

專案程式碼完整地址是：https://github.com/lightTrace/vue.js 可以用來參考對比，但是由於是完整的，會比我下面一節一節來學習的複雜，但也都是入門的東西，可以看完一遍自我對照使用。首先安裝 npm install -g vue

PHP——輸出九九乘法表（初學菜鳥練手）

學習到php函式這一部分知識時，想自己寫一個函式來練練手，就寫了九九乘法表下圖是樣式，程式碼貼在下面其中scope 這個標籤的使用，是我之前沒有接觸過得，想要做一下說明，Scope屬性定義了行的表頭和列的表頭：col: 列表頭 row: 行表頭在第一行的加上值為co

Java制作最難練手速遊戲，Faker都堅持不了一分鐘

圖形圖像 java 想練手速，來啊，互相傷害啊Java制作最難練手速遊戲，目測Faker也堅持不了一分鐘制作思路：只靠Java實現。Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、

練手小項目（2）-生活小助手--星座運勢查詢

avi 聚合數據當前 value book tell 身邊 req pin 上一篇內容練手小項目（2）-生活小助手今天星期一。趁著中午的歇息時間把第二個寫出來星座運勢，近期看看極客學院用聚合數據做了天氣預報的視頻教程，不好評價他。看他在後面的代碼變更那

java練手

javapublic class jichu{ public static void main(String[] args){ // 輸出控制臺 System.out.print("hello world");

day-1.python初學者練手題

tom rep 初學 grid repeat 只需要 () padding -1 1.編寫一個名為right_justify的函數，函數接受一個名為``s``的字符串作為形參，並在打印足夠多的前導空格（leading space）之後打印這個字符串，使得字符串的最後一個字

面試練手題集（網站推薦）

htm 公司書籍 art 算法面試 item 程序員 detail tco 1)leetcode:一般筆試題會從leetcode找 2)橫空出世，席卷互聯網--評微軟等公司數據結構+算法面試100題對應已出版書籍《編程之法：面試和算法心得》購買鏈接：http://

socket遠程控制（練手）___源碼

socket 基於遠程控制服務器端： #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/8/22 16:14 # @Author : Mr_zhang # @Site : # @File : serv

練手nginx反向代理apache實戰

pst virtual stream ror roo cnblogs 什麽 sta war 先說下原理性的什麽是反向代理用戶訪問域名域名的指向到nginx nginx把請求轉發到apache apache處理後返回給用戶整套的邏輯對於用戶來說就是

vue框架制作TodoList

htm input -m log 學習 inpu meta ext html 在初步學習了vue之後，我們可以使用vue的基礎知識來實現一個todolist列表，主要功能是通過一個輸入框來輸入，然後將輸入的內容同步的顯示在頁面上，當點擊其中的一項時，出現一條下劃線。首先列

簡單的工資管理系統小程序，只是練手

工資 swa 修改 lar 存在 inf 查詢 strip() 練手需求如下：工資管理系統aaa 100000bbb 80000ccc 50000ddd 30000-----以上是info.txt文件-----實現效果：從info.txt文件中讀取員工及其工資信息，最後

python小爬蟲練手

spider cep 文件名 found dha visit doc try ret 一個人無聊，寫了個小爬蟲爬取不可描述圖片.... 代碼太短，就暫時先往這裏貼一下做備份吧。 #! /usr/bin/python import chardet import urlli

Python--matplotlib 繪圖可視化練手--折線圖/條形圖

inline otl axis size enc lib note 折線 notebook 最近學習matplotlib繪圖可視化，感覺知識點比較多，邊學習邊記錄。對於數據可視化，個人建議Jupyter Notebook。 1.首先導包，設置環境 import pand

面向對象第一次練手-------ArrayList集合、類、對象、冒泡排序、類型轉換

arraylist for 一句話 class new each 註釋 program bsp 思維轉不過彎兒來怎麽做都是錯哪怕差一個（）就成功的事情，也是千差萬別忽然想到一句話：差一步就成功的距離 = 差幾萬米就成功的距離部分的理解和都體現在代

Python練手系列之--名片管理系統

完成 elif menu 顯示 log pytho lob pos app 列表或字典做全局變量在函數中調用可以不用加global # 用來存儲名片 card_infors = [] def print_menu(): """完成打印功能菜單""" p

初學Vue練手的簡易todolist

相關推薦