大家好，欢迎来到IT知识分享网。
一.vue简介
1.背景
Vue.js目前最火的的一个前端框架，三大主流前端框架之一。Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。
2.优点
生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；
3.特性
MVVM模式采用了数据双向绑定（data-binding），即View的变动自动反应在ViewModel，反之亦然。
二.安装环境
https://cn.vuejs.org/v2/guide/installation.html
三.目录结构
|
build |
项目构建(webpack)相关代码 |
|
config |
配置目录，包括端口号等。我们初学可以使用默认的。 |
|
node_modules |
npm 加载的项目依赖模块 |
|
src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件 main.js: 项目的核心文件。 |
|
static |
静态资源目录，如图片、字体等。 |
|
test |
初始测试目录，可删除 |
|
.xxxx文件 |
这些是一些配置文件，包括语法配置，git配置等。 |
|
index.html |
首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
|
package.json |
项目配置文件。 |
|
README.md |
项目的说明文档，markdown 格式 |
四.vue文件结构
A.页面
B.数据处理
常用
component 组件名称
props 接收父组件数据
data 数据定义
created 实例创建后立即调用， （常用语加载数据，例如查询列表，详情等数据）
methods 方法
参考文档
https://cn.vuejs.org/v2/api/#
C.CSS样式
五.实战运用
1.新建页面
1.创建.vue后缀文件
2.设置路由
在router/index.js中的asyncRouterMap添加路由对象
path:访问路径
name:名称
component:引用对应的vue文件, 即第一步新建的文件
icon:图标
roles:角色
code:编号
keepAlive:是否缓存（一般用于缓存前一张页面的数据）
children: 子路由
2.页面布局
template标签下只可包裹一组标签 可以为div，a-card或者其他
结合antdesign进行布局
https://www.antdv.com/docs/vue/introduce-cn/
3.数据渲染
method中getTagData方法获取值存入tableData中，页面中使用tableData同时被复制，数据则被展示在页面上
六.自定义组件
1.新建子组件
2.父组件注册子组件
3.父组件引用子组件
4.父组件向子组件传值
子组件定义props
父组件在子组件标签绑定值
5.子组件向父组件传值
子组件设置emit
父组件绑定事件
七.组件库
element
vant
antdesign
常用组件 以antd为例
参考文档
https://www.antdv.com/docs/vue/introduce-cn/
1.table
2.form
input
radio
checkbox
select
datetimepick
3.button
4.tags
5.dialog
6.message
7.loading
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/183262.html
