![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 60
以实战为线索,逐步深入Vue开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
狡辉两门
欢迎踏入八奇的思考领域
展开
-
vue3(就业)
面试题:谈谈你对vite的理解,最好对比webpack说明webpack 原理图vite 原理图面试题答案:webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。vite充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样进行打包合并。原创 2022-11-10 17:04:42 · 325 阅读 · 0 评论 -
vue3(入门)
vue3入门原创 2022-11-08 16:27:56 · 235 阅读 · 1 评论 -
vue异步组件
在代码层面,组件本质上是一个配置对象但有的时候,要得到某个组件配置对象需要一个异步的加载过程,比如:如果一个组件需要通过异步的方式得到组件配置对象,该组件可以把它做成一个异步组件应用异步组件通常应用在路由懒加载中,以达到更好的分包为了提高用户体验,可以在组件配置对象加载完成之前给用户显示一些提示信息推荐使用NProgress展现一个进度条.........原创 2022-06-18 10:15:00 · 798 阅读 · 0 评论 -
打包结果分析
由于是利用进行打包,我们仅需加入一个插件即可分析打包结果为了避免在开发环境中启动,我们仅需使用以下代码即可优化公共库打包体积使用CDNCDN全称为Content Delivery Network,称之为内容分发网络它的基本原理是:架设多台服务器,这些服务器定期从源站拿取资源保存本地,到让不同地域的用户能够通过访问最近的服务器获得资源我们可以把项目中的所有静态资源都放到CDN上(收费),也可以利用现成免费的CDN获取公共库的资源首先,我们需要告诉不要对公共库进行打包然后,在页面中手动加入链接,这里使用原创 2022-06-17 09:30:00 · 466 阅读 · 0 评论 -
vuex经典案例
路由总体示意图鉴权守卫逻辑示意图watch配置Vue.prototype.$watchmapStategettersmapGettersmoduleswatchexact-path导航守卫原创 2022-06-16 12:15:00 · 181 阅读 · 0 评论 -
vue数据共享
在中遇到共享数据,会带来下面的多个问题:一种比较容易想到的方案,就是把所有的共享数据全部提升到根组件,然后通过属性不断下发,当某个组件需要修改数据时,又不断向上抛出事件,直到根组件完成对数据的修改。这种方案的缺陷也非常明显:基于上面的问题,我们可以简单的设置一个独立的数据仓库。组件需要什么共享数据,可以自由的从仓库中获取,需要什么拿什么。组件可以自由的改变仓库中的数据,仓库的数据变化后,会自动通知用到对应数据的组件更新要实现这一切,可以选择安装后,可以通过下面的代码创建一个数据仓库,在大部分情况下,一个工程原创 2022-06-15 10:30:00 · 876 阅读 · 0 评论 -
$listeners和v-model
针对节点的原生事件,支持多种修饰符以简化代码详见:事件修饰符、按键修饰符、系统修饰符是的一个实例属性,它用于获取父组件传过来的所有事件函数v-model指令实质是一个语法糖,它是属性和事件的结合体详见:表单输入绑定............原创 2022-06-14 13:06:31 · 165 阅读 · 0 评论 -
开发文章详情页
该组件没有任何难度,根据「属性 - 文章对象」显示出文章信息即可由于文章的内容属于原始html,因此需要使用指令来设置另外,文章的内容是不带样式的,因此需要选择一款的样式(见附件)对于文章中脚本部分的样式,可以使用第三方库highlight.js中提供的样式BlogTOC无难度,不解释.........原创 2022-06-13 09:45:00 · 166 阅读 · 0 评论 -
开发文章列表页
我们希望下面的地址都能够匹配到组件第一种情况很简单,只需要将一个固定的地址匹配到组件即可但后面的情况则不同:匹配到组件的地址中,有一部分是动态变化的,则需要使用一种特殊的表达方式:在地址中使用,来表达这一部分的内容是变化的,在中,将变化的这一部分称之为,可以在组件中通过来获取动态路由的导航编程式导航除了使用超链接导航外,还允许在代码中跳转页面watch利用配置,可以直接观察某个数据的变化,变化时可以做一些处理...原创 2022-06-12 15:45:00 · 130 阅读 · 0 评论 -
vue组件混入
有的时候,许多组件有着类似的功能,这些功能代码分散在组件不同的配置中。于是,我们可以把这些配置代码抽离出来,利用混入融合到组件中。具体的做法非常简单:混入并不复杂,更多细节参见官网......原创 2022-06-11 04:00:00 · 405 阅读 · 0 评论 -
自定义指令
前情提要 :组件负责呈现整体效果组件负责呈现单张轮播图组件负责:组件负责:正文:之后,所有的组件均可以使用和指令局部定义局部定义是指在某个组件中定义指令,和局部注册组件类似。定义的指令仅在该组件中有效。和局部注册组件一样,为了让指令更加通用,通常我们会把指令的配置提取到其他模块。指令配置对象没有配置的指令,就像没有配置的组件一样,毫无意义支持在指令中配置一些钩子函数,在适当的时机,会调用这些钩子函数并传入适当的参数,以便开发者完成自己想做的事情。常用的钩子函数:每个钩子函数在调用时,都会向其原创 2022-06-10 10:30:00 · 134 阅读 · 0 评论 -
组件生命周期
组件生命周期原创 2022-06-09 09:45:00 · 90 阅读 · 0 评论 -
个人空间前台页面
服务器的所有接口均不允许跨域所有的服务端接口在接收到请求后,均响应以下JSON格式:其中,、、对应的结果如下:全局设置是单例的,服务器启动时,如果没有全局设置,则会初始化一个默认的全局设置:获取全局设置请求规格:响应规格:博客文章获取所有博客分类请求规格:响应规格:说明:请求规格:说明:params列表:响应规格:说明:请求规格:说明:响应规格:提交评论请求规格:响应规格:说明:有可能出现验证错误,如:头像随机生成一个即可某个会话在一定的时间内,只能指定数量的评论,超出数量将原创 2022-06-08 10:15:00 · 217 阅读 · 0 评论 -
获取远端数据
浏览器前端开发服务器后端测试服务器http://localhost:8080/页面ajax 跨域:http://test-data:3000/api/newsJSON数据浏览器阻止数据移交浏览器前端开发服务器后端测试服务器生产环境没有跨域问题浏览器前端开发服务器后端测试服务器http://localhost:8080/页面ajax:http://localhost:8080/api/news代理请求:http://test-data:3000/api/newsJSON数据JSON数据浏览器前端开发服务器原创 2022-06-07 11:45:00 · 102 阅读 · 0 评论 -
vue弹出消息
需要将样式文件命名为为文件名得到组件渲染的Dom扩展vue实例原创 2022-06-06 06:00:00 · 281 阅读 · 0 评论 -
vue路由
路由插件的使用基本使用路由模式路由模式决定了:提供了三种路由模式:hash:默认值。路由从浏览器地址栏中的hash部分获取路径,改变路径也是改变的hash部分。该模式兼容性最好。history:路由从浏览器地址栏的中获取路径,改变路径使用的H5的。该模式可以让地址栏最友好,但是需要浏览器支持abstract:路由从内存中获取路径,改变路径也只是改动内存中的值。这种模式通常应用到非浏览器环境中。导航提供了全局的组件,它的渲染结果是一个元素默认情况下,会用 当前路径 匹配 导航路原创 2022-06-05 08:45:00 · 95 阅读 · 0 评论 -
vue插槽
在某些组件的模板中,有一部分区域需要父组件来指定插槽的简单用法此时,就需要使用插槽来定制组件的功能如果某个组件中需要父元素传递多个区域的内容,也就意味着需要提供多个插槽为了避免冲突,就需要给不同的插槽赋予不同的名字原创 2022-06-04 08:15:00 · 102 阅读 · 0 评论 -
优化工程结构
编写组件说明文档如何测试组件效果?快速原型开发你可以使用 和 命令对单个 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展: 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。你所需要的仅仅是一个 文件:然后在这个 文件所在的目录下运行: 使用了和 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 、、 或 中的一个。你也可以显式地指定原创 2022-06-03 08:30:00 · 89 阅读 · 0 评论 -
vue组件事件
全局样式v-if 和 v-show面试题:v-if 和 v-show 有什么区别?组件事件抛出事件:子组件在某个时候发生了一件事,但自身无法处理,于是通过事件的方式通知父组件处理事件参数:子组件抛出事件时,传递给父组件的数据注册事件:父组件申明,当子组件发生某件事的时候,自身将做出一些处理原创 2022-06-02 08:52:04 · 288 阅读 · 0 评论 -
vue组件
组件的出现是为了实现以下两个目标:降低整体复杂度,提升代码的可读性和可维护性提升局部代码的可复用性绝大部分情况下,一个组件就是页面中某个区域,组件包含该区域的:功能(JS代码)内容(模板代码)样式(CSS代码)要在组件中包含样式,需要构建工具的支撑组件开发创建组件组件是根据一个普通的配置对象创建的,所以要开发一个组件,只需要写一个配置对象即可该配置对象和vue实例的配置是几乎一样的//组件配置对象var myComp = { data(){ re原创 2022-05-29 09:49:22 · 177 阅读 · 0 评论 -
vue计算属性
笔记面试题:计算属性和方法有什么区别?计算属性本质上是包含getter和setter的方法当获取计算属性时,实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。方法没有缓存,每次调用方法都会导致重新执行。计算属性的getter和setter参数固定,getter没有参数,setter只有一个参数。而方法的参数不限。由于有以上的这些区别,因此计算属性通常是根据已有数据得到其他数据,并在得到数据的过程中不建议使用异步、当前原创 2022-06-01 09:00:00 · 214 阅读 · 0 评论 -
vue搭建工程
vue-cli: https://cli.vuejs.org/zh/vue-clivue-cli是一个脚手架工具,用于搭建vue工程它内部使用了webpack,并预置了诸多插件(plugin)和加载器(loader),以达到开箱即用的效果除了基本的插件和加载器外,vue-cli还预置了:babelwebpack-dev-servereslintpostcssless-loaderSFC单文件组件,Single File Component,即一个文件就包含了一个组件所需的全部代.原创 2022-05-31 10:00:00 · 97 阅读 · 0 评论 -
前端框架的由来
vue官网:https://cn.vuejs.org/服务端渲染#mermaid-svg-QKI5CjNesupaegRL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QKI5CjNesupaegRL .error-icon{fill:#552222;}#mermaid-svg-QKI5CjNesupaegRL .error-text{fill:#552222;.原创 2022-05-25 08:00:00 · 107 阅读 · 0 评论 -
vue核心概念
注入vue会将以下配置注入到vue实例:data:和界面相关的数据computed:通过已有数据计算得来的数据,将来详细讲解methods:方法模板中可以使用vue实例中的成员虚拟DOM树直接操作真实的DOM会引发严重的效率问题,vue使用虚拟DOM(vnode)的方式来描述要渲染的内容vnode是一个普通的JS对象,用于描述界面上应该有什么,比如:var vnode = { tag: "h1", children: [ { tag: undefined, text原创 2022-05-27 10:00:00 · 152 阅读 · 0 评论