DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 利用vue寫todolist單頁應用
利用vue寫todolist單頁應用
編輯:關於JavaScript     

網上有很多關於vue的todolist小程序。大多是利用vue-cli腳手架工具開發的,這個官網的文檔也不支持新手從單文件開始學習。所以用大家熟悉的開發方式寫了這個todolist,希望和大家一起學習。

1、vue是啥?
Vue.js(讀音 /vjuː/, 類似於 view) 是一套構建用戶界面的 漸進式框架。簡單說是一個模板引擎,做過後端的應該很清楚,以前靠服務器端渲染的dom,放在浏覽器端端渲染,vue拿到數據渲染成dom.當然vue不僅僅是用來干這個的,數據驅動,數據雙向綁定,賦予了用戶很好的體驗,以及快速的開發,應用的項目的益於維護等。。

2、下面開始代碼吧,提前引入vue.js,以及bootstrap。由於沒采用vue單文件開發。所以只有一個html文件.

3、為了方便你可以使用cdn來引入你需要的文件。demo使用了localstorage來存放數據。所以你必須開啟web端口來浏覽。未了方便你可以使用webstorm來開發。否則你直接打開靜態頁是不能存取數據的。當然這些數據你可以換成從數據庫來處理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>vue版todolist</title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <script src="src/vue.js"></script>
</head>
<style>
  .isFinish {
    background-color: #d58512 !important;
  }

  .itemcount {
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
    float: left;
    background-color: #d9edf7;
  }
</style>
<body>
<div class="container text-center" id="app">

  <h2>{{title}}</h2>
  <div class="row">
    <div class="col-md-7">
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="toitem">添加任務事項</label>
          <input class="form-control" type="text" id="toitem" v-model="newitem" @keyup.enter="addItem()">
        </div>
        <!--  <div class="form-group text-left">
            <button class="btn btn-primary btn-sm">確認添加</button>
          </div>-->
        <div class="list-group text-left form-group" style="margin-top: 2em;">
          <a href="#" class="list-group-item active text-left">
            任務清單:
          </a>

          <a href="#" v-for="item in items" class="list-group-item" v-on:click="toogleFinsih(item)">
            <span class="itemcount">{{item.id}}</span>
            {{item.lable}}
            <span class="badge" v-bind:class="{isFinish:item.isFinish}">√</span>
          </a>

        </div>
      </form>
    </div>
    <div class="col-md-5">
      <div class="panel panel-default">
        <div class="panel-heading">任務計劃:</div>
        <div class="panel-body">
          請在一周內完成這些計劃!
        </div>
        <div class="panel-footer text-right">
          <button class="btn btn-info btn-sm" @click="clearItem">清空任務計劃</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  //該網站的localStorage的鍵值,用於存放數據
  var todoList = 'todolist';
  //對localStorage的封裝
  var lsp = (function () {
    return ({
      add: function (dataval) {
        //添加數據,鍵為todolist
        localStorage.setItem(todoList, JSON.stringify(dataval));
      },
      get: function () {
        //讀取鍵為todolist的數據
        return JSON.parse(localStorage.getItem(todoList));
      },
      remove: function () {
        //移除該站點下鍵為todolist的數據
        localStorage.removeItem(todoList);
      },
      clear: function () {
        //清空該站點下的所有localStorage的數據
        localStorage.clear();
      }
    });
  })();
  var app = new Vue({
    el: '#app',
    data: {
      title: '任務清單demo',
      items: lsp.get() || [],//讀取數據。如果沒有數據賦值為數組[]
      newitem: '' //要添加的數據
    },
    methods: {
      addItem: function () {
        var that = this;
        this.items.push({
          id: that.items.length + 1,
          lable: that.newitem,
          isFinish: false
        });
        lsp.add(this.items);
        this.newitem = '';
      },
      toogleFinsih: function (item) {
        item.isFinish = !item.isFinish;
      },
      clearItem: function () {

        this.items = [];

      }
    }
  })
</script>
</body>

</html>

github:demo

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved