2. 程式人生 > >vue.js實現任務列表（ToDoMVC）

vue.js實現任務列表（ToDoMVC）

阿新 • • 發佈：2019-02-18
;(function(){ // const todos = [ // { // id:1, // title:'吃飯', // completed:true // }, // { // id:2, // title:'睡覺', // completed:false // }, // { // id:3, // title:'寫程式碼', // completed:true // }, // ] window.app = new
Vue({ data:{ message:'todos_lzm1', todos:JSON.parse(window.localStorage.getItem('todos') || '[]'), todoText:'', currentEditting:null, filterText:'all' }, //計算屬性是vue的一大特色 //一種帶有行為的屬性，本質是方法，本質是方法但是不能當做方法來呼叫，必須當做屬性來使用
//好處：相比方法的優勢是會快取計算的結果，效率很高 //計算屬性不是方法，只能當做屬性來使用 // computed:{ //該成員就是一個方法，但是在使用的時候不能呼叫， //簡寫方式， // remainingCount(){ // return this.todos.filter(t => !t.completed).length // } //完整寫法 remainingCount:{ //當你訪問 remainingCount 時會預設呼叫 get() 方法
get(){ return this.todos.filter(t => !t.completed).length }, //當你 例項.remainingCount = xxx 的時候會自動呼叫 set 方法 // set(){ // } }, toggleAllStat:{ get(){ //計算屬性知道他依賴todos //當 todos 發生改變的時候，計算屬性也會發生變化 return this.todos.every(t => t.completed) }, set(){ //在自己的方法中呼叫自己就是訪問自己的 get 方法 const checked = !this.toggleAllStat this.todos.forEach(item => { item.completed = checked }) } }, filterTodos(){ switch(this.filterText){ case 'active': return this.todos.filter(t => !t.completed) break case 'completed': return this.todos.filter(t => t.completed) break default: return this.todos break } } }, //監視成員的改變 watch:{ //當監視到 todos 改變時會呼叫 handler 方法 todos:{ handler(val,oldval){ //監視到 todos 的變化，把 todos 本次儲存記錄資料的狀態 window.localStorage.setItem('todos',JSON.stringify(this.todos)) }, deep:true //深度監視，只有這樣才能監視到 todos 孩子...孩子...的變化 } }, methods:{ handleNewTodo(){//新增新的要完成的任務 //console.log('111') const todoText = this.todoText.trim() if(!todoText.length){//非空判斷 return } const todos = this.todos todos.push({//將要新增的內容push到todos中 //如果資料元素為空就給1，否則就是最後一個元素的 id + 1 id:todos.length ? todos[todos.length-1].id+1:1, title:todoText, completed:false }) this.todoText=''//新增完後清空 }, // handleToggleAll(e){//選中和取消所有任務項 // //0.繫結 checkbox 的 change 事件 // //1.獲取 CheckBox 的選中狀態 // //2.迴圈所有子任務項的選中狀態，將 checkbox 的選中狀態賦值給它們 // const checked = e.target.checked // this.todos.forEach(item => { // item.completed = checked // }) // }, //當事件函式沒有傳引數的時候，第一個引數就是預設的事件原物件：event //當事件函式有引數的時候，就沒有辦法獲取事件原函式：event //可在傳遞引數的時候手動在呼叫方法的時候 $event 來接受 event 事件物件 handleRemoveTodo(index){//刪除單個任務項 //console.log(index) this.todos.splice(index,1) }, handleGetEdittingDblclick(todo){//雙擊獲取編輯框 console.log(todo) this.currentEditting = todo }, //儲存編輯任務，敲回車儲存 handleSaveEdit(todo,index,e){ //0.註冊繫結事件處理函式 //1.獲取文字框的資料 //2.資料校驗 // 如果資料為空，則刪除文字框 // 否則儲存編輯 //console.log(e.target.value) const value = e.target.value if(!value.length){//若為空，則刪除 this.todos.splice(index,1) }else{ //儲存 todo.title = value this.currentEditting = null//取消樣式 } }, //按下esc鍵取消編輯，不儲存 handleCanceEditEsc(){ //取消樣式即可 this.currentEditting = null }, handleClearCompleted(){ //點選clear completed清除已完成的選項 //注意不要在foreach中刪除元素，可以使用for迴圈，每刪一個可以手動的改變索引 for (var i = 0; i < this.todos.length; i++) { if(this.todos[i].completed){ this.todos.splice(i,1) i-- } } }, //獲取剩餘未完成任務數量 // getRemainCount(){ // return this.todos.filter(t => !t.completed).length // } } }).$mount('#app') //該事件只有 change 的時候才會執行，頁面初始化的時候不會執行 //註冊 hash(錨點) 的改變事件 window.onhashchange = function(){ app.filterText = window.location.hash.substr(2) } //頁面初始化的時候呼叫一次，保持路由狀態 window.onhashchange() })()

相關推薦

vue.js實現任務列表（ToDoMVC）

;(function(){ // const todos = [ // { // id:1, // title:'吃飯', // completed:true // }, // { // id:2,

vue.js實現初瞭解（一）

1. vue 2.0是用Flow做靜態型別檢查, 3.0對TypeScript的支援更好了； 2. vue.js是基於Rollup（更輕量，適合js庫的構建）構建的，它的構建相關配置都在scripts目錄下； 3. Runtime Only 版本（template模板編譯為render函式） 和

【vue.js】藉助vue-router實現切換檢視（元件）的demo

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c

vue.js匯入css庫（elementUi）的方法

1.安裝以下模組，讓webpack可以解析css檔案   npm install style-loader --save-dev npm install css-loader --save-dev npm install file-loader --s

Vue.js學習使用心得（三）

一、計算屬性 計算屬性關鍵詞: computed <body> <div id="app"> <p>原始字串: {{ message }}</p> <p>計算後反轉字串: {{ reversedMessage }}</p>

VsCode + node+ vue.js 開發環境搭建（一）

1.安裝最新的 vscode ,這個很容易安裝。 2.要在機器上開發 vue.js 有兩種模式，一種直接用 .js ,這種方式不用 安裝.node  環境，另一種用 webpack, 3.在機器安裝 node node-v10.8.0-x64.msi,在安裝過程中可能會出

（十二）vue.js元件——元件基礎（1）

1)學習元件的原因 概述 元件是vue.js最核心的功能，也是整個框架設計最精彩的地方，當然也是最難的地方。 原因 Vue.js的元件就是為了提高程式碼重用性和高擴充套件性的，特別是將ui與js作為一個整體進行復用與擴充套件。 一些具體的場景 1.UI構建---

CSS+JS實現圖片集展示（二）

題目與上面的兩篇文章有所重複，但是內容與上兩篇上有所區別，本文中，實現的圖片集展示的效果為： 1、詳細圖和縮圖的同步展示； 2、圖片的自動播放； 3、顯示圖片的縮影圖的焦點顯示與別的圖片的遮蓋顯示； 4、滑鼠移動至詳圖顯示圖片控制控制元件。 具體效果圖如下： 初始化或

原生JS實現動態時鐘（優化）

chan js實現 meta 文檔 時鐘 全局 tint min title <!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔&l

Vue.js 內部執行機制（六）---- 批量非同步更新策略及 nextTick 原理

之前我們學到了 Vue 更新資料是如何更新檢視的。 簡單回顧 資料更新（setter）-> 通知依賴收集集合（Dep） -> 呼叫所有觀察者（Watcher） -> 比對節點樹（patch） -> 檢視 在更新檢視這一步，使用非同步更新策略 為

vue.js初級面試題（必備）

根據自己的親身經驗總結出了10道與vue相關的面試題，不是最全的，但一定是最常見的 ！！！ 1.  mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？   答：一個model+view+viewModel框架，資料模型mode

vue.js學習筆記五（元件）

一、元件的使用1.全域性註冊1）必須先註冊再例項化2）命名最佳是小寫，中間有一個橫槓：my-component3）Vue.component({})4)顯然，元件只能在Vue作用域內有效，必須寫在<div id="app"> ...</div>裡。但是

用js實現自動求和（積）功能

<body> <form>form1"> <input> <input type="text" name="text2"> <input> <input type="text" name="text4"

Vue.js學習系列（三十）-- Vue.js樣式繫結（一）

class 與 style 是 HTML 元素的屬性，用於設定元素的樣式，我們可以用v-bind來設定樣式屬性。Vue.js v-bind 在處理 class 和 style 時，專門增強了它。表示式的結果型別除了字串之外， 1. Vue.js class 1.1 繫結

Vue學習之原始碼分析--聊聊Vue.js的template編譯（七）

$mount 首先看一下mount的程式碼 /*把原本不帶編譯的$mount方法儲存下來，在最後會呼叫。*/ const mount = Vue.prototype.$mount /*掛載元件，帶模板編譯*/ Vue.prototype.$mount =

Vue.js常用的語法（一）

在一個html檔案中，我們直接可以通過script標籤引入Vue.js，然後就可以在頁面裡寫Vue.js程式碼了。我們通過new Vue()構建了一個Vue的例項。html檔案：<!DOCTYPE

vue.js實現數據動態響應（Vue.set的應用）

屬性 點擊 屬性。 沒有 log utf-8 創建 http for 在vue裏面，我們操作最多的就是各種數據，在jquery裏面，我們習慣通過下標定向找到數據，然後重新賦值 比如var a[0]=111;（希望上家公司原諒菜鳥的我寫了不少這樣的代碼??） 下面上代碼

js 實現頁面區域性（或圖片）放大功能(vue)

方法： 　　adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.styles = 'transform: scale(2

vue.js實現選單導航欄（最終版）

效果： <template> <div class="layout-container"> <y-header> <div slot="nav"></div> </y-he

vue.js實現初了解（一）

call ins mixin gist mpi env 如果 only world 1. vue 2.0是用Flow做靜態類型檢查, 3.0對TypeScript的支持更好了； 2. vue.js是基於Rollup（更輕量，適合js庫的構建）構建的，它的構建相關配置都在s