Vue项目三 项目主体页面的搭建前言在Vue项目二中,完成的是项目的注册和登录逻辑的实现,当我们登陆成功后,页面会跳转到路由为path:"/"的页面下,在该路由下,我们进行项目主体页面的搭建。一、项目整体布局分析项目整体采用后台管理系统常用布局,即上布局为头部布局,下左布局为导航布局,下右布局为信息列表展示布局。如图所示。二、页面搭建步骤1.搭建主体展示的页面主体展示的页面是当我们登陆成功后页面的
2021/3/25vue的基本使用 <head>
<!-- 1.先引入vue核心文件-->
<script src="vue.js"></script>
</head>
<body>
<!--在el属性对象的标签中 填写正确的vue语法展示或者控制数据-->
<div id="app">
定义SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用(一个html页面),一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。MPA多页面应用(MultiPage Application),指有多个独立页面的应用(多个html页面),每个页面必须重复加载js、c
实现技术:webpack构建工具: jquery: bootstrap:  
前面介绍了如何新建vue工程vscode新建vue工程,这篇就介绍如何编写自己的第一个页面 开始之前,先介绍下vue工程的目录结构build 项目构建(webpack)相关代码config 项目相关配置,配置端口信息等node_modules 项目依赖等src>assets 放置一些图片 如项目的logo、iconssrc>conponents 项目的一些组件,如自定义组件src>
前几天遇到一个问题,在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就已经加载了,并且他绑定的值也是空的,问题找到了,怎么解决那?有两种方法解决,请看下面代码。方法一、开始的时候让子组件隐藏,然后等数据返回的时候,让子组件显示。export default
公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下。首先项目中,做过移动端的适配,也有现在的大屏需求,中间都离不开不一个单位rem,自适应看起来就很麻烦,不过无惧困难,困难才会看到你说,哟,厉害了,我闪~,下面慢慢聊来。浅析rem首先rem是css单位,相比于px固定的像素单位,rem更加的灵活,还有现在也比较好的vm。如果从未了解过,可以先过过眼rem自适应。CSS3
目录SPA(Single Page Application) 单页面应用 1. 单页面应用与多页面应用对比2. 单页面应用步骤3. SPA路由跳转SPA(Single Page Application) 单页面应用 单页面是指整个应用程序只有一个唯一完整的 HTML 页面,而其它所谓
1.src下新建rem.js(function(window, document) { // 给hotcss开辟个命名空间,别问我为什么,我要给你准备你会用到的方法,免得用到的时候还要自己写。 const hotcss = {};(function() { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端...
原创
2023-01-03 14:58:05
379阅读
.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析。 在webpack构建中,需要安装vue-loader 对.vue文件进行解析。在.vue 文件,可以安装vue syntax highlight 插件,增加对文件的支持。 用vue-cli 新建一
(什么时候做响应式,怎么做响应式) 目前看来,内容为主的社区网站或者电商网站使用自适应布局的并不多,仅有的几个也没有做大范围的自适应布局,一般是使用媒体查询在几个断点(不超过三个,微博这样的只设置了一个断点)做响应式进行布局微调。内容为主(大量文字,少量图片)的网站不适合做响应式布局,大量图片少量文字的网站比较适合做响应式布局(比如花瓣,airbnb)。是否做响应式和用户体验没有必然关系。如果要做
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库,在开发移动端之前,通常要做好rem适配,当然也可以的vw适配,这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件:步骤一:安装 npm i amfe-flexible步骤二:引用 (在main.js里面引用一下下)import 'amfe-flexible'步骤三:看效
计算属性和侦听器计算属性模板内的表达式虽然方便,但是如果在进行复杂运算的时候,在模板中放入太多的逻辑会让模板难以维护。例如:<div id = "a">
{{ messgae.split('').reverse().join('') }}
</div>这段代码用于反转字符,当你想多次使用的时候整段代码的可读性就会变得非常差。所以,对于任何复杂一点的逻辑都应该使用计算
一 什么是remrem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过rem计算的规则是依赖根元素,em是依赖父元素计算。二 为什么使用rem及原理2.1 为什么使用remr
customRef 返回一个ref对象,可以显式地控制依赖追踪和触发响应示例<template>
<div>
<p>{{obj}}</p>
<button @click="inc">button</button>
</div>
</template>
<
实现的效果如下:用admin账号登录展示 用xiaoxiao账号登录: 并且在xiaoxiao登录的系统中,手动在地址栏输入'/user',请求admin用户才会显示的用户管理页,页面不会展示。实现思路如下:1.用户登录,后端返回的data中有菜单数据,把菜单数据存储在vuex中,在侧边栏组件中去获取到存储在vuex中的菜单数据,根据数据动态生成侧边栏。本项目我是用Mock模拟
样式如下需要注意的点实现题目内容的最外层即循环题目数据的位置谨慎使用div标签包裹,否则v-if控制的样式可能有问题。使用div标签包裹并且在最外层设置题目样式的页面:<div class="topicContent" v-for="item in subjectType" :key="item.type"></div>.topicContent{
height:
Vue基础问题总结大全(一)一、单页应用二、vue-router两种模式的区别 一、单页应用什么是单页应用?单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。单页面应用的优缺点: 优点: 1、用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操
首先,为什么要选择svg,理由是1.兼容性,现在svg的基本兼容性已经很好了。在canIuse中可以查看。2.相比较传统的图片,svg在放大的时候不会失真3.因为svg是xml形式的,利于浏览器seo搜索,所以一般logo强烈建议用svg4.可以修改颜色和宽高(fill,width,height)5.性能,性能是前端很重要的一个指标,svg相比iconfont图标整体加载性能要好,svg spri
设计师给到我们前端的设计稿一般是按照iphone6屏幕(iphone6 两倍屏 设备 分辨率(物理尺寸) 屏幕宽高 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 750×1334 px 375×667px 326PPI 40px 88px 98px )实际大小给出的标注,我们如何在尽可
原创
2022-07-18 10:07:49
176阅读