- 博客(21)
- 收藏
- 关注
RSS订阅原创 v-model语法糖
语法糖: 对一个更加复杂的操作的封装，讨好vue程序员的。众所周知Vue中，v-model可以实现双向绑定，其中的原理解析其实就是v-model的语法糖！// 1. v-model 在表单元素上使用<input v-model="xxx" />// 2. v-model 在自己定义的组件上使用<MyCom v-model="xxx" />上面的写法是快捷方式，它等价于如下复杂的写法：<MyCom :value="xxx" @input="新值=>xx
2022-05-16 14:31:58
2203
原创 Vue项目启动后自动打开浏览器
vue-cli 覆盖webpack配置vue项目每次启动时都需要复制链接地址打开浏览器，影响到开发效率，下面一行代码配置，解决问题，自动打开浏览器！项目根目录下新 vue.config.js（和src同级）补充devServer代码如下const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, devServer
2022-05-14 20:02:34
1472
原创 组件插槽的使用(组件进阶)
vue中的插槽： 组件通过插槽传入自定义结构 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容 vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽 下面详细介绍插槽使用 ：：：一：默认插槽格式：在定义组件时，在template中用slot来占个坑；使用时，将组件之间的内容来填坑；如图示例：二：具名插槽当一个组件内有2处以上需要外部传入标签的地方就需要使用具名插槽格式.
2022-05-10 16:01:57
1569
1
原创 什么是生命周期函数(钩子函数)
vue 框架内置函数，随着组件的生命周期，自动按次序执行作用: 特定的时间点，执行某些特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据阶段: 初始化 =》创建组件 => beforeCreate created 挂载 =>渲染显示组件 => beforeMount mouted 更新 =》修改了变量=》触发视图刷新 => beforeUpdate updated 销..
2022-05-08 21:58:31
182
原创 Vue单向数据流（不要修改props）
在使用Vue组件通信是经常会出现以下此类错误:在vue中需要遵循单向数据流原则所以什么是单向数据流：向单项数据流指的是,在父传子的前提下，父组件里面的数据发生改变会带动子组件里的数据进行更新。那么反过来对子组件里的props进行修改是否可以影响父组件里的数据进行改变呢？遵循单向数据流示例代码如下：运行后：此时代码并不会报错违背单向数据流示例代码如下：运行后：此时代码会报错，但是会正常运行，后续会影响代码运行特殊说明：父组件传给子组件的...
2022-05-06 21:21:26
828
1
原创 Vue监听器的基本使用(监听属性-深度监听和立即执行)
一:vue监听器-基本使用语法是:watch: { "被监听的属性名" (newVal, oldVal){ }}方便理解，示例代码：<template> <div> <input type="text" v-model="name"> </div></template><script>export default { data(){ r...
2022-05-05 20:43:57
10397
原创 Vue-cli 安装使用详细教学
一:安装设置npm的淘宝镜像:npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址npm config get registry #查看镜像地址全局安装命令:npm install -g @vue/cli注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。检查是否安装成功在任意小黑窗中：vue --version 如果可以看...
2022-05-04 14:27:56
3148
原创 Vue指令超详细演示理解
每个指令都有不同的作用，下面是一些常见的，必须要掌握的指令：v-on v-model v-for v-text v-html v-if v-show v-if,v-else-if, v-else v-bind
2022-05-03 21:57:50
718
原创 对webpack（前端工程化）的了解总结
一:了解webpack1、什么是webpack webpack是一个javascript的静态模块打包工具 webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，增强功能 最后输出由多个模块组合成的文件，webpack专注构建模块化项目 2、webpack的优点是什么？ 专注于处理模块化的项目，能做到开箱即用，一步到位 通过plugin扩展，完整好用又不失灵活 通过loaders扩展, 可以让webpack把所
2022-05-02 22:06:55
334
原创 敲重点 async-await语法改进异步代码的写法
async,await 是es7中新增的语法，用来进一步改进异步代码的写法，是promise升级版！一:asyncasync函数返回一个 Promise 对象。async函数内部return语句返回的值是Promise 对象的值接下来是方便大家理解所演示的代码:function f1 () { return 1}async function f2 () { return 1}async function f3 () {}const r1 = f1()const r2 =
2022-05-01 21:10:26
204
原创 作为一个前端,关于跨域我有话说
跨域问题是我们前端开发中经常会遇到的问题,如果后端没帮我们弄好,我们也要学会自给自足,俗话说技多不压身!接下来开始跨域!!!想必这张图的报错是各位大佬开发中会看见的吧为什么会报这个错误呢,就是我们说的跨域问题什么原因导致了浏览器报跨域错误发起ajax请求的那个页面的地址 和 ajax接口地址 不在同一个域中!!!浏览器向web服务器发起http请求时 ，如果同时满足以下三个条件时，就会出现跨域问题，从而导致ajax请求失败：（1）请求响应双方url不同源。双方url.
2022-04-29 21:38:38
342
原创 太简单,前端也可以写接口了
在写之前先来了解一下接口传参!!!我们使用ajax请求向服务器接口传参，按http协议的约定，每个请求都有三个部分：请求行： 保存了请求方式，地址，可以以查询字符串的格式附加一部分数据。 请求头：它可以附加很多信息，其中content-type用来约定请求体中保存的数据格式。 content-type常见有三种取值： 请求体: 本次请求携带的参数。至于这些参数到了后端应该如何解析出来，由请求头中的content-type来决 方法一：请求行常见方式如下：使用ajax技术，通.
2022-04-29 21:12:33
7060
原创 两步使用Express快速创建web服务器
首先需要给大家介绍一下Express~~~Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架。框架：是一个半成品，用来快速解决一类问题；库就是工具集，使用非常灵活） （框架有：bootstrap, lay-ui, express, vue, react ; 库：zepto.js , jQuery, day.js, underscore, lodash, art-template, axios, echart.....) web 开发: 对不同的请求能够显示.
2022-04-29 20:32:14
1443
原创 不花钱的模块超市npm
npm网站收集了前端的各种工具.： jQuery, bootStrap, flexible.js, echarts.js........你是如何下载的？官网下载?有没有一个想法：在一个地方下载所有的库(模块.....)给大家介绍一个很好用的"模块超市"npmhttps://www.npmjs.com/接下来,给大家详细介绍一下npm,以及使用步骤去npm网站下载我们的需要的代码时，它们是以"包"这种结构放在npm网站上的。我们需要了解下包和模块的关系。下面用一张图帮助大家理...
2022-04-26 20:29:20
355
原创 导出模块的这两种方法,到底哪一个更好用
第一种:exports// 定义方法，常量const myPI = 3.14const add = (a,b) => a + b;// 导出// 方法一：exports.myPI = myPIexports.add = add第二种:module.exports// 定义方法，常量const myPI = 3.14const add = (a,b) => a + b;// 方法二：module.exports.myPI = myPImodule.ex
2022-04-26 20:05:46
248
原创 原来可以使用path模块来解决文件读写中的路径拼写
// 拼接html5.jpg的绝对路径// 1) 找到当前文件夹的绝对路径console.log(__dirname)// 2) 加上 html5.jpgconst path = require('path')const filePath = path.join(__dirname, 'html5.jpg')// const filePath = __dirname + '\\html5.jpg'console.log(filePath)__dirname 获取绝对路径获取当前被执.
2022-04-26 19:52:28
226
原创 了解及简易上手安装Node.js流程
Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API，而基于 Node.js程序员实现了很多强大的工具和框架。具体来说： 后端API接口。基于Node.js环境 + Express框架， 桌面应用。基于Node.js环境 + Electron 框架 操作数据库。基于Node.js环境 + MySql包 读写和操作数据库 实用的命令行工具。基于Node.js环境，实现的 vuecli，webpack等 etc... 总
2022-04-24 21:23:28
1877
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人