- 博客(41)
- 收藏
- 关注
原创 -------------------------面试散文-----------------------------------
问题2:为什么main.js 是vue 项目的问题件入口?回答:当命令行中输入npm run dev后,发生了这样一连串事件 webpack选择了开发配置,并进入main.js入口文件,构建项目依赖图。webpack 将整理后的所有依赖模块打包成输出文件app.js,接着htmlwebpackPlugin 将它挂载到index.html页面上,最终呈现如图。
2024-06-12 09:11:45 270
原创 html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应
rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size变化而变化。以750px 设计稿为例 100vw=750px 750/18.75=40 即 1rem=40px;以1920px 设计稿为例 100vw=1920px 1920 / 48 =40 即 1rem=40px;在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。
2024-05-17 14:33:55 712
原创 vue3-选项式API-Watch,watchEffect
备注reactive定义的数据不可以用=全部修改,如果修改需要用object.assign(old,new) ref定义的数据可以直接赋值修改。如果修改的是ref定义的对象中的属性,newValue和oldValue都是新值,因为他们是同一个对象。监视ref定义的对象类型数据,监视的是对象的地址值,若想监视对象内部的属性变化,需要手动开启深度监听。监视ref定义的基本类型数据:直接写数据名即可,监视的是其value值的改变。监视reactive定义的对象类型数据,且默认开启了深度监听。
2024-05-16 19:49:49 352
原创 vue3-响应式API(工具函数)-unRef
理解:val = isRef(val) ? val.value : val 应用:sortField = unref(tableRef)?.getSortFields()
2024-05-16 13:24:18 239
原创 JS技能 Map 和 Set
let arrNew=[{name:'车型1',value:'55'},{name:'车型1',value:'55'},{name:'车型3',value:'65'}]答:Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值,答:是一个特殊的类型集合即 “值的集合(没有键)” 它的每个值只出现一次。什么样的数据称为set数据结构?什么样的数据称为Map数据结构?
2024-04-28 17:27:10 215 4
原创 JS技能 节流和防抖
防抖(debounce):是指在事件触发后,延迟一定时间在执行回调函数,如果在延迟时间内又触发了该事件,则重新计时。思路:事件要用到函数,延迟一定时间所以要用到定时器,需要知道在延迟的时间是否又触发了该事件要用到闭包账户:},1000);//这样子建立了一个闭包,timer始终存在// 这里返回的函数是每次用户实际调用的防抖函数。
2024-03-26 11:14:45 232
原创 Css 样式记录
float:left;'></div>width:100%;'></div></div>方法2:'>'></div>'></div>
2024-03-19 12:01:12 419
原创 vue3 创建项目疑难杂症
1.安装 cnpm install postcss-loader autoprefixer@8.0.0 postcss -D。2.在package.json 中添加。
2023-12-20 17:52:18 2481 4
原创 Windows 启动 Nginx
windows 启动Nginx1.下载稳定版本Nginx getnginx: download2.在下载的Nginx文件里运行 start nginx3.在浏览器里输入http://localhost/查看nginx是否启动成功
2022-05-05 15:42:45 4057
转载 vue 项目引入阿里图标
1.去阿里图标矢量图标库将想要的图标添加入库 2.再去库中将图标添加到项目。3.再到我的项目中,选择,我这里采用的是将图标代码包下载到本地再引入到vue项目中。4.在vue项目的assets文件夹下新建一个iconfont文件夹(名字随意),将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、icon...
2019-02-20 10:42:35 329
原创 在vue中封装一个svg组件
在vue中封装一个svg组件 第一步: 在vue脚手架生成的文件夹下的src/components创建一个Svg 在components->xx.vue<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="...
2019-02-19 16:16:25 1050 1
原创 vue--管理后台手把手搭建-----(5)
权限写完了,开始写主页面,如下主要由侧边栏,头部,tag标签和主页面构成。主要介绍tag标签。a 侧边栏: 引用element-ui框架,从全局导航钩子开始说起,当我们拉取完用户token后,需要拉取用户权限,我们需要对拉取来的用户权限做处理,判断是否为超管权限或者为该用户应展示的权限内容,将其存放到vuex中,当我们渲染的时候,在从vuex中获取数据。b tag标...
2018-09-21 16:33:11 1864 2
原创 vue--管理后台手把手搭建-----(4)
在项目的入口文件写路由导航钩子,进入路由的时候判断当前是否有token,进行判断在管理后台手把手搭建(1)的时候已经详细介绍:代码如下 import router from './router'import store from './store'import NProgress from 'nprogress' // progress barimport 'nprogress/n...
2018-09-19 17:13:26 502
原创 vue--管理后台手把手搭建-----(3)
前言:老工程师引用的图标是阿里巴巴矢量图标,我还没弄,先写着别的吧,毕竟没图标也不是太碍事。登录页面:element 表单,表单校验,像后台异步发送表单数据,若发送成功调转到首页,否则登录不进去。页面效果展示:要说的就是将数据异步提交到vuex,如果返回数据成功,则跳转到“/”页面。 vuex的actions接收login页面发过来的请求,并发送登录接口给后台(涉及axi...
2018-09-19 13:30:46 932
原创 vue--管理后台手把手搭建-----(2)
我们搭建webpack框架,并引入element(搭建框架之前有讲过,从引入element开始)(1)引入element.ui a) cnpm i element-ui -S b) 在main.js中引入 import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk...
2018-09-17 17:46:15 1175
原创 vue--管理后台手把手搭建-----(1)
生活要有态度,知识要思进取。前言:前辈给一个管理后台系统,叫自己学习,整日散漫的我终于在身边人的帮助下意识到自己的问题,重新规划路线,开始认真工作了。管理后台从功能上讲,我的理解是不同权限的人登录进来之后展示不同权限的页面。看前辈给的后台管理系统,是vue-cli+element.ui框架学习过程中大致划分为:1)动态路由编写2)用户登录,获取用户token,并将用户token...
2018-09-17 10:58:00 1100
原创 vue-cli环境下 图片懒加载插件的使用
1)插件地址:https://github.com/hilongjw/vue-lazyload2)简单使用方法 a) 安装插件:npm install vue-lazyload --save-dev b) 在src目录下的main.js 配置import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad,{...
2018-09-04 10:01:45 744
原创 vue-cli项目引入boostrap
(1) 引入Jquery npm install jquery --save-dev (2) 修改build->webpack.base.conf.js a 引入webpack对象: const webpack=require("webpack") b 在module.exports尾部中加入 plugins: [ new webpack...
2018-09-03 17:30:25 338
原创 vue项目登录成功后退出时清空sessionId和userId的个人理解
项目背景:首先介绍一下,项目中用了vuex; 从前端页面来讲,如果登录表单的内容验证都通过之后,当我们点击登录按钮的时候向后台发送请求,请求成功后,后台会给我们返回信息,其中信息会有sessionStr和sessionId等个人标识(我的理解是后台根据这个sessionStr和sessionId在control层或者其他层来写登录的人的个人信息)所以当我们点击退出的时候,一般会像后台...
2018-06-01 10:41:42 28819
原创 修改滚动条样式
先说下布局吧 一个固定大小的盒子,里面装着所有数据的盒子 <div class="List"> <div class="allData"> <ul v-for="(item,id) in items" v-bind:key="id"> <li><img src=
2018-05-23 14:06:28 2390
原创 vue项目打包部署(Linux命令)
1)首先在自己的vue项目上打包,运行npm run build命令2)登录自己的软件(我的是secureCRT)3) 找到自己公司运维给的部署地址4)介绍个命令 ll 是查看该项目下文件目录 cd 返回上一级文件 还有一些小技巧 Tab键是不全路径 上箭头是上次写过的命令5)开始部署:为部署的tomcat目录 ...
2018-05-18 16:21:44 17283
原创 vue2.0项目实现表单向上滚动的效果
<div class="List" @mouseout="start()"> <div class="allData" :style="{top}" @mouseover="forbidden()"> <ul v-for="(item,id) in items" v-bind:key=&quo
2018-05-16 14:53:50 4526
原创 vue2.0项目记住密码和用户名实例
小的今天突来兴致,试了一下将用户名和密码存在cookie和localStorage里如何实现;从代码难易程度来讲,果断选择了将用户名和密码存在localStorage里面。当然菜鸟上这么说的,楼下。也许我不是一个好的程序员,不说废话了,直接上代码了:<template> <el-form :model="ruleForm" :rules="rules" ref="ruleFo...
2018-05-10 17:36:39 7991 3
原创 vue学习之路----基础(transition组件)
<transition name="fade"> <p v-show="show"></p> //运动东西(元素,属性,路由)</transition> class定义: .fade-enter{} //初始状态 .fade-enter-active {} //变化成什么样->当元素显示出来 .fa
2018-05-06 21:46:46 267
原创 vue学习之路---基础(实例方法/特殊属性)
vue为什么会有key的属性? vue为了高效率渲染页面,会复用已有元素,也就是说不会从头开始渲染元素。但是有些时候我们并不希望是复用元素,比如说在v-for循环列表的时候,我们是希望所有的选项(包括相同的元素选项)都是可以渲染到页面上的。vue2.0中提出的解决办法:key的特殊属性。key属性的小理解: 比如说,我们在页面上<template v-if="login=...
2018-04-28 17:45:25 246
原创 vue学习之路 ---基础(实例方法/事件)
.vm.$on+vm.$emit vm.$on( event, callback )监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( event, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。 v-on的简写为@ ...
2018-04-28 14:29:01 147
原创 vue学习之路 ---基础(实例方法/数据)
实例方法/数据 vm.$watch html:<div id="watch"> firstName:<input type="text" name="li" v-model="firstName"> lastName:<input type="text" name="fe
2018-04-27 18:03:46 186
转载 vue项目组件之间的数据传递
Vue的组件作用域都是孤立的,也就是说子组件内不能直接引用父组件的数据。需要通过特定的方法才能完成各个组件之间的通信首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件。 一、父组件向子组件传递数据在 Vue 中,可以使用 props 向子组件传递数据。子组件部分:这是 header.vue 的 HTML 部分,logo 是在 data 中...
2018-04-27 16:07:01 5188 1
原创 修改element-ui组件样式
在项目中,我们用element-ui让我们的开发速度大大提升,当样式和我们的需求不一样时,我们该如何修改呢? 新增<style></style>标签,并在里面修改所需样式,切记,不加scope,否则无效,如下如所示 ...
2018-04-26 14:54:21 12347 4
原创 Visual Studio Code查找工具栏
1,写项目时经常不小心关闭右侧文件夹目录,那么如何查找文件夹目录呢? 点击中的查看,选择资源管理器,便可恢复项目文件夹目录。2, 如果不小心关闭标题栏,如何查找呢?回到首页点击学习下面的,查找并运行所有命令->点击查看,标题栏即可显示。...
2018-04-26 13:33:20 12713
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人