vue制作part1

最新推荐文章于 2024-12-10 00:08:10 发布
原创 最新推荐文章于 2024-12-10 00:08:10 发布 · 319 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍如何在Vue项目中实现移动端自适应布局，包括引入必要库如mockjs和axios，搭建主页框架，声明组件如header与footer，并进行样式设置。同时，讲解了如何使用iconfont图标，处理图片加载及动态路径设置。

index.html
引入移动端自适应
下载 vue-router mockjs axios
在这里插入图片描述
新建public/css/inex.css public与src同级
index.html中引入index.css
搭建主页框架app.vue
声明组件header & footer
新建components/routerpage/footer.vue(header.vue)
在src下
在app.vue上挂载
在这里插入图片描述
footer基本设置 之后进行style样式设置在这里插入图片描述
footer data 在div中循环遍历 img静态 activeimg激活状态
useractive 判断是否点击
在这里插入图片描述
对footer样式进行设置 要footer的元素水平垂直居中
在这里插入图片描述
进入iconfond下载图标 png下载
把图片存在src/assets/img下
再给footer.vue中的data添加图片路径

在这里插入图片描述
图片加载不出来 对img的src进行修改
在这里插入图片描述
改为动态路径
把img文件放在public文件中
在这里插入图片描述
给img写class名设置样式
给footer写方法
userclick
在这里插入图片描述
在这里插入图片描述
点击的颜色切换
在这里插入图片描述
在这里插入图片描述
最后对true&false进行了调整 true是点击
在这里插入图片描述

写header.vue
在这里插入图片描述
当前样式仅限于局部作用
在这里插入图片描述
对header的内容进行区域划分
在这里插入图片描述
在这里插入图片描述
rem相对于父容器的大小
相对父容器居中 给父容器设置
在这里插入图片描述
header 选项卡
在这里插入图片描述
给span添加点击变化 true被选择 false没有选
通过data数据的循环绑定
在这里插入图片描述
在这里插入图片描述
添加点击事件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
居中样式
在这里插入图片描述
进入app.vue
首页加载首页的路由首页的模板
components下新建children文件夹 把footer和header挪到children
把app.vue上的import 路径修改为children
把header从app.vue中删除 import 和标签还有components 把它放在index.vue中调用
在这里插入图片描述
在routerpage上新建index.vue创建首页模板
src下新建router
在main.js中引入路由
在这里插入图片描述
在这里插入图片描述
配置路由router.js
在这里插入图片描述
在这里插入图片描述
index.vue放入header.vue
在这里插入图片描述

