(尚025)Vue_案例_静态组件
2023-09-11 14:14:08 时间
页面效果展示截图:
第一步.首先拆分组件
(1).首先看一下是上下/左右结构
确定为:输入框+列表+底部;
(2).确定名字
(3).创建对应的组件
===================================================================
第二步:静态组件(拆分页面+拆分样式)
1.拆分页面
(1).
(2).
(3).拆分成功后,需要在App.vue中引入这3个组件写成标签
2.拆分样式
(1).在src下新建样式base.css
将index.css拆分到base.css
将main和Item一起拷入TodoList.vue组件中去
(2).在main.js中引入base.css样式(注意:main.js中引入任何组件都有效)
===================================================================================================================================
启动项目 npm run dev ,项目启动截图如下 :
厉害了!!!
相关文章
- (尚026)Vue_案例_动态初始化显示(尚025)
- vue.js--基础 数据的双向绑定
- vue - webpack.base.conf.js
- vue - 前置工作 - 目录功能介绍
- Vue - 高效稳定的颜色选择器组件(支持鼠标拖动选择与手动输入16进制、rgb颜色值)
- [转]iview render函数常用总结(vue render函数)
- [转]Vue CLI 3搭建vue+vuex 最全分析
- 初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化
- vue监听localStorage或 sessionStorage的变化从而实现功能
- Vue中 .env .env.development .env.production 详细说明
- Vue vue-awesome-swiper 的坑
- 【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- VUE中数据排序sort() / 数据反转 reverse() 的使用
- Vue---Ant组件---下拉菜单样式
- Vue--名称案例,监听键盘事件@keyup--实时获取数据-----watch属性方法获取
- Vue完成TodoList案例
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- vue学习笔记十:Vue中引入jquery
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- Vue脚手架(vue-cli)搭建和目录结构详解
- Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)
- vue 监听的使用
- vue项目 上传到git
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想
- 初识vue小案例