vue实现简单表格组件实例详解


Posted in Javascript onApril 16, 2017

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变。下面我会以一个简单的案例来说

第一步:构建一个简单的vue项目,老规矩直接在命令行输入

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

执行结果如下

vue实现简单表格组件实例详解

然后你会在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/Hello.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数据进行操作,数据双向绑定,数据改变则视图改变,同样视图改变则数据改变。

vue实现简单表格组件实例详解

以上所述是小编给大家介绍的vue实现简单表格组件实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
canvas 实现中国象棋
Feb 17 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 #Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 #Javascript
JavaScript简单计算人的年龄示例
Apr 15 #Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 #Javascript
微信小程序动态的加载数据实例代码
Apr 14 #Javascript
You might like
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python函数局部变量用法实例分析
2015/08/04 Python
使用Python对Access读写操作
2017/03/30 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python程序变成软件的实操方法
2019/06/24 Python
python视频按帧截取图片工具
2019/07/23 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
《小石潭记》教学反思
2014/02/13 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
图书室标语
2014/06/21 职场文书
办公室个人总结
2015/02/28 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
pytorch中的numel函数用法说明
2021/05/13 Python
Flask response响应的具体使用
2021/07/15 Python
什么是Python装饰器?如何定义和使用?
2022/04/11 Python