Vue2.X前端学习笔记第12页

Vue2.x项目SPA的SEO解决方案(预渲染-Prerendering)

Copyright2019-06-03,JachinQQ:381558301Email:[email protected]前端最主要的任务除了是界面展示和业务逻辑处理，当然还有对Crawler/Spider/Robot的识别机制要有所了解；搜索引擎的准确适配，才能使自己的项目/产品展现在目标用户里。但是现在普遍的网络爬虫算法只抓取静态资源，对于javascript脚本基本一概略过。（但是Google

JachinZhou·2023-04-04 00:17

vue2.x 使用pdf.js预览pdf文件

1.下载pdf.js资源包下载地址：http://mozilla.github.io/pdf.js/getting_started/#download2.解压资源包放到根目录\public\static\pdf，没有static的需要手动创建，这个结构是固定的，不然用不了，会报错UncaughtSyntaxError:Unexpectedtoken'//文件流转blob地址constblob=ne

龍矣·2023-04-04 00:17

vue 项目 SEO 解决方案 - 预渲染

文章目录1、创建vue2.x项目2、prerender-spa-plugin3、vue-meta-info4、流程5、注意我们都知道VUE、React这种框架写的项目都是js动态渲染的页面，这样就无法用爬虫拿到页面上的静态资源

三个木马人·2023-04-04 00:20

web前端学习笔记——列表

对于一些内容相似、结构相似、样式相似的内容使用列表结构进行搭建一、无序列表标签：ulli（嵌套关系，ul>li）ul：unorderedlist,表示一个无序列表的大结构li：listitem，列表项，定义无序列表内的某一项列表项1列表项2列表项3列表项4效果：注：一个列表中可以有任意个列表项ul内部只能嵌套li，并且li标签不能脱离ul单独书写li标签是一个容器级标签，可以放置任何内容li标签之

eliauk-123·2023-04-03 19:18

Web前端学习笔记——HTML

web前端开发基础第一章——HTML传送门：第二章：CSS|第三章：html5和CSS3|第四章：Javascript（part1）|第四章：Javascript（part2）目录web前端开发基础第一章——HTML概述一、html标题标签二、html段落标签、换行标签与字符实体1.html段落标签2.html换行标签3.html字符实体三、html块标签、含样式的标签1.html块标签2.含样式

宇宙☆空间站·2023-04-03 19:15

Vue2.x组件间通信汇总表

分享一篇以前做Vue2.x开发时总结的组件通信汇总一、组件间通信方式表序号方式使用场景演示代码说明1props父=>子(属性传参)√接收数据:子组件中props定义接收;派发数据:父组件中绑定数据进行派发

蚂蚁二娘·2023-04-03 18:44

Vue Cropper - 基于 Vue 开发的图片裁剪插件，简单好用、免费开源，支持 Vue2 和 Vue3

VueCropper插件的技术特性基于Vue开发，支持最新的Vue3.x，兼容Vue2.x支持Vite和TypeScr

那些免费的砖·2023-04-03 09:48

【前端学习笔记】Vue 的元素 v-if 和 v-for 的比较

v-if和v-for有几点需要注意的地方。第一、v-if和v-for同时使用时，v-for具有比v-i更高的优先级。这意味着v-if将分别重复运行于每个-v-for循环中。但如果想要有条件地跳过循环的执行，那么可以将v-if置于外层元素或者上。例：{{todo}}Notodosleft!

花上·2023-04-03 06:08

前端学习笔记之原型——一张图说明`prototype`和`proto`的区别

全局变量Global是是ECMAScript中的全局对象（浏览器中是window），不属于其他对象的属性和方法，所有在全局作用域中定义的属性和方法，都是Global对象的属性（window）。window的属性分为两类，一种是ECMAScript规定的，一种是浏览器私有的（各浏览器可能不一样）。ECMAScript规定的的有parseInt、parseFloat、Number、String、Obj

astak3·2023-04-03 05:47

前端学习笔记____前后端交互Node+MongoDB+Express+Ajax

作者主页：仙女不下凡前言介绍：以下内容都是我个人对于前端知识的总结，会定期更新欢迎持续关注！欢迎点赞收藏⭐留言如有错误敬请指正！前言学习视频地址：https://www.bilibili.com/video/BV1j5411K7EH?from=search&seid=650434603315537295学习进度：该视频适用于有css、html、JavaScript基础的同学学习方法总结：如何从零自

