目录
创建一个vue工程:
SPA:
一切皆组件
在App.vue文件中:
全局唯一的路由配置文件router/index.js:
在HomView.vue文件中:
代码分析:
Element UI局部组件库的使用:
1.官网:
2.安装
3.导入
创建一个vue工程:
文章图片
文章图片
文章图片
文章图片
文章图片
路由Vue Router:
路由的作用是用来跳转页面的
但是Vue工程是SPA工程,只存在一个HTML页面,其他的全部称为组件
把组件当作页面进行跳转需要使用到Vue路由
文章图片
文章图片
文章图片
文章图片
文章图片
右击用idea打开:
文章图片
文章图片
SPA: 单页web应用(single page web application,SPA),就是只有一张web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新页面的web应用程序
一切皆组件 工程启动后访问http://localhost:8080/
访问的是index.html
文章图片
这个空div里面默认挂载的是App.vue中里面的内容
在App.vue文件中:
文章图片
文章图片
文章图片
全局唯一的路由配置文件router/index.js:
文章图片
文章图片
文章图片
在HomView.vue文件中:
文章图片
文章图片
代码分析:
文章图片
文章图片
文章图片
文章图片
通过路由挂载组件的几个必要点:
1.要有路由挂载器
2.要有路由挂载链接
3.要在router/index中注册组件和路由地址关系
页面级别的组件才会用到路由挂载,这一类组件的vue文件创建在src/views中
页面中的局部组件创建在src/components中,这一类组件不通过路由挂载,而是采用父子组件
文章图片
文章图片
Element UI局部组件库的使用:
1.官网:
元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)
注意当前的Vue工程是2.x还是3.x版本
文章图片
文章图片
2.安装
文章图片
文章图片
3.导入
因为Element UI这个三方库中提供了很多的局部组件,导入方式有两种
按需导入(局部导入),用的什么组件导入什么组件
就像是在UserView导入UserTable一样
被导入的子组件只能在当前父组件使用
文章图片
文章图片
全局导入:
一次性导入所有的局部组件
可以在任意的组件中使用这些局部组件
文章图片
文章图片
按钮:
文章图片
文章图片
滚动条:
文章图片
文章图片
文章图片
From表单组件:
文章图片
Vue2.x和Vue3.x的区域:
Vue2.x中使用的语言是Javascript
Vue3.x中使用的是语言可以是Javascript(js),还可以支持Typescript(ts)
建议使用vue2+ElementUI2版本
【前端|9.06 Day47---Element UI局部组件库的使用】
推荐阅读
- SQL|MVCC在重复读和读已提交场景以及幻读的解决
- 前端|SPA项目实现首页导航以及左侧菜单
- web前端基础学习|iOS设计模式--MVC、MVP、MVVM
- vue.js|Vue路由&nodejs环境搭建
- 前端|[前端项目]微信小程序 小商城
- 微信小程序|UniApp微信小程序登录不同角色动态设置TabBer(多于5个TabBer页面)
- 程序员|96道前端面试题,下载量瞬秒百万
- 问题集合2
- #|vue3下watch的使用