v-for指令：
根據一組陣列的選項列表進行渲染
語法：
value，key in items
value，key of items
變異方法：
vue提供一組方法，對陣列進行操作時候，會觸發檢視更新
push() pop() shift() unshift() splice() sort() reverse()
事件處理器
v-on指令：
用來監聽dom事件觸發**
語法：v-on:eventname=」eventhandle」
指令簡寫： @
事件處理函式：寫在methods中統一管理
事件物件：在事件處理函式中獲取；內聯事件處理函式執行，傳入事件物件。$event
事件修飾符：
事件處理函式只有純粹的邏輯判斷，不處理dom事件的細節，如阻止冒泡、取消預設行為、判斷按鍵
修飾符的位置：v-on:eventname.修飾符
修飾符：.stop .prevent .capture .self .once
按鍵修飾符：
.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta .鍵值
執行事件處理函式時可以進行傳參
<input
placeholder=
""task-input"
type=
"text"
v-model=
"todo"
v-on
:keyup.enter=
"addtodo(123,$event)"
/>
new條件渲染：vue
(,methods:);this.todo=" "; //資料更新檢視
} }
});
v-show指令：根據表示式的值，用來顯示或隱藏元素。
語法：v-show=」表示式」
元素會被渲染在頁面中只根據表示式的值進行css切換
動態繫結class：
class也為元素的屬性，可以使用v-bind:class
語法：:class=」」
表示式值為true，新增classname，否則不新增
:class=」[classname,classname]」
自定義指令：
除了vue』內建的指令，可以自己設定指令
選項物件的directives屬性
鉤子函式：
update被繫結元素所在的模板更新時呼叫
鉤子函式中引數：
el：指令所繫結的元素，可以用來直接操作dom
binding：乙個物件
value：指定的繫結值
實驗結果圖：
核心**：
varlist= [,];newvue(,
computed:).length}
},methods:);
this.todo='';
},deletetodo(todo),
edtortodo(todo),
edtortodoed(todo),
canceltodo(todo)
},directives:}}
}});
<spanclass="no-task-tip"v-show="!list.length">還沒有新增任何任務
span>
<
ulclass="todo-list">
<
liclass="todo":class=""v-for="item in list">
<
divclass="view">
<
inputclass="toggle"type="checkbox"v-model="item.ischecked"/>
<
label@dblclick="edtortodo(item)">}
label>
<
buttonclass="destroy"@click="deletetodo(item)">
button>
div>
<
inputv-foucs="edtortodos === item"class="edit"type="text"v-model ="item.title"@blur="edtortodoed(item)"@keyup.up="edtortodoed(item)"@keyup.esc="canceltodo(item)"/>
li>
ul>
繼續努力。。。。。。
IMWeb訓練營作業 todolist
先來幾張。預設的外觀 新增幾個待辦適宜後的外觀 編輯待辦適宜後的外觀 標記為已完成後的外觀 篩選未完成的外觀 刪除1個待辦適宜後的外觀 實現思路 用乙個陣列儲存所有待辦適宜。每個待辦適宜的格式是如下 我用新建待辦適宜時的時間戳做那條待辦適宜的id。對待辦適宜的增刪改查就是對陣列的增刪改查。下面是部分...
IMWeb訓練營作業 Todo
vuejs 學習 todo 時間問題，作業僅支援移動端 作業使用vue cli搭建開發環境，修改了部分webpack配置，採用模組化開發形式，部分內容加入了動畫效果，支援雙擊todo進行編輯，支援hash監聽，沒有設計師，視覺呈現請dalao多見諒 雙擊間隔最大時間 const double tou...
IMWeb訓練營作業 todo list
通過這兩天對todo list例項的學習與實踐，對vue有了進一步的了解和認識。html html html head lang en meta charset utf 8 link rel stylesheet href index.css title todo list title script...