事件調(diào)用方法時傳遞參數(shù)
- 代碼
# template
<!-- methods 傳遞參數(shù)的兩種方法 -->
<button v-on:click="showParam1('我是參數(shù)1')">點我顯示參數(shù)1</button>
<button data-param="我是參數(shù)2" @click="showParam2($event)">點我顯示參數(shù)2</button>
# script
...
methods: {
// 直接傳參
showParam1(str) {
alert(str);
},
// 傳遞過來一個 事件對象 通過該對象獲取參數(shù)
showParam2(e) {
console.log(e.srcElement.dataset.param);
}
}
-
v-on:事件="調(diào)用方法(參數(shù)列表)"可以簡寫為@事件="方法(參數(shù))" - 第一種方法是直接傳遞參數(shù)。
- 第二種方法是傳遞
$event=> 即觸發(fā)事件的對象作為參數(shù)弯予，并且在標(biāo)簽上使用data-參數(shù)名來配置參數(shù)距帅。 - 然后在方法參數(shù)列表中接收 $event 卒密，然后通過
接收的event.srcElement.dataset.參數(shù)名來實現(xiàn)讀取標(biāo)簽上配置的參數(shù)。
第二種方法用于無法直接傳參的情況进统。
創(chuàng)建新的初始化文件
- 使用
vue create projectNamevue-cli 創(chuàng)建新項目時悦污，會讓你選擇一種初始化版本：- default => 帶 babel, esLint
- Manually select features => 自己選包
- 選擇 Manully => 【空格】選取創(chuàng)建項目時就自動帶上的包代芜，選好后【回車】策州，然后可以選擇 Indedicated config files 輸入一個名字瘸味，就可以再下次使用 vue-cli 創(chuàng)建項目時，選擇通過這樣的方式保存的預(yù)置配置了够挂。
構(gòu)建一個簡單的“代辦事項”
- 增加旁仿、刪除、遍歷
# template
<!-- 文本框 -->
<input type="text" v-model="todo">
<!-- 添加按鈕 -->
<button @click="add()">增加</button>
<hr>
<!-- 遍歷數(shù)據(jù) -->
<ul class="list">
<!-- 使用 v-for="(單個對象, 該對象在集合中的下標(biāo))" 在循環(huán)中利用下標(biāo)實現(xiàn)刪除 -->
<li v-for="(thing, key) of things" :key="thing.id"> {{ thing.id }} - {{ thing.todo }} <button @click="remove(key)">刪除</button> </li>
</ul>
# script
export default {
name: 'app',
data() {
return {
todo: '', //文本框
// 這是代辦事項集合
things: [
{id: 1, todo: '請輸入代辦事項'},
],
}
},
methods: {
// 添加
add() {
// 先獲得id
var id = this.things.length;
// 然后獲取文本框能容
var todo = this.todo;
// 組裝成和 things 中的每一項一樣的格式（ES6語法, key: value 標(biāo)識符是一樣的時候孽糖，可以只寫其中一個）
var newThing = {id, todo};
// 最后使用 push() 將新數(shù)據(jù)放進 this.things 中枯冈。
this.things.push(newThing);
},
// 刪除
remove(key) {
// 使用 splice(開始下標(biāo), 往后刪除幾個) 來刪除數(shù)據(jù)
this.things.splice(key, 1);
},
}
}
- 增加刪除都使用 JS 提供的數(shù)組操作，
push(在數(shù)組末尾添加的新元素值)&splice(從哪里開始刪除的下標(biāo), 刪除個數(shù)) - 在模板上遍歷顯示對象集合（數(shù)組）時梭姓，可以通過
v-for="(obj, index) of objs"中的 index 來獲取下標(biāo)。
- 完成后勾選功能的實現(xiàn)
# 修改 template
<ul class="list">
<h2>代辦</h2>
<li v-for="(thing, key) of things" :key="thing.id" v-if="!thing.status">
<input type="checkbox" v-model="thing.status">
{{ thing.id }} - {{ thing.todo }}
<button @click="remove(key)">刪除</button>
</li>
<hr>
<h2>完成</h2>
<li v-for="(thing, key) of things" :key="thing.id" v-if="thing.status" class="active">
<input type="checkbox" v-model="thing.status">
{{ thing.id }} - {{ thing.todo }}
<button @click="remove(key)">刪除</button>
</li>
</ul>
# 數(shù)據(jù)定義改一下
things: [
{id: 0, todo: '請輸入代辦事項', status: false},
],
- 上面實現(xiàn)了修改
thing.status的功能：使用<input type="checkbox" v-model="thing.status">綁定當(dāng)前被遍歷事件的狀態(tài)值嫩码，當(dāng)勾選時誉尖，該值為 true。 - 使用
v-if來控制頁面上元素的顯示和隱藏铸题。
-
使用 localStorage 實現(xiàn)存儲本地事件
- 新建 /src/module/storage.js
/** * localStorage 封裝 */ // 設(shè)置一個帶有 set() 和 get() 方法的對象 var storage = { // 設(shè)置 set(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, // 讀取 get(key) { return JSON.parse(localStorage.getItem(key)); }, } // 并包路這個對象 export default storage;JSON.stringify(對象)=> 對象轉(zhuǎn)JSON字符串铡恕，JSON.parse(字符串)=> 字符串轉(zhuǎn)對象。- 在 /src/App.vue 根組件中引用上面代碼定義和暴露的模塊
// 引用對象 import storage from "./module/storage"; // console.log(storage);- 在 添加丢间，刪除探熔，清空三個方法中添加這樣一句代碼
storage.set('things', this.things);=> 調(diào)用引用的 storage 對象的set() 方法。 - 使用 生命周期函數(shù) mounted(): 當(dāng)組件被掛載完成后自動調(diào)用烘挫，當(dāng)頁面刷新時讀取存儲在 localStorage 中的代辦事項數(shù)據(jù)
// 初始化函數(shù) mounted() { var things = storage.get('things'); if(things) { this.things = things; } }- 解決一個無法正確讀取狀態(tài)的問題：因為我們的“開關(guān)”
<input type="checkbox" v-model="thing.status">在改變時沒有進行 localstorage 的存儲诀艰，所以需要在標(biāo)簽上添加一個被修改時觸發(fā)的事件@chage="saveStatus()"，然后在 methods 里定義一個 saveStatus() 函數(shù)饮六，調(diào)用storage.set('things', this.things);存儲即可其垄。
上面的知識用了 nodeJS 提供的模塊化思想：定義并且使用 export 暴露某個對象。然后在其他文件使用 import 引用一些被暴露的對象卤橄。實現(xiàn)對象分類封裝绿满。
