- 博客(36)
- 收藏
- 关注
RSS订阅原创 filter过滤器
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })var app = new.
2022-02-15 07:47:42
257
原创 Vue路由用法
一、Vue路由基础用法：1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from
2022-02-15 07:41:01
603
原创 vue自定义指令使用
前言一、Vue的自定义指令分为？vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令分为全局自定义指令和局部的自定义指令全局自定义指令是通过Vue.directive(‘第一个参数是指令的名称’,{第二个参数是一个对象，这个对象上有钩子函数})下边举例说明: Vue.directive('focus', { // el：指令所绑定的元素，可以用来直接操作 DOM。 //binding：一个对象，包含以
2022-02-14 07:40:03
952
原创 vue的组件
一， 组件开发的思想我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目
2022-02-14 07:37:39
111
原创 事件修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.pre
2022-02-14 07:34:21
2537
原创 mvvm与mvc
文章目录前言一、mvvm？view ,model,viewModel 三者的关系：一、mvc？前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、mvvm？MVVM是Model-View-ViewModel的简写，即数据-视图-视图模型。Model：模型,应用中的数据模型,指的是后端传递的数据。View：视图，
2022-02-14 07:31:54
136
原创 watch 的方法和属性
文章目录watch 的方法和属性【1】handler 方法【2】immediate 属性【3】deep 属性深度监听的方法有哪些？【1】使用 deep 属性【2】使用 computed 计算属性监听watch 的方法和属性【1】handler 方法举个????，代码如下：其实我们平时写的 watch 方法都是会去默认执行这个 handler 方法的watch: { name: { handler(newVal, oldVal) { consol
2022-02-11 10:41:37
4176
原创 Vue中computed、methods、watch区别
watch和computed是对数据的监听 new Vue({ el:'#app', template:` <div> 1.{{msg}}|{{data1}}|{{data2}} <br/> 2.{{fullName}} <button
2022-02-11 10:37:10
211
原创 Vue的组件通讯
文章目录 前言一、Vue的组件通讯包括哪几个？1.父传子2.子传父3.非父子传参 前言 一、Vue的组件通讯包括哪几个？ 三个。分别是父传子,子传父和兄弟组件传值 1.父传子 在父组件的子组件是标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受父组件传过来的数据，props...
2022-02-10 07:42:33
88
原创 虚拟DOM diff算法
什么是虚拟dom?虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。简单来说：本质上是js对象,这个对象就是更加轻量级的对DOM的描述为什么要创建虚拟dom?创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。vue中diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用pat
2022-02-07 20:38:52
170
原创 Vue的双向数据绑定原理
vue的双向数据绑定原理 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。 首先介绍一下Object.defineProperty()方法 Object.defineProperty方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象 语法：Object.defineProperty(ob
2022-02-07 20:23:26
78
原创 浏览器的回流 重绘
什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。有什么区别回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变如何避免重绘..
2022-02-07 20:20:36
52
原创 data为什么是一个函数
根的实例对象data可以是对象也可以是函数(根实例是单例), 不会产生数据污染组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了, javascipt只有函数构成作用域, data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响.
2022-02-07 18:40:50
5161
1
原创 vue过滤器
vue自定义过滤器 过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。 vue中的过滤器分为两种：全局过滤器和局部过滤器 全局过滤器 Vue.filter('formatePrice', (val) => { return val.toFixed(2)})// 使用{{13.44 | formatePrice}} 局部过滤器 <script> export default { da
2022-02-06 01:42:42
65
原创 vue生命周期
vue的生命周期 vue实例从创建到销毁的过程，就是生命周期。vue每个组件都是独立的，每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段：挂载阶段、更新阶段、销毁阶段。 beforeCreate:创建前 实例初始化之后，此时组件的选项对象还未创建，el,data并未初始化，因此无法访问methods,data,computed等上的数据和方法。 data() { return { num:1 }}beforeCreate()
2022-02-04 19:15:37
746
原创 VUE指令
vue常见的指令 在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定 ????v-text(相当于原生js中的innerText) 解析文本 两者等价<span v-text="msg"></span><span>{{msg}}</span> ????v-html(相当于原生js中的innerHT
2022-02-04 19:10:18
395
原创 vue中的slot(插槽)
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置。父组件往子组件中插入一些内容。用表示。 插槽的分类：默认插槽，具名插槽，作用域插槽 1. 默认插槽 默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据 子组件：<div> <slot></slot></div>父组件：<heads>你好</heads> 2. 具
2022-02-03 12:38:10
341
原创 null 和 undefined 区别
相同性： 在JavaScript中，null 和 undefined 几乎相等 在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等 console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log
2022-01-24 23:46:02
58
原创 for in 和 for of 的用法
for in 和 for of 首先一句话：(for···in取key，for··of取value) for in和for of都是用来遍历属性的，我们先看一个例子： let arr = [1,2,3,4,5]for(let key in arr) { console.log(key); // 输出下标}for(let value of arr) { console.log(value); // 输出每个元素} let obj = { name:'zbt',
2022-01-24 23:34:35
458
1
原创 js数组方法详解
???? 1. push() 给数组的末尾添加一个或多个元素。格式：数组.push(参数1，参数2…) let arr = [1,2,3]let temp = arr.push(4)console.log(arr) // 输出 1 2 3 4原数组改变console.log(temp) // 输出4，返回添加元素后数组长度 ???? 2. unshift() 给数组的首位添加一个或多个元素。格式：数组.unshift(参数1，参数2…) let arr = [2,3,4]let temp
2022-01-21 11:20:01
206
原创 js宏任务和微任务
文章目录 前言一、常见的宏任务和微任务？二、异步与同步？三、同步异步问题？四、执行顺序？ 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、常见的宏任务和微任务？ 宏任务:setTimeout setInterval Dom事件, Ajax请求 微任务:Promise async/await 微任务>dom渲染>宏任务 结论:微任务执行时机比宏任务早 举例说明: console.log(1)setTimeout(()=>{console.l..
2022-01-19 19:37:05
1790
原创 js 中的山 -又一座.闭包 this指向
上一座山我们简单地说了下函数 和作用域 今天来了解下闭包和this指向,也欢迎大家去看看上一座大山 ????????????闭包,this指向闭包this指向闭包闭包函数：声明在一个函数中的函数，叫做闭包函数。闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。闭包的几个特点让外部访问函数内部变量成为可能；局部变量会常驻在内存中；可以避免使用全局变量，防止全局变量污染；会造成内存泄漏（有一块内存空间被长期占用，而不被释放）
2022-01-15 16:02:34
59
原创 element ui 组件样式穿透
在平常开发项目中经常会遇到 父子组件嵌套，但是使用子组件时更多是为了复用，使用子组件时即不想修改子组件原来的样式，又想对它进行一些操作 这时候就用到了 样式穿透外层容器 >>> 组件名 在less中使用 >>> .el-input__inner { /* ... */ }外层容器 /deep/ 组件名 在less中使用/deep/ .el-input__inner{ /* ... */ }外层容器 ::v-deep
2022-01-12 19:51:57
5098
原创 vue路由守卫的使用介绍
导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，导航守卫分为：全局守卫组件内的守卫路由独享的守卫完整的导航解析流程全局守卫//全局守卫有三种://全局前置守卫 router.beforeEach（to，from， next）router.beforeEach((to, from, next) => { console.log(to) => // 到哪个页面去？ console.log(from) =>
2022-01-12 16:24:56
460
原创 HTML&CSS
HTML&CSS的几小项行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？CSS Hacksrc与href的区别link与@import区别css3/H5新特性行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素有：span a b i img input select strong块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…空元素(没有内容)： br hr img input link metaCSS
2022-01-12 15:14:16
54
原创 fiex布局常用属性介绍
flex 是 Flexible Box 的缩写，意为"弹性布局" 任何一个容器都可以指定为 flex, 行内元素也可以使用 flex 布局。设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器常用的属性有如下:flex-direction设置主轴方向垂直于主轴的则是
2022-01-10 13:53:21
831
原创 postiton定位与元素居中
定位分别有如下几种: static、relative、absolute、fixed、inherit和stickyposition: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。position: ab
2022-01-08 07:42:58
138
原创 vuex简单理解
目录一. vuex是什么？二. vuex的使用步骤三. 高级用法（持久化工具）四. 高级用法—辅助函数(语法糖)五. 高级语法---- 模块化管理数据 （modules）一. vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,可以实现数据之间的共享,它由五部分组成：分别是：state （用来存放数据）actions （可以包含异步操作）mutations （唯一可以修改state数据的场所）getters （类似于vue组件中的计算属性，对state数据进行计算（
2022-01-06 21:28:51
714
转载 盒模型、BFC、清除浮动
一、什么是盒模型？ 1、在HTML页面中，每一个元素都可以被看做一个盒子， 盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成 2、盒子模型有哪两种 标准模式下：一个的块的总宽度（页面中占的宽度）= width + margin(左右) + padding(左右) + border(左右) 怪异模式下：一个块的总宽度= width + margin(左右)（即width已经包含padding和border）[IE浏览器]
2022-01-06 07:34:15
57
原创 项目搭建完善
使用脚手架创建项目vue create xxx创建等待创建完毕环境变量搭配创建文件分别写入几个变量名NODE_ENV VUE_APP_XXX BASE_URL获取是用process.env.VUE_APP_XXX来获取vant-ui 按需引入官方文档选择安装# Vue 2 项目，安装 Vant 2：npm i vant -S -S == --save 安装到生产环境# Vue 3 项目，安装 Vant 3：npm i vant@next -S
2022-01-05 16:53:25
283
原创 点击回到顶部的简单小方法
好记性不如烂笔头 ref用于下面获取dom节点 <div ref='home'></div> <span class="topBtn" v-show="topShow" @click="topHui">回到顶部</span> mounted() { 获取html元素refs是vue提供的获取元素的方法 this.$refs.home.addEventListener('scroll',this.handlerscroll)
2022-01-04 21:21:00
142
原创 rem 适配 移动端自适应
主要介绍了vue移动端自适应，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习 价值，需要的朋友们一起来学习学习吧方案一:直接引入js （自己 写的动态改变fontsize的js）function htRem () { var ww = document.documentElement.clientWidth; if (ww > 750) { ww = 750; } document.documentElement.style.fontSize = w
2022-01-03 21:27:09
219
原创 环境变量配置
我们在vue项目开发中，项目在运行时会根据启动的指令来运行不同的环境，在不同的环境中，我们配置对应所需的变量来满足我们的开发需求，称为多环境变量 环境一般分为开发环境，测试环境，生产环境在根目录下的package.json里的scripts配置serve test build通过--mode xxx来执行不同环境"scripts": { "serve": "vue-cli-service serve --open", "test": "vue-cli-service build --mode.
2021-12-31 16:52:00
304
原创 Vue 配置proxy跨域
一. 为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）二. 什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域三. 前端跨域三种解决方式
2021-12-30 15:22:42
599
原创 Git 了解git及简单使用
首先了解Git是什么?Git就是一个版本管理控制系统(缩写ves)，用来记录文档变化过程，记录文档的每一次改变的节点，可以方便我们回溯到任意的以前记录节点。Git的初衷也就是方便解决团队开发代码之间的问题。人为维护文档，文档数量多目录混乱，每次文档还要复制，效率低下出错率还高，所以Git出现了。接下来让我们一步步看看Git的使用。下载安装下载链接 下载后傻瓜式安装，所有选项使用默认值即可。Git工作流程理解这个可以帮助你更好的使用GitGit仓库暂存区工作区用于存
2021-12-26 19:50:06
222
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人