ISOLATE_E
关注
vue 中引用gojs绘制E-R图的方法示例
01-19
首先，在vue项目中安装gojs的依赖包，并在项目中引入。 创建tablePreview.vue <style> #sample{ position: relative; margin: 20px; } #myOverviewDiv { position: absolute; width:225px; height:100px; top: 10px; left: 10px; background-color: aliceblue; z-index: 300; /* make sure its in front */ border: solid
画ER图、流程图的专用工具
12-27
画ER图和流程图的专用工具，快捷方便，无论多么复杂的ER图和流程图都能很美观、很清晰的画出来，实为提高大家学习效率的好帮手！！！
vue 中引用gojs绘制E-R图
qq_28529373的博客
08-02 6182
首先，在vue项目中安装gojs的依赖包，并在项目中引入。 创建tablePreview.vue &lt;style&gt; #sample{ position: relative; margin: 20px; } #myOverviewDiv { position: absolute; width:225px; height:100p...
vue循环生成echarts图表
Gpointy的博客
10-13 1366
vue循环生成echarts图表
G6在vue3项目中使用步骤，g6中er图实例演示，从后端动态渲染真实数据加载
qq_46336539的博客
05-16 5457
vue3项目中使用g6的er图表实例的使用方法，1.每个图的高度根据后端获取数据长度动态赋值 2.点击节点高亮加粗显示 3根据后端返回数据设置每个节点的不同颜色样式 4.从后端获取真实数据渲染页面
vue2+antv/x6实现er图
fyydashen的博客
05-30 1887
我目前的项目安装的版本是@antv/x6 2.18.1。人狠话不多，直接上代码。
vue2 part1
E___V___E的博客
08-22 1105
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用简单应用：只需一个轻量小巧的核心库复杂应用：可以引入各式各样的Vue插件优化的本质就是加中间件，如果不够就再加一层Vue有很完整的生态，周边库一大堆awesomejs.dev/for/vue/ 这个网站有部分优秀。
尚硅谷Vue2.0教程 Part1丨vuejs从入门到精通笔记 | Vue_Basic
mh200966的博客
12-04 933
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通笔记
【Vue】Part1 指令和基础语法
最新发布
12-10 935
在Vue中可以通过自定义按键修饰符别名< div id = " app " > 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 < input type = " text " v-on: keydown.f5 = " prompt() " > < script > Vue . config . keyCodes . f5 = 116;alert('我是 F5！');} } });
python+django+vue搭建前后端分离项目Part1
Diana003的博客
01-29 6575
本章主要介绍了如何使用python+django+vue来搭建一个网站最初始步骤——搭建各种环境。
初学Vue——part 1
Rebbac的博客
03-16 252
Vue采用的开发模式 MVVM模式：面向数据编程 方便操作数据，简化了dom的操作，会减少代码量。 与MVP模式比较：MVP常用于JQuery，面向dom进行开发 Vue中的常见指令 指令 含义 v-bind 绑定 v-if 用于判断 v-for 绑定数组渲染列表 v-on 事件监听 v-model 表单输入与应用状态的双向绑定 指令简写 1.v-on可用...
Vue笔记——part（1）
qq_73958269的博客
09-05 501
目录一、Vue快速上手1.Vue概念1.1.Vue优点和缺点1.1.1优点1.1.2缺点2.创建实例2.1准备容器2.2引入核心包2.3创建Vue实例 new Vue()2.4填充配置项2.5创建Vue实例演示代码3.插值表达式3.1概念3.1.2定义3.2作用3.3注意点4.Vue核心特性：响应式5.开发者工具二、Vue指令1. v-html2. v-show和v-if2.1 v-show2.2 v-if3. v-else和v-else-if3.1v-else3.2v-else-if4. v-on5. v
Vue的学习之旅-part1
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
04-03 1396
Vue 读作 /vju:/ 不要读成v u eVuex 的x读作叉 不要读成埃克斯博主DTcode7带您 溺亖在知识的海洋里，嘿嘿嘿.~🐒 个人主页——DTcode7 的博客🐒《微信小程序相关博客》《Vue相关博客》《前端开发习惯与小技巧相关博客》《AIGC相关博客》《photoshop相关博客》😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
neal1991的专栏
05-11 3080
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]原文：基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]译者：neal1991welcome to star my articles-translator , providing you advanced articles translat
vue简单入门介绍part1
MichaelJY1991的专栏
04-29 375
vue vue简单来说是一款开源的Javascript前端框架，可以快速开发响应式前端，简化了web前端开发。 特征 虚拟DOM（Virtual DOM） vue使用虚拟DOM（React、Ember等前端框架也采用），它不会修改原有的DOM，而是复制一份DOM作为虚拟DOM。 每次改变都会比较真实DOM和虚拟DOM，发生变化才会应用到真实DOM。 数据绑定（Data Binding） ...
尚硅谷Vue2.0 教程 Part3丨vuejs从入门到精通笔记 | Vue_Test
mh200966的博客
03-02 844
尚硅谷Vue2.0 教程 Part3丨vuejs从入门到精通笔记 | Vue_Test
尚硅谷Vue2.0 全套教程 Part2丨vuejs从入门到精通笔记 | Vue_Test
mh200966的博客
03-02 641
尚硅谷Vue2.0 全套教程 Part2丨vuejs从入门到精通笔记 | Vue_Test
Vue - part1
weixin_48665759的博客
05-11 461
1. MVVM 模式 1.1 MVC 模式 MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。 Model （模型） ： 代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。 View（视图） ： 代表模型包含的数据的可视化。 Controller（控制器） ：控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。 1.2 MVC 模式实现 创建一个作为模
vue part 11
E___V___E的博客
09-16 1869
vuex的模块化与namespace 115_尚硅谷Vue技术_vuex模块化+namespace_1_哔哩哔哩_bilibili 116_尚硅谷Vue技术_vuex模块化+namespace_2_哔哩哔哩_bilibili vue-router路由 很常见的很重要的应用：Ajax请求，将响应的数据替换掉原先的代码从而实现不跳转页面的情况下实现局部刷新 1.什么是路由？ 1.一个路由就是一组映射关系（key—value） 2. key 为路径，value 可能是function 或 comp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值