vueデータの添削・見直し(CURD)を実現

20888 ワード
vue
原文住所:
vueデータの添削・見直し(CURD)を実現
ガイド:データリストでは、通常、データの追加、削除、修正、検索などの操作がありますが、vueを使用するとどのように実現されますか.
管理者の一部のバックグラウンドページでは、パーソナルセンターのデータリストに、これらのデータを削除して調べる操作があります.例えば、管理者のバックグラウンドのユーザーリストには、新しいユーザーの情報を入力したり、既存のユーザー情報を変更したりすることができます.vueでは、データの操作と処理に集中する必要があります.
たとえば、次のようなページがあります.
このページでは、4つの機能を追加削除して検索し、リンクをクリックしてdemoを表示します.http://www.xiabingbao.com/demo/vue-curd/index.html】.
これらのユーザ情報をlistの配列に保存し、削除変更をこの配列で行います.
JSlist: [
    {
        username: 'aaaaa',
        email: '[email protected]',
        sex: ' ',
        province: '   ',
        hobby: ['  ', '  ', '  ']
    },
    {
        username: 'bbbbb',
        email: '[email protected]',
        sex: ' ',
        province: '   ',
        hobby: ['  ', '  ', '  ']
    }
    // ...
]

これらのデータを設定するのは主にvueのフォームに対する処理操作を復習します.この中のフォームには、テキスト入力ボックス、ラジオボタン、select選択ボックス、チェックボックスなどがあります.
1.展示データ
我々のデータはすべて配列listに配置されているが、ここではlistを直接循環出力するのではなく、listのデータを1つの配列slistに渡し、slistを循環出力する.後続のクエリー機能ではデータをフィルタリングする必要があるため、配列listは元のデータ(新規、変更後、または削除後を含む)を保存し続け、配列slistは表示のみを担当します.
vueにはsetSlistメソッドが提供され、表示する必要があるデータを配列slistに与えます.
JS//              
setSlist(arr) {
    this.slist = JSON.parse(JSON.stringify(arr));
}

次にhtmlでv-forを使用してslist配列をレンダリングします.
HTML<tr v-cloak v-for="(item, index) of slist">
    <td>{{index+1}}td>
    <td>{{item.username}}td>
    <td>{{item.email}}td>
    <td>{{item.sex}}td>
    <td>{{item.province}}td>
    <td>{{item.hobby.join(' | ')}}td>
    <td><a href="javascript:;" @click="showOverlay(index)">  a> | <a href="javascript:;" @click="del(index)">  a>td>
tr>

「≪アクション|Actions|emdw≫」欄で、変更および削除操作にイベントをバインドします.
2.機能の追加と削除
追加機能と削除を統合するのは、どちらの機能も比較的簡単です.
原文住所:http://www.xiabingbao.com/vue/2017/07/10/vue-curd.html
ユーザーを追加するには、pushメソッドを使用して、list配列の最後にユーザーの情報を追加します.
JSthis.list.push({
    username: 'ffff',
    email: '[email protected]',
    sex: ' ',
    province: '   ',
    hobby: ['  ', '  ']
});

これでffffのユーザーを追加できます.
ユーザーを削除する場合、splice(index, 1)でindex位置のデータを削除することができ、ページ上のデータは自動的に更新されます.
3.修正機能
ある要素を修正したい場合は、この位置のデータを取り出して弾層(または他の位置)に置くことができ、弾層の情報はキャンセルまたは修正して保存することができます.
原文住所:http://www.xiabingbao.com/vue/2017/07/10/vue-curd.html
私たちの弾層のデータがselectedlistであると仮定すると、修正するたびにindex位置のデータをselectedlistに渡し、弾層の中でselectedlistを修正します.修正データのタイプも見られます.テキストボックス(ユーザー名、メールボックス)、ラジオボタン(性別)、select選択ボックス(所在省)、マルチ選択ボックス(趣味)、ここではフォーム処理(https://cn.vuejs.org/v2/guide/forms.html).弾性層が変数isActiveで制御されるかどうか:
JS//     
modifyData(index) {
    this.selected = index; //      
    this.selectedlist = this.list[index];
    this.isActive = true;
}

弾層の情報を変更すると、テーブルのデータも同期して更新されるという問題が見つかりましたか.しかし、私たち自身は保存ボタンをクリックしたときに、弾層のデータを表に保存したいと思っています.問題の根源はここにある.
JSthis.selectedlist = this.list[index];
list[index]はObjectタイプのデータであるため、=賦値を使用すると賦値操作は浅度コピー(データのアドレスを対応する変数に賦値し、具体的なデータを変数にコピーせず、変数はデータ値の変化に伴って変化する)となり、selectedlistとlist[index]は同じデータアドレスを使用し、互いにデータ値の変化を引き起こす.ここでは、深度コピーを行う必要があります.
JSthis.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); //        ，

