言行物恒-CSDN博客

表头在重置页面大小时会触发吸顶，本以为是吸顶插件的bug，后来发现vue2.6.14中的v-show会对vnode进行一个抓取，导致在页面渲染之后页面的vnode树重排会引起vnode错乱而不能获取eui表头node的问题。1.在使用elementUI时，表头吸顶插件使用时遇到一个棘手的问题？v-show的底层问题，可以使用v-if进行解决。

2023-06-16 15:52:54 75

原创 Web前端开发之VUE17——Vuex

为了便于我们对多个组件复杂多样的数据分享和处理进行统一控制，vue推出vuex作为多组件统一控制的工具。

2022-04-24 17:19:17 1442

原创 Web前端开发之VUE16——项目开发集、element-UI部署

vue-cli:解决PowerShell不能识别vue命令的问题:vue默认提示消息隐藏：vue2路由的创建：vue组件库：Element-UI组件库：修改默认页面名称：//vue.config.js中加入chainWebpack:config => { config.plugin('html').tap(args => { ...

2022-04-24 09:41:46 1244

原创 Web前端开发之VUE15——Vue路由大全、编程式导航、导航守卫

目录路由：通过锚链接Hash实现简易前端路由的方法：vue-router:vue-router的安装：配置和使用vue路由：vue-router高级用法：路由重定向：路由高亮：自定义高亮class类名：嵌套路由：实现嵌套路由：嵌套路由的重定向：动态路由匹配：获取动态路由参数值：编程式导航：命名路由：导航守卫：路由：通过锚链接Hash实现简易前端路由的方法：...

2022-04-21 19:01:39 1222

原创 Web前端开发之VUE14——自定义指令、updated执行机制

自定义指令：自动获取焦点的自定义指令示例代码：<template> <input type="text" v-focus></template><script>export default { directives:{ focus:{ mounted(el){ el.focus() } } }}</script>全局自定义指令：示...

2022-04-20 16:04:18 923

原创 Web前端开发之VUE13——插槽

插槽：示例代码：<template> <div> <CP1> <div class="diyText">我是父组件自定义的内容</div> <div class="diyText">我是父组件自定义的内容2</div> </CP1> </div></template><script>import CP..

2022-04-19 14:00:09 344

原创 Web前端开发之VUE12——ref引用，$nextTick，动态组件，keep-alive标签

ref引用：示例代码，代码中加入了组件中元素的控制：//app.vue<template> <div ref="mydiv">使用ref得到我</div> <cp1 ref="mycp1"></cp1> <input type="color" v-model="color" @change="changeColor"> <button @click="changeColor(col.

2022-04-19 10:16:57 319

全局配置axios：示例代码：//main.js中的配置import axios from "axios";const app=createApp(App)axios.defaults.baseURL="https://www.escook.cn"//此处设置请求的根路径//此处配置全局变量，后期使用this.$http调用，此处$http可自定义app.config.globalProperties.$http=axiosapp.mount('#app')...

2022-04-18 10:50:06 526

原创 Web前端开发之VUE10——生命周期的完整执行时机、组件关系、vuex概念

生命周期的完整执行时机：vue3中生命周期图例Vue.js - The 渐进式 JavaScript 框架https://v3.cn.vuejs.org/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90组件关系及数据共享：父向子共享数据：子向父共享数据：父子组件双向同步：兄弟组件数据共享：后代数据共享：注意祖先级数据只会共享给子孙...

2022-04-18 09:50:04 747 2

原创 Web前端开发之VUE09——emits节点、组件上的v-model

