Vue
关注
分享
扫一扫
文章平均质量分 56
m0_63400611
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
nuxt3中配置px转vw
直入主题，进入nuxt中文网查看关于nuxt.config.ts中的配置选项剩余可通过或者查看。原创 2024-04-04 16:04:51 · 656 阅读 · 0 评论 -
封装utils目录下的request模块
在vue中使用axios发起ajax请求,可以将axios挂载到vue原型中,但是这种方法有一定的缺点,即无法实现接口的复用,导致每次需要进行操作的时候都需要进行一次接口的调用,会造成服务器资源的浪费而在src目录下,规范的封装request模块,即发起请求用的模块,即可更加便利的调用接口和实现复用。...原创 2022-07-22 17:16:46 · 4412 阅读 · 0 评论 -
Vuex的核心概念
在vuex中,不建议组件直接修改store中的数据,以下为错误实例,不建议使用如下方式,这种方式不利于后期维护,很难查看数据是被什么组件修改的。通过刚才导入的mapMutation函数,将需要的mutations函数,因设为当前组件的methods方法。State提供为一的公共数据源,所有共享的数据都要统一返稿Store的State中进行存储。Mutation用户变更store中的数据。如下为触发mutation的第一种方式。......原创 2022-07-21 23:15:26 · 664 阅读 · 0 评论 -
Vuex的基本使用
代码】Vuex的基本使用。原创 2022-07-21 22:55:31 · 232 阅读 · 0 评论 -
Vuex概述
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。原创 2022-07-21 22:43:24 · 108 阅读 · 0 评论 -
vue-router的常见用法
路由重定向指的是: 用户在访问地址 A 的时候,强制用户跳转到地址 C,从而展示特定的组件页面通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便的设置路由的重定向:在路由模块中配置如上代码,则进入页面时默认显示 home 组件,即home页面 通过路由来实现组件的嵌套展示,叫做嵌套路由 在 src/router/index.js 路由模块中,导入需要的组件,并使用 children 属性声明子路由规则.........原创 2022-06-26 23:50:00 · 630 阅读 · 0 评论 -
vue-router的基本用法
vue-router 是 vue.js 官方给出的路由解决方案,他只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换vue-router官方文档地址 在 vue2 的项目中,安装 vue-router 的命令如下:创建路由模块在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码:导入路由模块在 main.js 中导入创建的路由模块,并且进行挂载使用:在路由模块中声明路由的对应关系在路由模块中导入需要切换的原创 2022-06-25 23:30:38 · 194 阅读 · 0 评论 -
Vue路由的概念和实现简易路由
路由(Router),就是对应关系SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一一个页面内完成此时,不同组件之间的切换需要通过前端路由来实现Hash 地址(# 锚链接)与组件之间的对应关系如下案例展示,在点击 链接是,虽然页面不会刷新,但是 url 地址会增添 #bx 的锚链接,并且会留下浏览记录,可以在浏览器进行回退和前进步骤1: 通过 标签,结合 comName 动态渲染组件,示例代码如下:步骤2: 在 APP.......原创 2022-06-21 22:28:10 · 168 阅读 · 0 评论 -
自定义指令
vue 官方提供了 v-text, v-for, v-model, v-if等常用的指令,除此之外 vue 还允许开发者自定义指令vue 中的自定义指令分类两类,分别是:在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令,示例代码如下:注意:在使用自定义属性时,可以传入一个参数,并且在 binding 中的 value 属性可以调用到该值例如:如果需要定义与 color 值不同的值,需要使用反引号 `red` 来进行赋值,例如:在使用了如上方法后,打印 bind原创 2022-06-21 16:52:01 · 425 阅读 · 0 评论 -
vue插槽
插槽 (Slot) 是 vue 为组件的封装者提供的能力,允许开发者在封装组件时,把不确定的,希望由用户指定的部分定义为插槽在封装组件的时候,可以在组件当中使用 slot 标签声明插槽的位置在需要将内容填充到指定名称的插槽中时,可以使用 v-slot: 这个指令示例代码如下:template标签只作为一个虚拟的元素,在最终渲染页面的时候不会生成任何元素v-slot: 后面要跟上插槽的名字v-slot: 指令不能直接用来元素身上,必须用在 template 标签上template 是一个虚拟的标签原创 2022-06-15 17:52:36 · 534 阅读 · 0 评论 -
vue动态组件
动态组件指的是动态切换组件的显示与隐藏vue 提供了一个内置的 组件,专门用来实现动态组件的渲染,示例代码如下:在 component 标签中的组件会被动态的创建和销毁,此时组件中的数据会在再次创建时被重置此时使用 vue 内置的 keep-alive 标签可以让其中的标签被缓存在内存中,不会被销毁代码示例:通过这种方式缓存的标签,在 vue 调试台中能看到有 inactive 的标识当组件被缓存时,会自动触发组件的 deactivated 生命周期函数当组件被激活时,会...原创 2022-06-15 16:47:33 · 7194 阅读 · 0 评论 -
数组中的方法
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数forEach() 方法的特性是: 遍历一旦开始则不能中止,无法使用 return 等方式跳出循环代码示例:运行结果:在寻找到指定的元素后,没有被 return 跳出循环,而是继续将遍历完成,这样在某些情况下会浪费性能some循环在找到指定的项之后,可以通过 return true 固定写法终止 some 循环代码示例:运行结果:在需要判断例如: 购物车中的商品是否被全选 之类的场景时,可以使用 every 循环来对条件进行判原创 2022-06-08 20:56:45 · 119 阅读 · 0 评论 -
ref引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用,默认情况下,组件的 $refs 指向一个空对象在 vue 中一般不建议使用原生或者jQuery等方式直接操作 DOM 元素,vue 提供了 $refs 方法来进行 DOM 元素的引用,示例代码如下: 在需要绑定的元素标签中添加 ref="" 属性,就能在方法中通过 this.$refs.属性值 来获取和操作 DOM原创 2022-06-08 17:49:32 · 190 阅读 · 0 评论 -
组件之间的数据共享(面试重点)
在项目开发中,组件之间的最常见的关系分为如下两种:父子组件之间的数据共享又分为:父组件向子组件共享数据需要使用自定义属性,示例代码如下:子组件向父组件共享数据使用自定义事件,示例代码如下:......原创 2022-06-07 21:34:16 · 373 阅读 · 0 评论 -
vue组件及生命周期
组件化开发指的是: 根据封装的思想,把页面上可以重用的UI结构封装为组件,从而方便项目的开发和维护vue是一个支持组件化开发的前端框架vue中规定: 组件的后缀名是 .vue, 之前接触到的 App.vue 文件本质上就是一个 vue 组件每个 .vue 组件都由3部分构成,分别是:注意: 在 .vue 中,不能使用"data: {}"方式在其中定义数据,需要采用上述代码的方式在 vue 文件中定义 methods 方法的形式和html中一致,但在其中 this 指向的则是当前组件的实例对象其中原创 2022-05-31 22:26:34 · 461 阅读 · 0 评论 -
vue-cli项目
单页面应用程序是指一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成vue-clivue-cli 是 Vue.js 开发的标准工具,它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程中文官网:https://cli.vuejs.org/zh/安装和使用vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:npm install -g @vue/cli基于 .原创 2022-05-31 16:26:06 · 233 阅读 · 0 评论 -
计算属性的使用
计算属性计算属性指的是通过一系列运算之后,最终得到一个属性值这个动态计算出来的属性值可以被模板结构或 methods 方法使用,示例代码如下:var vm = new Vue({ el: '#app', data: { // 红色 r: 0, // 绿色 g: 0, // 蓝色 b: 0 }, methods: { // 点击按钮，在终端显示最新的颜色 show() { console.log(`rgb(${this.r}, ${this.g},原创 2022-05-20 22:19:45 · 1934 阅读 · 0 评论 -
watch侦听器
watch侦听器简介watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作语法格式如下:const vm = new Vue({ el: '#app', data: { username: 'zhangsan' }, watch: { //监听 username 值的变化 //newVal 是"变化后的新值" oldVal 是"变化之前的旧值" username(newVal, oldVal) { console.log(newVal, oldV原创 2022-05-11 17:03:15 · 129 阅读 · 0 评论 -
案例:过滤器中使用dayjs.js格式化时间
需要先引入 dayjs.js,并且在其官方文档查看使用方法代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2022-05-11 15:38:23 · 211 阅读 · 0 评论 -
vue的过滤器
过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个地方: 插值表达式 和 v-bind属性绑定过滤器定义语法示例:filters: { //注意: 过滤器函数形参中的val 永远都是"管道符"前面的那个值 capi(val) { //过滤器中一定要有一个返回值(return) //字符串有个 charAt 方法 这个方法接受索引值 表示从字符串中把索引对应的字符获取过来 const first = val.charAt(0).toUpperC原创 2022-05-11 15:36:28 · 463 阅读 · 0 评论 -
品牌列表案例
案例效果代码需要引入bootstrap.css文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2022-05-11 14:32:19 · 592 阅读 · 0 评论 -
vue的指令
指令是vue为开发者提供的模板语法,用于辅助开发渲染页面的基本结构vue中的指令展昭不同的用途分为如下6大类1.内容渲染指令内容渲染指令用来辅助开发渲染DOM元素的文本内容,常用的渲染指令有如下3个:v-text用法示例:<div id="app"> <p v-text="username"></p> </div> <!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->原创 2022-05-08 17:45:59 · 673 阅读 · 0 评论 -
vue的基本使用
导入vue.js的script脚本文件 在页面中声明一个将要被vue所控制的DOM区域 创建vm实例对象(vue实例对象)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- vue能够控制下方div 把数据填充到div内部 --> <div原创 2022-05-08 14:45:50 · 173 阅读 · 0 评论 -
Webpack中@的原理和用法
在 webpack 中,可以在 webpack.config.js 文件中配置如下命令,使 @ 在代码中表示指定的路径module.exports = { resolve: { alias: { //在 webpack 中设置代码中 @ 符号表示 src 这一层目录 '@': path.join(__dirname, './src/') } }}之后在文件中使用的示例:import msg from '@/msg'//建议使用 @ 表示src源代码目录 从原创 2022-05-08 13:53:40 · 1800 阅读 · 0 评论 -
Source Map
Source Map 就是一个信息文件,里面存储着位置信息,Source Map 文件中存储着压缩混淆后的代码,所对应的转换前的位置有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,极大的方便后期的调试开发模式下默认Source Map 问题开发环境下默认生成的 Source Map 记录的是生成后的代码的位置,会导致运行时报错的行数与源代码的行数不一致的问题解决默认Source Map 问题开发环境下,在 webpack.config.js 中添加如下的配置,原创 2022-05-07 16:18:22 · 445 阅读 · 0 评论 -
打包发布build
项目开发完成之后,需要使用webpack对项目进行打包发布,原因如下:开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件 开发环境下,打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行,需要对项目进行打包发布配置webpack的打包发布在 package.json 文件的 script 节点下,新增 build 命令如下:"scripts": { //开发环境中 运行 dev 命令 "dev": "webpack serve"原创 2022-05-07 15:31:12 · 1094 阅读 · 0 评论 -
webpack 中的 loader
loader概述在实际开发过程中,webpack默认只能打包处理以 '.js' 后缀名结尾的模块,其他非 '.js' 后缀名结尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错loader 加载器的作用: 协助 webpack 打包处理特定的文件模块,比如:css-loader 可以打包处理 '.css' 相关的文件 less-loader 可以打包处理 '.less' 相关的文件 babel-loader 可以打包处理 webpack 无法处理原创 2022-05-05 19:00:02 · 1278 阅读 · 0 评论 -
webpack的基本使用
webpack概念: webpack是前端项目工程化的具体解决方案主要功能: 提供前端模块化开发支持,代码压缩混淆,处理浏览器端JavaScript的兼容性,性能优化等强大功能好处: 可以把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性注意: 目前Vue, React等前端项目,基本都是基于webpack进行工程化开发的创建列表隔行变色项目在项目路径的终端运行命令:npm i jquery -S (-S 代表将安装的这个包记录到dependencies节点原创 2022-04-25 22:14:59 · 389 阅读 · 0 评论 -
前端工程化(概念)
前端工程化在企业级的前端项目开发中,把前端开发所需的工具,技术,流程,经验等进行规范化,标准化企业中的Vue项目和React项目,都是基于工程化的方式进行开发的好处: 前端开发自成体系,有一套标准的开发方案和流程前端工程化的解决方案:目前主流的前端工程化解决方案webpack (https://www.webpackjs.com/ ) 主要学习 前端工程化的具体解决方案 parcel (https://zh.parceljs.org/ ) 开发第三方包时用得较多 项目开发用..原创 2022-04-25 19:50:24 · 92 阅读 · 0 评论