vue实现简单表格组件实例详解 - CSDN文库

44 浏览量更新于2023-05-12 收藏 121KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，vue三大核心组件路由状态

管理，路由控制页面的渲染，页面由组件组成，数据有vuex进行管理和改变。下面我会以一个简单的案例来说

本来想这一周做一个关于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下这样写

<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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38586118

粉丝: 6
资源: 922

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