theme: smartblue Fabric.js 简介 用官方的话来讲 Fabric.js 是一个强大而简单的 Javascript HTML5 canvas 工具库 简单来说，如果你需要用...本文使用的开发环境 本文案例中使用了 Fabric.js 4.6 这个版本。 使用了 Vite 构建 Vue3 项目。...搭建项目 npm init @vitejs/app 选择 Vue3，之后再根据提示初始化项目即可。 安装 Fabric.js npm install fabric --save 为什么本文只写渐变？...image.png 没错，本文只想证明在 Fabric.js 4.6版本中是可以实现径向渐变的。...; canvas.add(circle) } onMounted(() => { init() }) r1、r2、x1、y1、x2、y2 这几个参数可以自己修改值然后看看效果
什么是Vue.js 不管你想不想了解，你只需要大概知道，Vue就是和jQuery一样是一个前端框架，它的中心思想就是数据驱动，像远古时代的老前辈jQuery是结构驱动，什么意思呢，以前我们写代码时常用$...，像index.htm，index.php等；打开build目录中的webpack.base.conf.js，会看到这样的代码 说明我们的入口js文件在src目录中的main.js，接下来我们就分析下这些初始化代码先...就是jquery-min.js，然后Vue就是$；然后又引入了..../App文件，也就是目录中和main.js同级的App.vue文件；在Vue中引入文件可以直接用import，文件后缀名可以是.vue，这是Vue自己的文件类型，之前说的webpack会将js和css文件打包...前面说的src/main.js中有一句引入路由器的代码。 import router from './router' 现在就让我们打开router目录下的js文件。
2.Vue.js到底是什么？ 想必现在能看到我这篇文章的人，都是用着APP或者网页版知乎在阅读把。...4.你前面说的网页版知乎我也可以用JQuery写啊，为什么要用Vue.js呢？ 讲到JQuery，就不得不说到JavaScript的DOM操作了。...而这种绑定关系，在图上是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。...NPM是一个node.js的包管理器。我们在传统开发的时候，JQuery.js大多都是百度搜索，然后去官网下载，或者直接引入CDN资源，这种方法太过于麻烦。...Vue-route是vue的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。
@toc10.3 基本路由10.3.1 总结: 编写使用路由的 3 步定义路由组件 注册路由 使用路由10.3.2案例-基本路由切换效果注意点1：路由组件通常放在...完整代码完整项目路径main.js//引入Vueimport Vue from 'vue'//引入Appimport App from '..../App.vue'//引入VueRouterimport VueRouter from 'vue-router'//引入路由器import router from '....// 该文件专门用于创建整个应用的路由器import VueRouter from 'vue-router'//引入组件import About from '.....-- 开启移动端的理想视口 --> <!
稍微了解一下 nodejs ，前端框架的原理是这样的，并不是像我们之前那样直接写操作 DOM 的 js 脚本或者使用 jquery，而是用 ES5、ES6 、TypeScript 等标准去组织项目代码，...这其中需要用到 nodejs 的很多包，最后编译的时候，把用这些标准组织的代码编译成我们通常意义上的 js 代码，然后在浏览器执行。...如果你之前用过 vue，会发现 react 和 vue 差别是非常大的。...而 react 是在每个视图中维护一个 state ，每次只能操作当前视图的 state ，每次页面加载需要初始化 state ，state 绑定到视图上，但是视图的修改，需要通知 state 。...router 路由器，如果页面很多，项目很大的情况下，就需要路由器来管理页面路径了，访问哪个路径要加载哪个页面，这些还是统一管理起来比较好。
在现在大多数的网站开发中，都有很多动画效果。 有些动画是页面一加载就要的，还有一些动画是需要页面滚动到那个元素才要展示的。...jQuery插件，需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。...12 js/jquery-1.11.0.min.js">js/jquery.scrollex.js"> 调用插件 在页面DOM元素加载完毕之后，你可以通过scrollex()方法来初始化插件。...例如，在指定元素上制作进入视口和离开视口的效果： 123456789101112 $(function() { $('#foobar').scrollex({ enter: function()
公共资源 每次切换页面，都要重新请求页面中的bootstrap.css、jquery.js、bootstrap.js等多个页面都要用到的资源，请求次数多加载慢。...单页面应用步骤 （1）先创建唯一完整的 HTML 页面（一个支持 vue 基本结构的空页面） js/vue.js"> 在唯一完整的 HTML 页面顶部引入 vue-router.js（官方）； b. 创建路由器对象。...先将路由器对象保存在 router/index.js 文件中；然后先创建路由字典，再创建路由器对象； //创建路由器字典 var routes=[ {path:"/相对路径", component.../vue.js"> js/vue-router.js"> js"></script
这里有 30 个 JavaScript 动画库可供我们在今后的项目中使用。...9、Tilt.js 地址：http://gijsroge.github.io/tilt.js/ 一个微小的 requestAnimationFrame 为 jQuery 提供了 60+fps 的轻量级视差悬停倾斜效果...17、Locomotive Scroll 地址：https://locomotivemtl.github.io/locomotive-scroll/ 一个简单的滚动库，提供视口中的元素检测和视差平滑滚动...19、Swiper.js 地址：https://swiperjs.com/ 没有 jQuery 的免费、开源、现代滑块。...适用于 Vanilla JS 和所有现代框架，如 React、Vue、Angular 等。 20、Splide 地址：https://splidejs.com/ 用于轮播和滑块的免费纯 JS 库。
移动端页面开发1、传统布局的局限性2、移动端屏幕介绍3、移动端浏览器介绍4、物理像素&物理像素比5、真机调试、6、viewport视口、7、移动端技术选型、8、移动端主流适配解决方案、9、移动端特殊样式...快速开发1、jQuery的优势2、jQuery选择器3、jQuery中的动画4、jQuery中的DOM操作5、链式编程和隐式迭代6、插件使用和制作7、常见网页特效制作大全面向对象编程1、面向对象思想、2...异常处理9、Express常用API10、RESTFulAPI第五阶段： Vue.js项目实战Vue.js基础1、Vue实例2、文本与属性绑定3、计算属性computed4、侦听器watch5、Class...路由系统16、组件通信17、axios请求库18、VueCLI脚手架工具19、VueDevTools调试工具20、在Vue中操作DOM可掌握的核心能力： 能够掌握使用Vue技术栈进行项目开发； 能够掌握源代码管理工具的使用...掌握使用echarts/d3.js进行大数据可视化交互开发； 可解决的现实问题： 使用Vue技术栈开发企业级项目 掌握前后端分离的开发方式 掌握项目的打包和发布 市场价值： 理解Vue的开发理念
@toc10.7路由的params参数注意点1：跳转路由并携带params参数，to的对象写法中，不能配置path参数，不然页面会没效果（就是点击完数据都没了.../App.vue'//引入VueRouterimport VueRouter from 'vue-router'//引入路由器import router from '..../components/Banner'export default {name:'App',components:{Banner}}index.js// 该文件专门用于创建整个应用的路由器.../pages/Detail'//创建并暴露一个路由器export default new VueRouter({routes:[{name:'guanyu',path:'/about',component...-- 开启移动端的理想视口 --> <!
前言 目录 入门类 HTML 5 部分 CSS 3 部分 JQuery Angular JS React Vue Node JS JS Template 移动端 移动端 API 综合 API 其他 API...jquery 源码查找 Web前端资源汇总(jQuery,Js,Css3等) 7....城市联动 ---- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果 50....求职 ---- 面试你之前，我希望在简历上看到这些！ 61....面试题 ---- 那几个月在找工作（百度，网易游戏） 2014最新面试题 2016校招内推 – 阿里巴巴前端 – 三面面试经历 年后跳槽那点事：乐视+金山+360面试之行 Interviewing
1.React.js 2.jQuery 3.Express 4.Angular 5.Vue.js 6.Angular.js 7.Svelte 8.Next.js 9.Ember.js 10.Meteor...jQuery 还有一些特性包括 HTML 操作、DOM 操作、CSS 操作、HTML 事件方法、效果和动画、DOM 元素选择、AJAX 和实用工具。...Vue.js Vue.js 是一个开源的、先进的 MVV（模型 - 视图 - 视图）模型 JavaScript 框架。...虽然 Vue.js 是在 2016 年开发的，但由于它所贡献的功能，它已经成为一些开发者的日常工具。通过结合支持库和现代工具，Vue 可以用于开发复杂的单页应用程序。...MVC 架构、数据绑定、依赖注入、模板、组件、组件路由器、HTML 编译器、测试和 DOM 控制结构这些特性使得 Angular.js 排在 JavaScript 框架排行榜的顶部。
表单元素的渲染采用了纯html的拼接，如果在后端使用tinybutstrong/前端使用art-template或angular.js/react/vue.js这类MVVM框架，可以更优雅的完成。.../1.5.2/jquery.min.js"> jquery-qrcode.../src/jquery.qrcode.js"> $('#qrcode').qrcode({ width: 64, height...: 64, text: 'hello, world' }); 但是jquery-qrcode生成的二维码在table或canvas中，无法右击保存 所以改造下，渲染成能右击-另存为的...，先看看家附近哪里可以乘坐 最好能在地图直观看到 家、所有站点位置 思路 调用百度地图api，把所有地址转换成经纬度，在地图上标记出来 实现 这个比较简单，做下用户输入的查询的解析，发请求给百度地图api
通过路由器，可以在不reload页面的情况下，实现页面部分刷新。那么，最关键的地方，就是如何设计路由器，如何让路由器工作？...不过，作为hashchange事件的polyfill方法，被采用在很多jquery.hashchange插件里，比如jquery库：jquery.ba-hashchange jquery.ba-hashchange.js...假设现在的页面URL为http://www.somesite.com/index.html； 点击某个菜单，需要更改页面内容，调用JS：history.pushState(null, null, 'subPage1...它的优点是，路由器在多个URL间跳转，可以完全支持浏览器SEO（切换Hash不能改变真正的URL，多次路由切换后，搜索引擎爬虫会认为一直访问同一个页面，无法SEO）。...比如Angularjs, Vue.js, backbone...... 用户可以在框架里自行配置。一般，默认是URL片段标识符，也就是hash锚点模式。
组件库： Vant有很多版本，Vue2、Vue3、小程序，都有兼容：Vue2==>Vant2、Vue3==>Vant4 使用； Vant是一个成熟、高效且功能丰富的Vue.js组件库，拥有活跃的社区支持...； Vant 全部导入： 全部导入： 通常采用全局导入形式，在main.JS 中定义，这样就可以在项目的任意位置，直接使用； //mainJS中引入Vant全部组件,注册至全局使用; import 'vant...) main文件中引入：utils/vant-ui.JS： import '@/utils/vant-ui' 项目中的vw布局适配： 因为：本项目针对移动应用，而不同厂商的设备会有大小区别，所以存在不同设备显示效果不同...，视口宽度==>单位vw vw (Viewport Width)视口单位是一种响应式设计的工具，其中vw代表视口宽度的百分比：1vw = 视口宽度的1% 响应式布局： 能够根据屏幕尺寸自动调整元素的大小...： 删除丢失版本或悬空对象： 通过 git fsck --lost-found 找到的丢失版本或悬空对象， 这些丢失的对象实际上是未被引用的对象，它们在 .git/lost-found 目录下被暂时存放
约定编码规范 HTML约定： 在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖 在body末尾引入必要的JS文件，优先引入第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js...依赖jQuery，那就应该先引用jQuery.js然后引用bootstrap.js CSS约定： 除了公共级别样式，其余样式全部有模块前缀 尽量使用直接子代选择器，少用简介子代，避免错杀 2、Bootstrap...[endif]--> 3、视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多手机浏览器的视口（承载页面的容器）宽度都是980...； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...--Bootstrap的所有组件都是依赖jquery的--> 22 jquery/jquery.js"> 23 <script src
-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery --> js/jquery.min.js"> 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是...980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）width:视口的宽度initial-scale：初始化缩放user-scalable..., initial-scale=1"> 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是...980； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale：初始化缩放
，食用效果更佳： ?...如果没有这个属性，入口一般是目录下的index.js文件： "main": "dist/jquery.js", 复制代码 理结构 我们打开dist/jquery.js，发现他有上万行代码，瞬间心里有点懵逼...无论是jQuery的extend扩展方法还是Zepto的自执行方法扩展方法，他们其实都起到了同一个效果，那就是将各个模块分开独立了。...比如Vue(v 2.6.11)，我们在使用的时候就是new Vue()获得一个实例，拿来使用。...Vue的调用层级并没有jQuery和Zepto那么深，函数挂载方式也很明显。在Vue构造函数下面就有几行代码执行了几个mixin。 ?
安装 虽然在AngularJS、React和Vue的项目中jQuery从来都是一个不受欢迎的库。...界面包都是全局性的，那么可以选择在main.js文件一开始加入引用： import 'jquery' import 'uikit' import 'uikit/dist/css/uikit.almost-flat.css.../dist/css/uikit.almost-flat.css' } } 在main.js代码内引入UIkit，代码就变为： import 'jquery' import 'uikit' import...在src根目录下新建一个uikit.js的文件，然后用Vue的插件格式来进行包装。...上述代码就是将回调函数的上下文强制替换为当前的Vue实例，避免了回调上下文丢失而需要手工去定义变量，“hold住”原有this上下文的痛苦。
（一）jQuery的概念，页面加载事件 jQuery 的概念 jQuery 的顶级对象 jQuery 对象和 DOM 对象互转 页面加载事件 从零开始学 Web 之 jQuery（二）获取和操作元素的属性...Web 之 CSS3（七）多列布局，伸缩布局 从零开始学 Web 之 CSS3（八）CSS3三个案例 从零开始学 Web 之 移动Web 从零开始学 Web 之 移动Web（一）屏幕相关基本知识，调试，视口...ES6基础语法一 从零开始学 Web 之 ES6（四）ES6基础语法二 从零开始学 Web 之 ES6（五）ES6基础语法三 从零开始学 Web 之 ES6（六）ES6基础语法四 从零开始学 Web 之 Vue.js...从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令 从零开始学 Web 之 Vue.js...（三）Vue实例的生命周期 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域 从零开始学 Web 之 Vue.js（五）Vue的动画 从零开始学 Web 之 Vue.js（六）Vue
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