仙女不下凡·2023-04-02 20:18

vue3学习笔记

main.jsApp.vueHelloWorld.vuebabel.config.jsjsconfig.jsonpackage.jsonvue.config.jsindex.html3.setup4.ref函数5.reactive函数6.Vue3.0中的响应式原理vue2

ps酷教程·2023-04-02 16:54

Vue：（三十六）Vue3.0第一弹

Vue2.x中的基础知识基本就告一段落了，接下来就快速的把Vue3.0中的相关改动内容过一遍。

空谷有来人·2023-04-02 07:18

vue3.0的组件怎么使用，有什么作用？

使用过Vue2.x的朋友一定对组件的属性非常熟悉，其实Vue3.0的属性用法和Vue2.x的差

a无聊·2023-04-02 00:32

前端学习笔记四十-移动APP（4）React组件的生命周期

一、组件的生命周期1.概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期；2.组件生命周期分为三部分：组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；componentWillMount:组件将要被挂载，此时还没有开始渲染虚拟DOM，此时pro

AizawaSayo·2023-04-01 23:53

脚手架搭建

下载vue/cli包命令行工具npmivue/cli-g2、vuecreatemytest//vue3.x的命令需要再安装一个vue/cli-servicevueinitwebpackmytest//vue2

Betterthanyougo·2023-04-01 12:11

VUE3对比VUE2的优势及新特性原理

1.Vue3.0新特性性能比Vue2.x快1.2~2倍原因1：diff方法优化：vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）vue3新增了静态标记（patchflag）与上次虚拟节点对比时

zxo_apple·2023-04-01 06:07

2022-12-20【技术】Vue2的12种组件通信(上)

Vue2.x组件通信方式Vue2.x组件通信共有12种props$emit/v-on.syncv-modelrefparentlistenersprovide/injectEventBusVuex$rootslot

平凡的雪夜冬天·2023-04-01 02:18

Vue3 新特性

类似ReactHooks2Treeshakingsupport支持摇树优化按需编译，体积更加轻量化3BetterTypeScriptsupport对Ts提供了更好的支持4Performance性能上比Vue2

橘子_果酱·2023-03-31 05:30

在vue-cli中使用threejs，并实现鼠标控制移动，以及点击交互效果

这里假设已经了解threejs中基本的三要素等基础知识如题，前戏不多，直接提枪上阵第一步：创建一个vue-cli项目按照vue-cli官网方式创建,这里话不多说，不需要过多设置，能运行起来就欧克（当然是vue2

风筝啊·2023-03-30 22:23

使用vue-cli3脚手架创建项目的系列报错

它是用“vuecreatexxx”创建项目但是在编译代码的时候莫名有特别多的报错信息，下面我来浅浅说一下我的解决方案vuecreatexxx创建项目我就是正常创建，可以看之前的这篇文章，只不过选择的是vue2

潮汐未见潮落·2023-03-30 21:33

Vue.set与this.$set源码

$set()应用的场景我的博客：https://blog.itwk.cc在Vue2.X项目开发中，有时候需要对数组进行修改，或是对对象新增一个属性，但是发现页面并不会同步更新。

爱写代码的小白.·2023-03-30 08:02

前端学习笔记二十-Ajax编程

一、Ajax基础传统网站中存在的问题网速慢的情况下，页面加载时间长，用户只能等待表单提交后，如果一项内容不合格，需要重新填写所有表单内容页面跳转，重新加载页面，造成资源浪费，增加用户等待时间Ajax：标准读音[ˈeɪˌdʒæks]，中文音译：阿贾克斯它是浏览器提供的一套方法，可以实现页面无刷新更新数据（在页面不刷新的情况下向服务器发送请求），提高用户浏览网站应用的体验。Ajax的应用场景页面上拉加

AizawaSayo·2023-03-30 00:52

vue专题之webstorm创建vue2.x项目【二】

一、背景注意：本文是基于vue-cli2.x版本的项目创建3.x以上项目创建请看【点击访问】vue-cli版本更换/查询【点击访问】安装好vue的开发环境之后，可以用命令创建vue项目，也可以用开发软件创建，这里选webstorm。ps：vue开发环境搭建详见：vue专题之开发环境与项目搭建【一】下面开始创建项目二、新建项目点击webstorm菜单栏的file>new>project需要注意的是，

cy谭·2023-03-29 14:07

