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 相关文章推荐
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
jQuery使用方法
Feb 04 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
JavaScript随机数的组合问题案例分析
May 16 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中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
python的链表基础知识点
2020/09/13 Python
师范学院教师自荐书
2014/01/31 职场文书
进步之星获奖感言
2014/02/22 职场文书
中学生励志演讲稿
2014/04/26 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
食堂管理制度范本
2015/08/04 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技