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

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

然后你會在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頁面
但是只導入而沒有注冊這個組件是無效的，就好像定義了一個函數而沒有執(zhí)行。所以我們需要注冊這個組件
也就是components:{tableCom: table}意思是自定義一個tableCom標簽來映射這個組件，但是vue規(guī)定但標簽名過長的時候，需要以分開方式去寫比如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>畢業(yè)學校</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節(jié)點的操作，比如我們要改變一個數據我們就要首先獲取dom然后通過jquery的方法來獲取值，而vue則不然它是對data數據進行操作，數據雙向綁定，數據改變則視圖改變，同樣視圖改變則數據改變。
到最后我們看到的效果是這樣的

大家有什么問題可以聯系我，或者留言
大家也許也發(fā)現了這樣操作data太繁瑣，有沒有簡單的方式呢，有，那就是vuex 就像一個倉庫提供你需要的數據。下一章節(jié)我會開始對vuex的使用做個總結，希望想了解更多的朋友關注我，謝謝你們的支持。

轉載于:https://www.cnblogs.com/dreamsboy/p/6718218.html

總結

以上是生活随笔為你收集整理的vue实现简单表格组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。