vue實現簡單表格組件

原本想這一週作一個關於vuex的總結的，可是因爲朋友反應說還不知道如何用vue去寫一個組件，因此在此寫寫一篇文章來講明下如何去寫vue頁面或者組件。vue的核心思想就是組件，什麼是組件呢？按照個人理解組件就是裝配頁面的零件，好比一輛車有大大小小許多零件組成，那麼一樣的一個頁面，也是有許多組件構成的好比說頭部組件 按鈕組件等等，vue三大核心組件 路由 狀態管理，路由控制頁面的渲染，頁面由組件組成，數據有vuex進行管理和改變。下面我會以一個簡單的案例來講

第一步：構建一個簡單的vue項目，老規矩直接在命令行輸入
vue init webpack myproject
cd my vue
cnpm/npm install
cnpm/npm run dev
執行結果以下

而後你會在8080端口看到vue的標誌頁面
第二步：分析目錄結構 主要是組件入口app.vue和main.js
第三步：寫頁面
咱們在app.vue下這樣寫

<template>
  <div id="wrapper">
    <router-view></router-view>
  </div>
</template>
<script>
    export default {
      data () {
        return {

        }
      },
      components: {
      }
    }
</script>

在main.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: '<App/>',
  components: { App }
})

main.js主要包括模塊導入以及組件導入和註冊，路由配置，固然路由配置能夠單獨寫出來。
由上面的路由配置能夠知道當path爲‘/’時候，咱們渲染到app.vue中的頁面爲home.vue頁面，以下

<template>
  <div class="jumbotron">
    <h1>這個是路由對應的頁面,下面就是一個表格組件</h1>
    <table-com/>
  </div>
</template>
<script>
    import table from '../components/table.vue'
    export default {
      data () {
        return {

        }
      },
      components: {
        tableCom: table
      }
    }
</script>

其中import table from '../components/Hello.vue'表示導入這個table組件到home.vue頁面
可是隻導入而沒有註冊這個組件是無效的，就好像定義了一個函數而沒有執行。因此咱們須要註冊這個組件
也就是components:{tableCom: table}意思是自定義一個tableCom標籤來映射這個組件，可是vue規定但標籤名過長的時候，須要以分開方式去寫好比tableCom 要寫成table-com.
這樣就完成了一個組件的導入和註冊，下面咱們來完成這個組件
table.vue界面以下

<template>
   <div style="padding:20px;" id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">用戶管理</div>
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <th>序號</th>
                        <th>用戶名</th>
                        <th>年齡</th>
                        <th>畢業學校</th>
                        <th>操做</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for ="(user,index) in users">
                      <td>{{index+1}}</td>
                      <td>{{user.name}}</td>
                      <td>{{user.age}}</td>
                      <td>{{user.school}}</td>
                      <td><button v-on:click="remove(index)">remove</button></td>
                    </tr>
                    <tr>
                      <td></td>
                      <td><input type="text"  id="name" v-model="user.name"/></td>
                      <td><input type="text" id="age"v-model="user.age"/></td>
                      <td><input type="text" id="school"v-model="user.school"/></td>
                      <td><button @click="insert">insert</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
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)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
tr,th{
  text-align:center;
}
</style>

這個組件實現了簡單的增刪功能，主要是對data數據的修改，咱們要明白，咱們日常使用的jquery只是對dom節點的操做，好比咱們要改變一個數據咱們就要首先獲取dom而後經過jquery的方法來獲取值，而vue則否則它是對data數據進行操做，數據雙向綁定，數據改變則視圖改變，一樣視圖改變則數據改變。
到最後咱們看到的效果是這樣的

你們有什麼問題能夠聯繫我，或者留言
你們也許也發現了這樣操做data太繁瑣，有沒有簡單的方式呢，有，那就是vuex 就像一個倉庫提供你須要的數據。下一章節我會開始對vuex的使用作個總結，但願想了解更多的朋友關注我，謝謝大家的支持。