欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2的todolist入門小項目的詳細(xì)解析

 更新時間:2017年05月11日 10:29:40   作者:Hxvin  
本篇文章主要介紹了vue2的todolist入門小項目的詳細(xì)解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

看完vue2的官方文檔后,找個入門項目鞏固下知識點,簡單的todolsit是個不錯的選擇。

項目用到了vue.js vue.cli webpack ES6 node環(huán)境,完成項目后會對這些技術(shù)棧有了些了解。

準(zhǔn)備開發(fā)環(huán)境

$ npm install -g vue-cli
$ vue init ,比如 vue init webpack todolist
$ cd todolist
$ npm install
$ npm run dev
  1. 安裝谷歌插件vue.js devtools
  2. 下載vue.js的webpack模板
  3. 下載todomvc的模板 (提供html和css)(也可以直接$ git clone https://github.com/tastejs/todomvc-app-template.git 來下載)
  4. 把todomvc的index.html拖到todolist文件夾去覆蓋里面的index.html
  5. 打開todomvc的json文件,會看到 “todomvc-app-css”: “^2.0.0”,就是要你 npm install todomvc-app-css -S 從而下載該css
  6. 刪點todolsit index.html的默認(rèn)css,js引用,src文件夾下的main.js引入模板css(import‘todomvc-app-css/index.css')
  7. 引入vue(import Vue form ‘vue')
  8. 等寫完代碼后 $npm run build 一鍵打包構(gòu)建,會看到dist文件夾

main.js的代碼

//后面的為注釋講解, ~表示串聯(lián)index.html的對應(yīng)內(nèi)容

import 'todomvc-app-css/index.css'
import Vue from 'vue'
//添加localStorage
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
 fetch: function () {
  var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  todos.forEach(function (todo, index) {
   todo.id = index
  })
  todoStorage.uid = todos.length
  return todos
 },
 save: function (todos) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
 }
}
//用過濾器篩選出三種狀態(tài)
var filters = {
 all(todos) {
  return todos
 },
 active(todos) {
  return todos.filter((todo) => {
   return !todo.completed
  })
 },
 completed(todos) {
  return todos.filter((todo) => {
   return todo.completed
  })
 },
}
let app = new Vue({
 el: '.todoapp',  // ~ <section class="todoapp">
 data: {
  msg: 'hello world',
  title: '待做清單',  // 渲染標(biāo)題 ~ {{title}}
  newTodo: '',
   todos: todoStorage.fetch(), // ~ v-show="todos.length" ; ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredTodos" 
  editedTodo: '',  // 空的編輯對象
  hashName: 'all'  
 },
 
 watch: {
  todos: {
   handler: function (todos) {
    todoStorage.save(todos)
   },
   deep: true
  }
 },
 
 computed: {
  remain() {
   return filters.active(this.todos).length  //未完成事項的數(shù)量 ~ {{remain}}
  }, 
  isAll: {   // ~ v-model="isAll"
   get() {
    return this.remain === 0
   },
   set(value) {
    this.todos.forEach((todo) => {
     todo.completed = value
    })
   }
  },
  filteredTodos() {  //用hashName過濾出當(dāng)前頁面的todos ~ v-for="(todo,index) in filteredTodos" 
   return filters[this.hashName](this.todos)
  }
 },
 methods: {
  addTodo(e) { //輸入值為空時,不添加(trim去除前后空格) ~ v-model.trim="newTodo" 
   if (!this.newTodo) {
    return
   }
   this.todos.push({
    id: todoStorage.uid++,
    content: this.newTodo,
    completed: false //結(jié)合v-model 根據(jù)completed狀態(tài)綁定樣式 ~:class="{completed:todo.completed; ~ v-model="todo.completed"
   })
   this.newTodo = ''
  },
  removeTodo(index) {  //綁定x樣式,點擊刪除該todo ~ @click="removeTodo(index)"
   this.todos.splice(index, 1)
  },
  editTodo(todo) {     //編輯 ~ @dblclick="editTodo(todo)"
   this.editCache = todo.content //儲存編輯前的內(nèi)容
   this.editedTodo = todo // 點擊編輯里面的內(nèi)容而不是只是空文本框~ editing:todo==editedTodo}"
  },
  doneEdit(todo, index) { //失去焦點后 ~ @blur="doneEdit(todo)";@keyup.enter="doneEdit(todo)"
   this.editedTodo = null //不存在編輯了或者說編輯已完成
   if (!todo.content) { //如果編輯后沒有內(nèi)容了,刪除該todo
    this.removeTodo(index)
   }
  },
  cancelEdit(todo) {  //按esc鍵取消此次編輯操作 ~ @keyup.esc="cancelEdit(todo)">
   this.editedTodo = null   
   todo.content = this.editCache //當(dāng)esc取消編輯時,還原編輯前的內(nèi)容
  },
  clear() { //點擊清除已完成的功能 ~ @click="clear"
   this.todos = filters.active(this.todos) //獲取并渲染未完成的事項 ~ 
  }
 },
 directives: {  //自定義屬性 ~ v-focus="todo == editedTodo"
  focus(el, value) { //文本框雙擊獲取焦點
   if (value) {
    el.focus()
   }
  }
 }
})
//hash(url地址中#以及之后的字符)
function hashChange() { 
// ~ :class="{selected:hashName=='all'}";:class="{selected:hashName=='active'}";:class="{selected:hashName=='completed'}"
 let hashName = location.hash.replace(/#\/?/, '') //正則表達式去除#/?,獲取如all,active,completed
 if (filters[hashName]) {  //如果過濾狀態(tài)的hashName存在
  app.hashName = hashName //給整個app變量里的hashName賦上那個值
 } else {
  location.hash = ''  //取消
  app.hashName = 'all' //否則就賦值‘a(chǎn)ll',回到全部事項的頁面
 }
}
window.addEventListener('hashchange', hashChange) //全局監(jiān)聽hash

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序如何像vue一樣在動態(tài)綁定類名

    微信小程序如何像vue一樣在動態(tài)綁定類名

    這篇文章主要介紹了微信小程序如何像vue一樣在動態(tài)綁定類名,文中給大家提到了vue與微信小程序的區(qū)別,需要的朋友可以參考下
    2018-04-04
  • vue中el-table格式化el-table-column內(nèi)容的三種方法

    vue中el-table格式化el-table-column內(nèi)容的三種方法

    本文主要介紹了vue中el-table格式化el-table-column內(nèi)容的三種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vue使用富文本編輯器vue-quill-editor的操作指南和注意事項

    vue使用富文本編輯器vue-quill-editor的操作指南和注意事項

    vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項,需要的朋友可以參考下
    2023-05-05
  • Element Table 自適應(yīng)高度的實現(xiàn)示例

    Element Table 自適應(yīng)高度的實現(xiàn)示例

    el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問題,本文就來解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下
    2024-07-07
  • Vue3+Canvas實現(xiàn)坦克大戰(zhàn)游戲(二)

    Vue3+Canvas實現(xiàn)坦克大戰(zhàn)游戲(二)

    本文主要給大家講解一下子彈擊中物體、物體銷毀、敵方坦克構(gòu)建生成、運動算法、爆炸效果、以及障礙物的生成,感興趣的小伙伴可以了解一下
    2022-03-03
  • 解決vue?cli3使用axios跨域問題

    解決vue?cli3使用axios跨域問題

    這篇文章介紹了解決vue?cli3使用axios跨域問題,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-01-01
  • Vue封裝svg-icon組件使用教程

    Vue封裝svg-icon組件使用教程

    SVG(Scalable?Vector?Graphics)可縮放矢量圖形,是一種用于描述基于二維的矢量圖形的?XML?標(biāo)記語言,其基本矢量顯示對象包括矩形、圓、橢圓、多邊形、直線、任意曲線等,還能顯示文字對象和嵌入式外部圖像
    2023-02-02
  • 分享幾個可以助你提高效率的Vue指令

    分享幾個可以助你提高效率的Vue指令

    vue是一款漸進式JavaScript框架,漸進式是指由淺到深,由簡單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個可以助你提高效率的Vue指令,需要的朋友可以參考下
    2022-05-05
  • vue?代碼壓縮優(yōu)化方式

    vue?代碼壓縮優(yōu)化方式

    這篇文章主要介紹了vue?代碼壓縮優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue中引入路徑@的用法及說明

    vue中引入路徑@的用法及說明

    這篇文章主要介紹了vue中引入路徑@的用法及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論