【Web前端学习笔记】第三章 JavaScript常见使用方法

【Web前端学习笔记】第三章JavaScript常见使用方法文章目录【Web前端学习笔记】第三章JavaScript常见使用方法前言一、JavaScript是什么？

阿达斯加·2023-03-29 00:00

Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点

Vue2.x中的组件定义方式是通过一个对象来描述组件的选项

Modify_QmQ·2023-03-28 21:00

前端学习笔记之--CSS(1)

什么是CSS？CSS：CascadingStyleSheets层叠样式表/级联样式表，简称样式表。.HTML与CSS的关系HTML：构建网页内容CSS：修饰网页w3C建议尽量使用CSS属性来取代HTML的属性。使用CSS的方式1.内联方式（行内样式）特点：将CSS样式定义在HTML的开始标记中语法：样式声明：由样式属性和值组成，CSS属性名与其值之间用冒号连接，多个样式声明之间用分号分割。2.内部

Qsir11·2023-03-27 09:57

关于iphone手机 iframe中的页面滚动的时候会自动返回顶部BUG

应用场景：vue2.x项目，页面iframe嵌入外链，如嵌入https://qq.com，在ios12.1.12的safri中浏览，滚动iframe元素，当滚动动画结束后，出现自动返回顶部问题解决方法：

shawbs·2023-03-27 01:26

js实用技巧

diviner_杨·2023-03-26 13:52

【vue2.x】组件通信方法汇总

复苏森林·2023-03-24 07:48

【vue2.x】响应式依赖注入

