Vuecliはtodolistの操作を実現するためにVueプロジェクトを構築します
基本的なレイアウト操作
1. srcフォルダーの下にあるviewsフォルダーを見つけて、その中に新しいファイルmyinput.vueを作成します。
2.データセンター内のオブジェクトの配列をカスタマイズし、v-forを介してビューレイヤーにレンダリングします
data() {
return {
list:[
{name:'a',done:true},
{name:'b',done:true},
{name:'c',done:false},
{name:'d',done:false}
]
};
},<ul class="pp">
<li v-for="(p,index) in list" :key="index">
{
{p.name}}
</li>
</ul>3.左側のフォルダーのrouterフォルダーの下にあるindex.jsファイルを見つけます
（1）上記のmyinputを導入します
import myinput from '../views/myinput.vue'（2）constルートでmyinputのルーティングルールを構成します
{
path:'/myinput',
name:'myinput',
component:myinput
}4.左側にあるApp.vueファイルを見つけて、上部のビューレイヤーのラベルをジャンプし、myinputにジャンプします。
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/myinput">myinput</router-link>このとき、ターミナルを開き、現在のプロジェクトを入力し、npmrunserveと入力します
実行が終了すると、2つのURLが表示されます
Ctrlキーを押しながらクリックして開きます。これは単純な例であるため、入ったときの外観です。これ以上スタイリングしないでください。
上部のmyinputをクリックします
メソッドを追加
1. myinputファイルに戻り、ビューレイヤーのulリストの上に入力テキストボックスを追加し、空のデータデータセンターでmes：''を定義し、v-modelを介して入力にバインドします。
<input type="text" v-model="mes"> mes:'',2.メソッドでaddメソッドを定義します
add(){
// 当没有输入内容时
if(this.mes == ''){
// 弹窗提醒输入内容
window.alert('请输入内容');
// 返回false，什么也不做
return false
}
// 输入内容后向数组的最好以为添加元素
this.list.push({name:this.mes,done:false})
this.mes = ''
}3.入力にキーボードプレスイベントを追加し、それをバインドしてEnterキーを押し、Enterキーを押したときにコンテンツを追加します
<input type="text" v-model="mes" @keypress.enter="add">
削除メソッドを追加
ビューレイヤーのliの各アイテムにボタンを追加し、パラメーターインデックスを渡すためのメソッドdelを追加します
メソッドセンターのこのメソッドで定義されています
<li v-for="(p,index) in list" :key="index">
{
{p.name}}--
<button @click="del(index)">删除</button>
</li> del(index){
this.list.splice(index,1)
}
ウォッチモニタリングにより、ページのデータはローカルストレージlocalStorageに保存され、作成されたライフサイクル関数にバインドされるため、ページデータはlocalStorageのデータと同期されます。
created(){
// 拿到本地存储中的数据
let todoList = localStorage.todoList;
if(todoList){
this.list = JSON.parse(todoList);
}
},
watch:{
list:{
handler(list){
console.log(list);
localStorage.setItem('todoList',JSON.stringify(list))
},
}
},ページを操作するときは、コンソールの表示に注意してください
更新後も、データは同期されたままになります