MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewM
上一次认真的学习使用Vue已经是四月份的事了,当时只是简单的就像使用jQuery一样,直接引入页面,没有使用任何组件、路由,写了个cakeroom的小demo,感兴趣的可以去看下: 这次就更加深入的学习如何使用vue-cli,去组件化的开发一个项目;以及如何使用路由vue-router,完成页面之间的跳转;还有vuex如何管理页面之间需要交互的全局数据;如何使用vue-resource跨域请求,
Webpack+Vue-router的架构方式Vue-cli安装省略(vue-cli搭建)ElementUI库(pc端)的引用(见下文)打包(项目完成后打包放服务器)在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了,dist目录的名字可以自定义在配置文件里面 上面1、2项完成好后,在命令框
文章目录⭐️ 前端开发工具和环境准备? 什么是 “IDE”? 前端开发IDE⭐️ "VS Code"的下载安装? 下载VS Code? 安装VS Code⭐️ "VS Code"的简单配置? VS Code的中文设置? VS Code更改颜色主题? VS Code更改字号大小? VS Code的快捷键 工欲善其事必先利其器,一款好的开发工具可以让我们事半功倍。今天我们就来认识一下前端开发工作中使
目录 一.网页开发1.Vue、React 和 Angular2.jQuery3.响应式开发二.小程序1.微信小程序原生开发2.uni-app3.Taro4.云开发三.移动端1.Native App2.Hybrid App主流开发框架有:1.RN(React Native)2.Flutter四.桌面端1.Electron五.其他技术1.TypeScript2.前端工程化3.算法,设计模式4
关于移动端适配的技术方案主要有以下四种(1)通过媒体查询的方式即CSS3的meida queries(2)以天猫首页为代表的 flex 弹性布局(3)以淘宝首页为代表的 rem+viewport缩放(4)rem 方式 1.Media Queries早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心代码@me
事情的起因是这样的,我在实验室有一台台式电脑,还有一个笔记本。但是我只有一套好用的键盘鼠标。此前使用的时候,一般都是键盘鼠标连上台式电脑,如果要传东西去笔记本的话需要用u盘拷贝,还需要使用两套键鼠操作,非常麻烦。好在我师兄小硕硕实乃神人,转首教了我使用了无界鼠标,非常好用。所以这里做一个简单教程分享给朋友们。一、简单介绍无界鼠标(Mouse without Borders)是微软推出的免费工具,能
一、宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。(1)宽度自适应块元素宽度默认为auto(2) 高度自适应元素{height:auto;}/高度不写二、浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)解决高度塌陷的方法(
由于内容较多,我将其分为了里两部分:Vue3较Vue2的更新内容(一)>>>18、按键修饰符变更vue3将不再支持使用数字 (即键码) 作为 v-on 修饰符,不再支持 config.keyCodes 在 Vue 2 中,keyCodes 可以作为修改 v-on 方法的一种方式。<!-- 键码版本 -->
<input v-on:keyup.13="submit
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库,在开发移动端之前,通常要做好rem适配,当然也可以的vw适配,这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件:步骤一:安装 npm i amfe-flexible步骤二:引用 (在main.js里面引用一下下)import 'amfe-flexible'步骤三:看效
转载
2024-04-07 13:07:12
635阅读
使用的方案 lib-flexible-computer + px2remLoader + postcss-px2remlib-flexible:阿里可伸缩布局方案
px2rem-loader:px 转 rem
postcss-px2rem: 将代码中px自动转化成对应的rem的一个插件
下面这个插件会代替lib-flexible 更好一些 适用于pc
npm i lib-flexible-co
vue + 原生input 实现购物车选择按钮 + 修改原生input样式公司做了一个pc版的商城,我负责购物车订单这块,基于业务原因研究了购物车的逻辑实现,所以就有了以下的代码,本文用于记录,如果有兴趣的大神可以阅读源码。也可以直接使用。静态页面HTML部分<template>
<div id="tree">
<div class="tree">
简介:远程桌面控制工具(Remote Desktop Control Tool)是一种软件程序,它允许用户在本地计算机上通过网络访问和控制远程计算机。使用远程桌面控制工具,用户可以像操作本地计算机一样地对远程计算机进行操作,包括打开和关闭应用程序、查看和编辑文件、调整设置等。远程桌面控制工具通常由两部分组成:客户端和服务器端。客户端是安装在本地计算机上的软件程序,而服务器端则运行在远程计算机上。当
rem布局是现在比较流行的移动端布局,掌握了这种布局方式后,可以很轻易的实现布局自适应手机屏幕。目前淘宝首页就是采用的这种布局方式。我曾经上网查过很多资料,看过很多解释原理的和使用方法的,可是还是一脸懵逼,可能我是一枚女程序员,脑子转不过来,必须要弄得很清楚透彻才能想明白这个布局的原理。后来我自己在纸上琢磨,用数学公式成功把自己弄明白了。希望也能帮到大家。就像一道数学题一样,见下题:首先,假设UI
前言在移动端页面开发过程中避免不了对页面做适配,适配方案说多还是挺多的,接下来主要讨论一下rem和em。兼容性ios:6.1系统以上都支持android:2.1系统以上都支持大部分主流浏览器都支持,可以安心的使用~一、remrem是基于页面根元素html字体大小来设置,例如给html元素设置font-size: 30px; p元素的font-size: 0.5rem;可以使用geComputedS
Windows系统一、先下载node.js,为了之后可以使用npm命令下载第三方包下载地址:建议安装LTS版本Download | Node.js二、安装淘宝镜像(因为经常下载第三方包速度比较块-节省时间)(设置淘宝镜像:大家都知道国内直接使用 npm 的官方镜像是非常慢的,所以这里推荐使用淘宝 NPM 镜像。)使用管理员身份打开cmd,在打开的命令行界面输入:三、接着安装vue和vu
移动端适配方案,说多也很多。可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便。使用rem不仅可以设置字体大小,块大小也可以设置。而且可以良好的适配各种终端,所以这方案很受欢迎。rem定义及浏览器支持情况rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就
转载
2024-08-23 21:40:25
668阅读
前端是什么?在回答这个问题之前,我想到了一道面试题:当我们在浏览器中输入网址并按回车之后,接下来会发生什么?我们来简单地看一看 “网页展现” 的整个过程。比如这里有一个用户,它需要访问 abc.com 这个网址。一般来说,当用户输入一个域名时,是在请求一个 HTML 资源。当他完成域名解析之后,他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。有时候 Web 服务器直接就可
一. 当用户访问淘宝网站的时候,网站做了什么处理?大网站:一般情况下,PC端的网页和移动端的网页是两套代码。用户: -> 淘宝的服务端(检测用户是PC端过来,还是移动端) -> PC端 -> -> 移动端 -> 后端重定向 -> PC: 移动:那么有可能用一套代码:既可以针对PC端又可以适配移动端。 答:可以做到。响应式布局方案。 注:这种方案针对小网站,不适合
移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */
html {
font-size: 12px;
}
/*
转载
2024-08-27 17:08:32
131阅读