响应式依赖注入在vue框架的设计中，依赖注入并不是响应式的。即使是有很多人包括我自己也希望它是。可以使用data()方法或者Vue.observable创建一个响应式对象，这样在使用依赖注入的时候也是响应式的。1.使用data()方法创建一个依赖注入的响应式对象exportdefault{provide(){return{reactive:this.reactive};},data(){retur

芳月存心·2023-03-23 21:59

vue自定义写一个全局的弹窗提示组件

框架我们用的是vue2.x。采用了elementUI的图标我们先上个效果图首先我们先把这个弹窗组件写出来。创建一个mobileTip.vue文件。

夕阳_醉了·2023-03-23 17:36

关于vue3的两种API写法——选项API和组合API

理解什么是选项API写法，什么是组合API写法OptionsAPI什么是选项API写法:OptionsAPI在vue2.x项目中使用的就是选项API写法代码风格：data选项写数据，methods选项写函数

黛琳ghz·2023-03-23 02:56

vue2.X引入Element-ui 动态主题切换

引入element-ui1.安装loader模块：cnpminstallstyle-loader-Dcnpminstallcss-loader-Dcnpminstallfile-loader-D2.安装Element-UI模块cnpminstallelement-ui--save3.安装工具进入项目文件夹，执行以下命令：npmielement-theme-g安装白垩主题npmielement-th

Sun____·2023-03-19 20:16

前端学习笔记之--HTML(3)

表单元素一系列元素，主要用于收集用户数据form表单readonly属性：布尔属性，是否只读，不会改变表单显示样式disabled属性：布尔属性，是否禁用，会改变表单显示样式input元素select元素textarea元素buttonlabelfieldset元素input输入框type属性：输入框类型type:text普通文本输入框type：password，密码框type:date,日期选择

Qsir11·2023-03-19 01:53

Vue.js 3.0 Composition APIs 及 3.0 原理剖析

Vue3.0与Vue2.0的区别源码组织方式发生变化CompositionAPI性能提升ViteCompositionAPI设计动机Vue2.x开发需要长期迭代的大型项目时，组件的开发采用的是OptionsAPIOptionsAPI

7fea7b53db82·2023-03-18 02:21

win10下cnpm安装node-sass失败

电脑新换了win10系统，重新安装node-v16全局安装了cnpm以前的vue2.x的项目使用的node-sass一直安装不成功，无耐只能按错误来下载安装python-2.7.15.amd64.msi

漫漫江雪·2023-03-18 02:20

【你了解vue的diff算法吗？说说看？】

1、vue引入diff算法的由来，是因为vue2.x中为了降低Watcher力度，每个组件只有一个Watcher与之对应，所以引入diff算法进行精确的找到发生变化的地方。

Clover‘s Blog·2023-03-17 20:59

前端如何显示服务器摄像头,浏览器显示海康摄像头实时预览画面纯前端解决方案...

应用场景：如安装数据库，实时显示每一步信息，如1.数据库创建成功...2.user表创建成功...3.用户user1插入成功...前端学习笔记-2.6注册页面基本的注册内容都有了

蔡佳人·2023-03-16 16:20

关于cli工具和脚手架的原理（菜鸟前端学习笔记）

问题什么是脚手架?什么是CLI?@vue/cli,create-react-app是如何实现的？脚手架，CLI脚手架是一类快速形成工程化目录的工具(业务类型)，如：yeoman,@vue/cli,create-react-app.CLI(command-line-interface,缩写：CLI)(效率工具)，如：webpack,es-lint,json-server平常开发中经常会用到如上熟悉的

junjunboy·2023-03-16 07:30

关于vue的观察者模式的浅析

众所周知，vue2.x中的双向绑定是通过Object.defineproperty来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调，其中的核心类发布者Dep和观察者

叫维特的少年·2023-03-15 18:27

【手撕源码】vue2.x中keep-alive源码解析

个人主页：不叫猫先生‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！系列专栏：vue3从入门到精通、TypeScript从入门到实践资料领取：前端进阶资料以及文中源码可以找我免费领取前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录一、前世尘缘二、keep-alive内置组件1.缓

不叫猫先生·2023-03-15 14:26

vue3中vuex与pinia初识

众所周知的是vue2.x中状态管理工具用的是vuex，而vue3中也是可以使用vuex的，且用vuecli创建的vue3项目里面也是可选vuex是否安装的，或者项目初始化时不安装，如果有需要再进行安装使用

qq252750818·2023-03-15 13:42

Vue3.0（vite工具搭建项目）

vue3.0浅析前提vue2.X中很多内容被保存下来；vue3.0采用的是typescript进行重构的几大亮点1.performance：性能比vue2.X快了1.2~2倍。

前端小码农呀·2023-03-15 09:16

【vue3】子组件修改父组件传过来的props数据

1.修改父组件普通数据使用v-mode语法，代替了vue2.x的.sync修饰符父组件用ref()定义一个普通数据为响应式变量，例vartest=ref(‘parent’)父组件用v-mode将数据绑定到子组件上其实它是以下的简写

前端阿彬·2023-03-15 06:14

vue实现分页功能(BootStrap5.x + vue2.x)

0.前置知识SpringBoot基础Vue2.x尚硅谷Vue视频前三十集内容BootStrap会看文档，懂点英文1.需求实现注意第一页的前一页功能为disabled同理第四页的后一页功能为disabled

Ravi-Moonlight·2023-03-15 04:50

深入vue2.x源码系列:手写代码来模拟Vue2.x的响应式数据实现

前言Vue响应式原理由以下三个部分组成：数据劫持：Vue通过Object.defineProperty()方法对data中的每个属性进行拦截，当属性值发生变化时，会触发setter方法，通知依赖更新。发布-订阅模式：Vue使用发布-订阅模式来实现数据的响应式更新。当数据发生变化时，会通知依赖进行更新。依赖收集：Vue在渲染组件时，会对模板中使用到的数据进行依赖收集，将组件中使用到的数据和对应的Wa

嚣张农民·2023-03-15 02:38

解决elemnt-ui安装后运行报错的问题

新建了Vue2.x项目并引入element-ui后执行npmrundev发现编译报错找不到依赖：Thisdependencywasnotfound:element-ui/lib/theme-default

易冷zzz·2023-03-14 18:46

慕课网Vue知识进阶学习笔记

慕课网Vue知识进阶慕课网学习网址链接:3小时速成Vue2.x核心技术1.vue环境搭建慕课网链接：vue工具和nvm及cnpm下载讲解视频链接nvm：nodeversionmanager—node版本管理器下载和安装

果木山·2023-03-13 20:11

[个人开源]vue-code-view:一个在线编辑、实时预览的代码交互组件

组件简介vue-code-view是一个基于vue2.x、轻量级的代码交互组件，在网页中实时编辑运行代码、预览效果的代码交互组件。

Anduril·2023-03-13 19:22

vue2.x 项目 webpack升级vite避坑总结

前言目前一个用webpack构建的vue2.X项目由于业务扩展越来越大，导致项目在本地编译时热更新很慢，页面更新需要10几秒以上。

Lilio1216·2023-03-13 16:02

推荐频道

Vue2.X前端学习笔记