一、什么是 Vue ? 首先，Vue 是一个 MVVM 框架，M -- 模型，就是用来定义驱动的数据，V -- 视图，是经过数据改变后的 html，VM -- 框架视图，就是用来实现双向绑定的中间桥梁。Vue.js 是采用数据劫持结合发布者-订阅者模式的方法，通过 Object.definePropety() 来接吃个够属性的 setter、getter,在数据变动时发布消息给订阅者，出发相应的
公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。浅析rem首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼rem自适应。CSS3
转载
2024-07-11 21:25:58
237阅读
接上文，开始准备布局页，见下图，包括顶部一个头部和一个底部导航。1、在we-vue组件库中找到对应的组件 1)头部，包括网站logo和【注册|登陆】按钮，这对应着we-vue组件库的Header组件2）底部导航，包括【首页、所有商品、购物车、我】 四个菜单项，这对应着we-vue组件库的Tabbar组件 这两个组件都位于官方文档的【导航相关】目录下，we-vue是所有基于weu
面试中如何考察，以何种方式考察考察重点，不考察细节。2/8原则和使用相关的原理1. Vue响应式原理vue响应式指的是：组件的data发生变化，立刻触发试图的更新原理：Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。通过原生js提供
首先新建一个vue项目，然后安装element-ui组件，vuex状态管理等需要用到的。项目建立好能运行之后，在src/commponents文件夹下新建一个layout文件夹用于书写布局相关代码，在文件夹内新建header.vue,slider.vue,footer.vue,contentMain.vue,home.vue文件（当然也可以只新建一个home文件，把相关布局全部写在home.vue
1.src下新建rem.js(function(window, document) { // 给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。 const hotcss = {};(function() { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端...
原创
2023-01-03 14:58:05
412阅读
Vue路由懒加载对于SPA单页应用，当打包构建时，JavaScript包会变得非常大，影响页面加载速度，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这就是路由的懒加载。实现方式
Vue异步组件
Vue允许以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。Vu
1 环境配置React技术栈：React + Redux + Dva + UI库React开发采用的架构是：Webpack + CMD（import/export）+ ES6 + babel-loader + ReactAPI文档：https://facebook.github.io/react/docs/hello-world.html 现在开始配置一个基础项目。 创建项目文
目录一、行内块级水平垂直居中方案。二、定位实现水平垂直居中方案（一）三、定位实现水平垂直居中方案（二）四、定位实现水平垂直居中方案（三）五、定位实现水平垂直居中方案（四）六、flex方案七、Grid方案八、两列布局法1、float+calc（）完成左列定宽，右列自适应2、float+margin-left 完成左列定宽，右列自适应3、position: absolute;+
转载
2024-09-30 12:59:02
134阅读
vue中env文件的配置vue项目中env文件的配置文件名：文件内容：关于文件的加载process.env属性注意修改完要重新启动一遍项目vue项目中 .eslintrc.jsvue项目中 .gitignorevue 项目中 .eslintignorevue 项目中.stylelintrc.jsvue 项目中 jsconfig.jsonvue 项目中 .editorconfig vue项目中en
转载
2024-10-25 20:49:08
52阅读
在实际开发中，我们浏览网页，网页顶部的导航栏Header和侧边的菜单栏Aside，以及底部的footer等内容往往是不发生改变的，如果在每次页面跳转、提交表单后都去重写这部分是很麻烦的，而Element-Plus为我们提供了封装好的标签，让我们能够通过组件化来实现页面的布局。注意！将这些封装成组件后使用会出现错位的问题 出现这个问题的原因是封装成组件后，<el-container&
转载
2024-10-12 16:07:05
243阅读
安装并使用element-ui，vue add element //vue-cli3.x安装方式
npm install element-ui --save //vue-cli2.x的安装方式在根目录新建一个layouts文件夹，这里是放所有基础layout文件的地方。先新建 BasicLayout.vue。 这个文件，相当于最基础的布局文件 比如要做一个类似这样的页面。 然后再分别新建s
使用的方案 lib-flexible-computer + px2remLoader + postcss-px2remlib-flexible：阿里可伸缩布局方案
px2rem-loader：px 转 rem
postcss-px2rem： 将代码中px自动转化成对应的rem的一个插件
下面这个插件会代替lib-flexible 更好一些 适用于pc
npm i lib-flexible-co
rem布局em和rem的认识在布局中，除了px之外，还有两个常见的单位，em和remem： 相对于当前元素的字体大小→ 1em = 当前标签的font-sizerem： 相对于根元素（html）的字体大小→ 1rem = html标签的font-size浏览器默认的font-size的大小为16pxrem布局的效果：屏幕越大，标签就越大屏幕越小，标签就越小rem布局的原理：通过媒体查询的方式动态改
转载
2024-08-20 11:45:10
79阅读
移动web开发之rem布局rem 单位 rem (root em) 是一个相对单位,类似于em, em 是父元素字体大小不同的是rem的基准是相对于html元素的字体大小rem使用:比如,根元素(html)设置font-sizi=12px ,非根元素设置width:2rem,则换成px表示就是24px./* 根html 为 12px */html { font-size: 12px;}/*
转载
2021-05-07 11:47:16
264阅读
2评论
动态布局动态布局主要表现在两方面： 1、布局本身是非固定的 2、布局的内容是非固定的引起布局动态变化的因素我们称动态因子，通常情况下，动态因子是css样式，也就是说，通过使用不同的样式以达到动态变更布局的效果。然后在特殊情况下，动态因子也可以是数据，也就是说，可以根据不同的数据来影响布局的显示从而达到动态的效果。知识点：grid布局，VUE组件显示效果场景一：完整显示3*4布局 场景二：完整显示3
em单位 em是相对于父元素的字体大小来说的 小demo div { font-size: 12px; } div p { width: 10em; height: 10em; background: pink; } <div> <p>dd</p> </div> p的大小是基于父盒子的字体大小来说的
转载
2021-02-05 22:25:00
175阅读
2评论
vue.js开发移动端项目时，使用rem布局做页面自适应
原创
2018-01-04 16:48:14
10000+阅读
vue3与vue2响应式的区别1.vue2响应式数据在data中注册，编译时直接将data中的所有数据绑定监听利用Object.defineProperyty()监听数据的get和set用Observe,Dep,Watcher三个类实现依赖收集缺点：对于在html中未使用的数据也设置了监听，需要对每一个基本数据类型都要设置劫持，defineProperty监听不到数组/对象内部变化，同时多次调用o
Vue 最独特的特性之一，是其非侵入性的响应式系统。众所周知，Vue的数据双向绑定给前端工作人员带来了极大的便捷。响应式系统使得开发人员只需要关注数据而无需手动控制dom来操作视图。假设 total = x * y当数据 x 改变时，Vue会帮助我们更改视图中所有的 x 及 total 等。那么在这个无比顺滑的过程中，Vue内部是如何做到的呢？答案是：数据拦截/数据代理依赖收集发布订阅翻译成人话就