ユーザーがデータを変更するとselectedlistが変化し、保存ボタンをクリックするとindex位置にデータを再保存します.
JS/*
  this.list     
  this.selected        
  this.selectedlist        
*/
Vue.set(this.list, this.selected, this.selectedlist);

4.クエリー機能
第1節では、ページテーブルにslistのデータが表示されているのは、クエリー操作を容易にするためです.
JS//              
setSlist(arr) {
    this.slist = JSON.parse(JSON.stringify(arr));
}

フィルタされたデータをいくつかの条件に基づいてslist配列に割り当てるたびに、クエリ後のデータが表示されます.ここで、クエリは2つの小さな機能を実現しました.
ユーザは、ある文字を入力と、ユーザが問い合わせる可能性のある単語(ユーザ名など)を入力ボックスの下に自動的にリストで示す.
同期更新テーブルのデータここでは、ユーザー名とメールボックスでクエリーを行うため、データをフィルタリングする際に、ユーザー名とメールボックスにクエリーの単語が含まれているかどうかを検出する必要があります.まず、入力ボックスにinputイベントをバインドし、datalistでユーザーがクエリーする可能性のある言葉を示します.
HTML<input type="text" placeholder="search" @input="search" list="cars" class="search">
<datalist id="cars">
    <option v-for="item in searchlist" :value="item">option>
datalist>

search機能の実装では、searchlistは入力ボックスの下に表示される検索可能な語であり、ss配列はフィルタリングされたデータを保存し、ループが完了した後、setSlistを呼び出す方法を設定してslist配列を修正する.
JS//   
search(e) {
    var v = e.target.value,
        self = this;
    self.searchlist = [];
    if (v) {
        var ss = [];

        //        
        this.list.forEach(function (item) {
            //      
            if (item.username.indexOf(v) > -1) {
                if (self.searchlist.indexOf(item.username) == -1) {
                    self.searchlist.push(item.username);
                }
                ss.push(item);
            } else if (item.email.indexOf(v) > -1) {
                //     
                if (self.searchlist.indexOf(item.email) == -1) {
                    self.searchlist.push(item.email);
                }
                ss.push(item);
            }
        });
        this.setSlist(ss); //          slist
    } else {
        //       ，       
        this.setSlist(this.list);
    }
}

ユーザーが文字を入力または削除するたびにsearchメソッドが呼び出され、クエリー操作が実行され、クリックで単語リストを表示するとsearchメソッドも呼び出されます.
5.弾層を独立して構成要素とする
実際には、修正機能(または新規機能)はコードとスタイルから相対的に独立しており、弾層をコンポーネントの形式に独立させ、修正が必要なデータをpropsを介してコンポーネントに渡し(新規データの場合、コンポーネントに空のデータを渡すことができる)、ユーザーが保存をクリックすると、さらに$emitを介して親コンポーネント(サブコンポーネントは直接親のデータを与えることができず、dataまたはcomputedでローカル変数を生成し、$emitメソッドを使用してこのローカルデータを再伝達する必要があります):
JS//      
Vue.component('model', {
    props: ['list', 'isactive'],
    template: `

                    

                        
   |   

                        

                            /*    */
                        

                    

               
`,
    computed: {
        modifylist() {
            return this.list;
        }
    },
    methods: {
        changeActive() {
            this.$emit('change'); //     ，  isactive 
        },
        modify() {
            this.$emit('modify', this.modifylist); //              
        }
    }
});

親コンポーネントは、親コンポーネントでchangeおよびmodifyイベントを切り取り、changeOverlayおよびmodifyで実装される.
HTML<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify">model>

6.まとめ
多くのことを書いていますが、実は中の難点はあまり多くありません.主にformフォームの操作で、もう一つはコンポーネント間のデータとイベントの伝達を練習します.内容は比較的簡単で、皆さんの批判と指摘を歓迎します.
AWS CLI
c++単純な加減乗算器