vant做表格_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下这样写
export default {
data () {
return {
}
},
components: {
}
}
在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: '',
components: { App }
})
main.js主要包括模块导⼊以及组件导⼊和注册，路由配置，当然路由配置可以单独写出来。
由上⾯的路由配置可以知道当path为‘/’时候，我们渲染到app.vue中的页⾯为home.vue页⾯，如下
这个是路由对应的页⾯，下⾯就是⼀个表格组件
import table from '../components/table.vue'
export default {
jquery是什么功能组件
data () {
return {
}
},
components: {
tableCom: table
}
}
其中import table from '../components/Hello.vue'表⽰导⼊这个table组件到home.vue页⾯
但是只导⼊⽽没有注册这个组件是⽆效的，就好像定义了⼀个函数⽽没有执⾏。所以我们需要注册这个组件
也就是components:{tableCom: table}意思是⾃定义⼀个tableCom标签来映射这个组件，但是vue规定但标签名过长的时候，需要以分开⽅式去写⽐如tableCom 要写成table-com.
这样就完成了⼀个组件的导⼊和注册，下⾯我们来完成这个组件
table.vue界⾯如下
⽤户管理
序号⽤户名年龄毕业学校操作
{{index+1}}{{user.name}}{{user.age}}{{user.school}}removeinsert
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)
}
}
}
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;
}
这个组件实现了简单的增删功能，主要是对data数据的修改，我们要明⽩，我们平常使⽤的jquery只是对dom节点的操作，⽐如我们要改变⼀个数据我们就要⾸先获取dom然后通过jquery的⽅法来获取值，⽽vue则不然它是对data数据进⾏操作，数据双向绑定，数据改变则视图改变，同样视图改变则数据改变。
到最后我们看到的效果是这样的
⼤家有什么问题可以联系我，或者留⾔
⼤家也许也发现了这样操作data太繁琐，有没有简单的⽅式呢，有，那就是vuex 就像⼀个仓库提供你需要的数据。下⼀章节我会开始对vuex的使⽤做个总结，希望想了解更多的朋友关注我，谢谢你们的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。