快捷導(dǎo)航

vue實(shí)現(xiàn)簡(jiǎn)單表格組件實(shí)例詳解

更新時(shí)間：2017年04月16日 16:34:51 投稿：mrr

vue的核心思想就是組件，什么是組件呢？按照我的理解組件就是裝配頁(yè)面的零件，vue三大核心組件路由狀態(tài)管理，路由控制頁(yè)面的渲染，頁(yè)面由組件組成，數(shù)據(jù)有vuex進(jìn)行管理和改變。下面我會(huì)以一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)

本來(lái)想這一周做一個(gè)關(guān)于vuex的總結(jié)的，但是由于朋友反應(yīng)說(shuō)還不知道如何用vue去寫一個(gè)組件，所以在此寫寫一篇文章來(lái)說(shuō)明下如何去寫vue頁(yè)面或者組件。vue的核心思想就是組件，什么是組件呢？按照我的理解組件就是裝配頁(yè)面的零件，比如一輛車有大大小小許多零件組成，那么同樣的一個(gè)頁(yè)面，也是有許多組件構(gòu)成的比如說(shuō)頭部組件按鈕組件等等，vue三大核心組件路由狀態(tài)管理，路由控制頁(yè)面的渲染，頁(yè)面由組件組成，數(shù)據(jù)有vuex進(jìn)行管理和改變。下面我會(huì)以一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)

第一步：構(gòu)建一個(gè)簡(jiǎn)單的vue項(xiàng)目，老規(guī)矩直接在命令行輸入

vue init webpack myproject
cd my vue
cnpm/npm install
cnpm/npm run dev

執(zhí)行結(jié)果如下

然后你會(huì)在8080端口看到vue的標(biāo)志頁(yè)面

第二步：分析目錄結(jié)構(gòu) 主要是組件入口app.vue和main.js

第三步：寫頁(yè)面

我們?cè)赼pp.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主要包括模塊導(dǎo)入以及組件導(dǎo)入和注冊(cè)，路由配置，當(dāng)然路由配置可以單獨(dú)寫出來(lái)。

由上面的路由配置可以知道當(dāng)path為‘/'時(shí)候，我們渲染到app.vue中的頁(yè)面為home.vue頁(yè)面，如下

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

其中import table from '../components/Hello.vue'表示導(dǎo)入這個(gè)table組件到home.vue頁(yè)面

但是只導(dǎo)入而沒(méi)有注冊(cè)這個(gè)組件是無(wú)效的，就好像定義了一個(gè)函數(shù)而沒(méi)有執(zhí)行。所以我們需要注冊(cè)這個(gè)組件

也就是components:{tableCom: table}意思是自定義一個(gè)tableCom標(biāo)簽來(lái)映射這個(gè)組件，但是vue規(guī)定但標(biāo)簽名過(guò)長(zhǎng)的時(shí)候，需要以分開(kāi)方式去寫比如tableCom 要寫成table-com.

這樣就完成了一個(gè)組件的導(dǎo)入和注冊(cè)，下面我們來(lái)完成這個(gè)組件

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>序號(hào)</th>
      <th>用戶名</th>
      <th>年齡</th>
      <th>畢業(yè)學(xué)校</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': '洛陽(yáng)理工'},
  {'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>

這個(gè)組件實(shí)現(xiàn)了簡(jiǎn)單的增刪功能，主要是對(duì)data數(shù)據(jù)的修改，我們要明白，我們平常使用的jquery只是對(duì)dom節(jié)點(diǎn)的操作，比如我們要改變一個(gè)數(shù)據(jù)我們就要首先獲取dom然后通過(guò)jquery的方法來(lái)獲取值，而vue則不然它是對(duì)data數(shù)據(jù)進(jìn)行操作，數(shù)據(jù)雙向綁定，數(shù)據(jù)改變則視圖改變，同樣視圖改變則數(shù)據(jù)改變。