vue単純テーブルコンポーネントの実装

今週はvuexについてのまとめをしたいと思っていましたが、友達がvueでコンポーネントを書く方法がまだ分からないと反応したので、ここでvueページやコンポーネントを書く方法を説明する文章を書きました.vueの核心思想はコンポーネントであり、コンポーネントとは何か.私の理解によると、コンポーネントはページを組み立てる部品であり、例えば車には大小の多くの部品が構成されている.同じページでも、ヘッドコンポーネントボタンコンポーネントなど多くのコンポーネントが構成されている.vueの3つのコアコンポーネントのルーティング状態管理、ルーティング制御ページのレンダリング、ページはコンポーネントから構成され、データはvuexによって管理され、変更されている.簡単なケースでお話しします
第1歩:簡単なvueプロジェクトを構築し、古い規則は直接コマンドラインにvue init webpack myproject cd my vue cnpm/npm install cnpm/npm run devの実行結果を入力します.その後、8080ポートでvueのフラグページを見る第2歩:ディレクトリ構造を分析するのは主にコンポーネント入口appです.vueとmain.js第三歩:appでページを書きます.vueはこう書きます

    export default {
      data () {
        return {

        }
      },
      components: {
      }
    }

メールでjsではこう書きます

import Vue from 'vue'
import App from './App'
import Home from './pages/Home.vue'
import VueRouter from 'vue-router'
import 'bootstrap/dist/css/bootstrap.css'
Vue.use(VueRouter)
const routes = [{
  path: '/',
  component: Home
}]

const router = new VueRouter({
  routes
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})

main.jsは主にモジュールのインポートとコンポーネントのインポートと登録、ルーティング構成を含み、もちろんルーティング構成は単独で書くことができる.上記のルーティング構成からpathが'/'である場合にappをレンダリングすることが分かる.vueのページはhomeです.vueページは、次のようになります.

    import table from '../components/table.vue'
    export default {
      data () {
        return {

        }
      },
      components: {
        tableCom: table
      }
    }

ここでimport table from'../components/Hello.vue′は、このtableコンポーネントをhomeにインポートすることを示す.vueページですが、このコンポーネントをインポートして登録していないだけでは無効です.関数を定義して実行していないようです.したがって、このコンポーネント、すなわちcomponents:{tableCom:table}を登録する必要があるのは、tableComラベルをカスタマイズしてこのコンポーネントをマッピングすることを意味するが、vueでは署名が長すぎる場合、tableComがtable-comと書くように別々に書く必要がある.これで1つのコンポーネントのインポートと登録が完了し、次にこのコンポーネントtableを完了する.vueインタフェースは次のとおりです.

export default {
  name: 'hello',
  data () {
    return {
      user: {'name': '', 'age': '', 'school': ''},
      users: [
        {'name': '  ', 'age': '25', 'school': '    '},
        {'name': '  ', 'age': '23', 'school': '      '},
        {'name': '  ', 'age': '22', 'school': '      '}
      ]
    }
  },
  methods: {
    insert: function () {
      this.users.push(this.user)
    },
    remove: function (index) {
      this.users.splice(index, 1)
    }
  }
}

このコンポーネントは簡単な削除機能を実現し、主にdataデータの修正を実現しています.私たちが普段使用しているjqueryはdomノードの操作にすぎません.例えば、データを変更するには、まずdomを取得し、jqueryの方法で値を取得します.vueはそうではありません.dataデータを操作し、データを双方向にバインドします.データが変更されるとビューが変更され、同じビューが変更されるとデータが変更されます.最後に私たちが見た効果は、このような皆さんが何か問題があったら私に連絡してください.あるいは、伝言を残しても、このようなdataの操作が煩雑で、簡単な方法があるかどうか、あります.それはvuexが倉庫のようにあなたの必要なデータを提供していることです.次の章ではvuexの使用についてまとめ始めます.もっと多くの友达が私に関心を持っていることを知りたいです.サポートありがとうございます.
転載先:https://www.cnblogs.com/dreamsboy/p/6718218.html