目录emits节点：组件上使用v-model：emits节点：在之前的我们学习过$emit的事件触发，也就是自定义事件，前期代码：html:<button @click.stop="event_click">+</button>script:event_select(){ this.$emit('itemSelected')//传递自定义事件，参数包括事件名，多传递参数。}父级：@itemSelected="方法"//响应事件

2022-04-16 17:17:44 871

原创 Web前端开发之VUE08——动态class的优化、props验证

目录动态class的优化：props验证：动态class的优化：在往期的class中我们会使用对象键值对直接输入在标签上，这样会使属性过长。使用data的对象传入是一个不错的解决办法。示例代码：style操作过程中发现animation不能被编译，貌似是因为vue给class动态绑定了哈希，但是style动态没有绑定哈希导致的。下面看一个示例：<template> <div> <div class="text".

2022-04-15 20:35:40 947

原创 Web前端开发之VUE07——vue3新脚手架vite的使用、全局组件、组件命名

创建SPA单页面项目：vite的基本使用：vite其实和vue-cli都是脚手架工具，不同点见上。上面给出了npm的安装方式，下面我是用yarn的代码创建一个新的SPA项目：$ yarn create vite <project-name> --template vue$ cd <project-name>$ yarn$ yarn devvite项目的结构：vite项目的运行流程：当我们把模板结构创建好后，进行mai...

2022-04-15 17:12:32 4233 1

原创 Web前端开发之VUE06——生命周期、钩子函数

目录生命周期：钩子函数：完整阶段:生命周期：钩子函数：create阶段：mount阶段:update阶段:unmount阶段:在vue3中destroy已被弃用,所以我们使用卸载阶段替代.在main.js中使用如下代码,测试卸载过程.setTimeout(()=>{ app.unmount()},5000)完整阶段:<template> <div> <di...

2022-04-14 20:47:04 428

原创 Web前端开发之VUE05——Vue组件使用、组件通信、回顾

组件概念：在学习vue组件的使用之前，我们首先看一下之前的一个折叠板的案例。其中包含less语法样式表。请使用yarn add less less-loader安装匹配版本的less包，并将style中lang改为less以完成代码。<template> <div class="box"> <div><h1 v-text="title"></h1></div> <div class="border btn.

2022-04-13 22:06:58 544

原创 Web前端开发之VUE04——vue基础复习

目录1.vue是什么？2.@vue/cli全局包3.插值表达式4.MVVM设计模式5.动态属性：6.事件绑定：9.v-model的使用：10.v-text和v-html的使用：11.v-if和v-show的使用12.v-for的使用1.vue是什么？VUE：渐进式javascript框架渐进式：逐渐使用框架：一套规则的语法2.@vue/cli全局包(1).yarn global add @vue/cli ——获取VUE包(2).vu

2022-04-12 11:41:01 479

原创 Web前端开发之VUE03——vue插值表达式、MVVM设计模式、基础指令

vue插值表达式：MVVM设计模式：VUE的设计模式，可以实现双向绑定，同时对view和model的变化进行同时改变。v-bind：v-on:v-on中事件对象的传递：vue修饰符：详细修饰符见：详细修饰符https://cn.vuejs.org/v2/guide/events.htmlv-model:进行表单的value属性和我们变量互相绑定到一起。示例代码：<template> &...

2022-04-12 11:04:02 594

原创 Web前端开发之VUE02——vue框架、eslint检查代码、单vue文件、 vue文件的原始结构

eslint检查代码：eslint会自动检查代码的多余声明或错误项，并在项目控制台中显示出来。解决方法：单vue文件：vue文件的原始结构：

2022-04-09 13:57:37 631

原创 Web前端开发之VUE01——ES6导入和导出、promise、webpack、vue项目介绍、vue安装过程

首先我们要了解什么是VUE？所谓渐进式JS框架，其实就是要学他的语法。并且其本身是逐渐升级而来的一种框架。

2022-04-09 12:23:15 1009

原创 Web前端开发之前后端交互11——express

express:get:post:或URL中携带的查询参数(动态和静态)：托管静态资源：示例代码：const exp = require('express')// console.log(exp)const webApp = exp()// console.log(webApp)webApp.listen(8089,function () { console.log('someone visited...

2022-04-08 13:11:11 578

原创 Web前端开发之前后端交互10——npm初体验、项目包分类、模块加载机制

目录npm初体验：一次性安装项目所需包：TB -NPM镜像：切换npm下包镜像源：项目包分类：i5ting_toc md转html工具：规范的包结构：npm初体验：包管理配置文件：一次性安装项目所需包：TB -NPM镜像：切换npm下包镜像源：项目包分类：i5ting_toc md转html工具：规范的包结构：...

2022-04-07 13:23:32 319

原创 Web前端开发之前后端交互09——模块化、模块作用域、exports对象、包

模块化：模块作用域：共享模块作用域中的成员：module对象：module.exports对象：根据上面所学，我们看看下面的代码：模块调用JS：//当我们导入模块时，会自动运行模块const getModule=require(__dirname+'/File/模块作用域测试use.js')if (getModule){ console.log(getModule) // console.log(mod...

2022-04-07 11:41:07 410

原创 Web前端开发之前后端交互08——Node.js、fs模块、path模块、http模块

首先，我们来思考一下JS为什么可以被浏览器解析。其次，为什么JS可以操作DOM和BOM。再次，我们了解一下JS运行环境：

2022-04-06 17:36:28 875 1

原创 Web前端开发之前后端交互07——同源、跨域、JSONP、防抖、节流

目录同源：跨域：跨域请求：JSONP：JQ中的JSONP：防抖：节流：同源：跨域：跨域请求：JSONP：跨域请求报错：两个不同域的js：JQ中的JSONP：防抖：防抖实际上就是一种利用settimeout来不断清除定时器和启动定时器的方法。下面给出一个类似某宝搜索框的下拉内容实现代码：<button class="btn-get-TBSearch"&...

2022-04-05 18:40:11 1888

原创 Web前端开发之前后端交互06——axios

axios是什么？了解了什么是axios后，我们现在要知道axios和jq一样，只不过jq覆盖全面，而axios只专注于网络数据请求，现在我们看一下语法：首先，Get方法：POST方法：两种方法的实际操作： //axios get方法 $('.btn').on('click',e=>{ let url='http://www.liulongbin.top:3006/api/get' let obj={ name:'z.

2022-04-05 16:41:42 2334

原创 Web前端开发之前后端交互05——XMLHttpRequest[Level2]、JQ文件上传

目录XMLHttpRequest[Level2]：设置HTTP请求的时限：FormData对象：文件上传：xhr上传文件请求：JQ的文件上传：实现loading效果：XMLHttpRequest[Level2]：在第一代XMLHttpRequest中我们智能传输文字信息，文件无法传入。而LV2有一些新特性：设置HTTP请求的时限：示例代码： let xhr=new XMLHttpRequest() xhr.open('GET','http...

2022-04-05 15:51:55 589

原创 Web前端开发之前后端交互04——监听表单提交事件、模板引擎art-template、XMLHttpRequest、 URL编码、数据交换格式

目录监听表单提交事件：模板引擎：XMLHttpRequest:URL编码：数据交换格式：JSON：JSON和JS互转：监听表单提交事件：在JQ中有两种办法来监听表单提交事件：阻止表单默认提交事件：由于表单会默认选择跳转到指定页面。在之前的JQ中我们学到了序列化表单的方法，这里就可以用到它。我们希望读取全部表单的元素，注意必须存在name属性。模板引擎：art-template:用于渲染大量数据。首先我们使用原生方法...

2022-04-05 14:55:00 1107

原创 Web前端开发之前后端交互03——接口测试、接口文档

接口测试：在我们使用POST和GET方法请求数据时，常常不知道页面接口是否有效或无法调试，下面借助POSTMAN工具可以很好的解决这一问题。get方法测试：post方法测试：接口文档：示例：...

2022-04-05 10:57:11 781

原创 Web前端开发之前后端交互02——AJAX

目录jQuery中的数据交互AJAX：接口：jQuery中的数据交互AJAX：我们在jq中学习了一些从服务器上的资源请求到服务器上的方法，这里我们回顾一下？$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。下面是代码演示： $(window).on('load',()=>{ console.log(1) })//load更前 $(()=>{ console.log(2..

2022-04-05 10:07:49 204

原创 Web前端开发之前后端交互01——客户端和服务器

目录客户端及服务器：URL地址：客户端与服务器的通信过程：网页中如何请求数据：从这里开始我们将要讲述全新的章节，前后端交互。首先我们要了解什么是客户端和服务端。客户端及服务器：URL地址：其称为统一资源定位符，用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址，才能正确的定位资源的存放位置，从而成功访问到对应的资源。而其组成部分如下：客户端与服务器的通信过程：网页中如何请求数据：为什么要学Ajax？...

2022-04-05 09:35:36 1902

原创 Web前端开发笔记之JS提升08——JQ

目录JQ对象向DOM对象转换：事件绑定：元素内容设置获取：匹配元素选择器：属性操作：表单元素中的value属性值：查找方法：操纵类名：Js部分结束，我们来看看JQ的一些知识。在基础笔记中，我们对JQ已经有了大概的认识，这里我会说一些，基础中没有说到或需要补充的部分。JQ对象向DOM对象转换： let getAllBtn=document.querySelectorAll('button') let $getAllBtn=$(getAllBtn).

2022-04-04 16:37:02 544

原创 Web前端开发笔记之JS提升07——类、对象拷贝

类：其存在于ES6中的关键字，其就是构造函数和属性的封装。这对于学习过其它编程语言的朋友很友好且容易接受。下面看看用法：<script> console.log("只支持EScript6") class Person { //静态成员,必须要使用构造函数来访问 static name='polaris' static age=18 static eat(){ console.log('eating') } stat

2022-04-03 18:57:36 543

原创 Web前端开发笔记之JS提升06——严格模式、改变this指向

严格模式：详细见MDN。下面我说几个比较常用的严格情况：箭头函数的this:由于箭头函数会指向其调用者的上级，所以一般不在箭头函数中使用this。那么有没有办法改变this指向呢？改变this的方法合集：<button class="btn">获取验证码</button><script> // console.log(this) // let timer=window.setInterval(function (){

2022-04-03 17:20:43 231

原创 Web前端开发笔记之JS提升05——原型对象、constructor和proto、继承、原型链

目录原型对象：constructor和__proto__和prototype：继承：原型链：原型对象：其作用是：共享方法，节省内存。简单理解就是每一个构造函数内置了一个prototype，这其实就是一个存储公用数据的对象存取空间。 function Person(name,age,address) { this.name=name this.age=age this.address=address } Person.prototype

2022-04-03 16:17:06 458

原创 Web前端开发笔记之JS提升04——构造函数、Object构造函数、Array方法、RegExp方法、字符串方法

目录构造函数：constructor和instanceof：Object构造函数：Array方法：RegExp构造函数：包装类型：构造函数：其实也是函数，只不过构造函数一般用于和new搭配使用创建对象。内置的构造函数：Object，用于创建对象。使用如下: function Obj(name, age, address, phone, testArr = [1, 2, 3], testObj = {a: 1, b: 2, c: 3}) { ...

2022-04-03 14:24:27 389

空空如也

空空如也