- 博客(50)
- 收藏
- 关注
RSS订阅原创 谈一谈Upload上传文件和图片
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" // 上传地址 :on-preview="handlePreview" // 点击以已上传文件时触发 :limit="3" // 设置最大上传个数 :auto-upload="false" // 是否选取文件后立即进上传 accept=".xlsx,.pdf..
2022-05-09 16:58:40
601
2
原创 鼠标移动出现小手与溢出部分以省略号显示
1、鼠标移动显示小手只需要在需要的标签内添加 `cursor: pointer` 这个属性就行了2、以省略号显示首先，我们需要给标签定宽<style> p{ width: 63px; // 定宽 overflow: hidden; // 溢出部分隐藏 white-space:nowrap; // 有些标签会自动换行，这个是禁止自动换行 text-overflow:ellipsis; // 使溢出部分以省略号显示，
2022-04-11 15:30:09
723
原创 echarts饼图默认中间显示总数
series: [ { type: 'pie', radius: ['50%', '70%'], // 防止重叠 avoidLabelOverlap: false, // 相当于权重 zlevel:1, label: { normal: { show: fal
2022-03-30 17:41:29
5646
1
原创 从分支拉取git 代码和git简单提交步奏
拉取从指定分支拉取代码git clone -b 分支名 地址提交进行查看git的状态git status保存到本地git add <文件名> 提交单个修改文件进入暂存区 git add . 提交所有修改的文件进入暂存区如果提交后没有任何反应 那么就表示最好的反应 git认为没有反应表示没有错误将暂存区的文件提交到分支上 提交命令git commit -m "对本次修改的具体描述"如果是团队开发 需要先将远程仓库的代码更新到本地 然后在提交git pu
2022-03-30 17:12:42
408
原创 echarts饼图的颜色修改
第一种 // 可以直接在series写在里，可以根据饼图的数量添加，不用担心多出，多出的是不会显示的 series:[{ color:['#46a4f7','#36cbcb','#11D074','#fad337'] }]第二种data:[ {value:35, name:'张三', itemStyle:{color: '#8ec060'}}, {value:67, name:'李四', itemStyle:{color: '#47A47
2022-03-30 16:59:53
2455
原创 vue中的prop
propprop一般用于父组件向子组件进行单向通信（父向子传值），传递的可以是一个对象，也可以是一个数组。prop是数组的话会有默认的数据类型，是对象的话可以设置数据类型，是否必传等prop 是在父传子时形成一个单向下行绑定，意思是父级的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。props验证<test-prop-validate :prop-a="1" :pro
2022-02-22 14:59:44
15350
原创 v-for中的key值
key 是什么简单来说key是给每一个vnode的唯一id，同时也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点详细来说的话1.vue中使用for循环的话要加上:key 他的值是唯一的标识，这个唯一标识最好是item的id。因为vue组件高度复用的原因，增加key可以标识组件的唯一性，也是为了更好的区分个别组件，key的作用主要是为了更高效的更新虚拟DOM。2.key主要是做DOM diff算法用的，diff算法是同级进行比较，比较当前标签上的key还有他当前
2022-02-16 20:07:05
3916
1
原创 vue自定义过滤器
filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// filter是过滤器的名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })局部过滤器（组件过滤器）全局过滤.
2022-02-14 21:24:12
579
原创 vue路由，路由传参
路由的基本用法第一步 安装路由npm install vue-router --save在min.js中引入//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import Home from './components/Home.vue'import List './components/List.vue'import HelloWorld from './components/H
2022-02-14 21:17:10
77
原创 vue修饰符
一、事件的修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.p
2022-02-13 20:58:38
74
原创 mvvm和mvc
mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})
2022-02-13 20:52:50
113
原创 watch深度监听
watch的作用watch它可以让我们深度监听一个值的变化，从而做出相对的反应 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p> </div> <!-- 引入vue --> <script src="/node_modules/vue/dist/vue.js">
2022-02-10 21:23:58
3716
2
原创 vuex辅助函数、模块化管理
1、vuex的辅助函数辅助函数分别有mapState 在computed中使用 使用方式：…mapState([""])mapGetters 在computed中使用 使用方式：…mapGetters([""])mapMutations 在methods中使用 使用方式：…mapMutations([""])mapActions 在methods中使用 使用方式：…mapActions([""])使用前需要先引入import { mapAc
2022-02-09 20:05:00
285
原创 浏览器的回流、重绘
1、回流当页面中的尺寸，布局，显示隐藏等改变时需要重新构建页面，就会引起回流2、重绘当页面中元素属性发生改变，而这些属性只是影响外观，风格，不会影响布比如background-color局。就叫称为重绘。3、区别**回流必将引起重绘，而重绘不一定会引起回流。**比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变...
2022-02-07 20:46:03
360
原创 vue 虚拟dom 和diff算法
虚拟DOM虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。为什么要使用虚拟DOM创建真实DOM成本比较高，而如果用js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。特点：比较只会在同层级进行, 不会跨层
2022-02-07 20:31:00
580
原创 Vue的双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体是：1、 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化2、 compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始.
2022-02-07 19:10:20
179
原创 v if与v show的区别
1、区别v-if：是控制整个DOM元素的删除和添加v-show：是控制DOM 的显示隐藏为DOM元素添加css的display：none 或者移除display：nonev-if有更高的切换消耗；v-show有更高的初始渲染消耗2、相同点都可以动态控制着dom元素的显示隐藏3、使用场景v-if适合在切换量少的情况v-show适合用在频繁切换；...
2022-02-07 18:47:18
159
原创 组件的data为何必须是一个函数
在vue组件中的data只能是一个函数，如果定义为对象就会警告意思是 ：返回的data应该是一个函数在每一个组件实例中但是在实例中data既可以是对象，也可以说函数const arr= new Vue({ el:"#app", // 函数格式 data(){ return { app:"app" } }, // 对象格式 data:{ app:"app" } vu.
2022-02-07 16:56:22
364
原创 vue自定义指令
vue自定义指令vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据。// 注册一个全局自定义指令 `v-focalize`Vue.directive('focalize', { // 当被绑定的元素插入
2022-02-07 09:06:11
72
原创 Vue组件通信
一、父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
2022-02-07 08:24:15
61
原创 vue生命周期
生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂载阶段，更新阶段，销毁阶段分别有：创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数创建后：Created() 是最早使用data和methods中数据的钩子函数挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的
2022-02-07 07:55:37
64
原创 vue常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作用
2022-01-28 10:30:01
47
原创 null与undefined的不同
nullnull是object类型 代表空可以理解为 没有对象，可能将来要赋值一个对象，即该处不应该有值undefined是 undefined类型可以理解为 你定义了一个属性但没有赋值定义了形参，没有传实参，显示undefined对象属性名不存在时，显示undefined函数没有写返回值，即没有写return，拿到的是undefined写了return，但没有赋值，拿到的是undefined相同点console.log(null == undefined); // true
2022-01-27 12:04:22
736
原创 for in 与 for of的区别
for in取key，for of取value循环数组 var list = [1,2,3,4,5,6] for(let i in list){ console.log(i); // 0 1 2 3 4 5 输出下标 } for(let i of list){ console.log(i);// 1 2 3 4 5 6 输出每一项内容 }循环字符串 var list = .
2022-01-26 18:45:06
976
原创 js数组的方法
1、push在数组末尾添加一个或者多个元素 var arr = [1,2,3,4]; arr.push(5); console.log(arr);// [1, 2, 3, 4, 5] arr.push(6,7); console.log(arr);//[1, 2, 3, 4, 5, 6, 7]2、pop数组末尾删除一个，并返回删除的元素 var arr = [1,2,3,4]; console.log(arr.pop()
2022-01-25 22:34:51
1274
2
原创 js数据类型判断
js数据类型判断的4方法typeofinstanceofconstructorObject.prototype.toString.call()1. typeof1.typeof可以检测Number,String,Boolean,Undefined,Function的数据类型，返回对应的数据类型的小写字符。2.对于利用构造函数创建的Number,String,Boolean都返回object3.检测null,Array,Date,RegExp都会返回小写的object consol
2022-01-21 12:07:45
483
原创 变量提升、作用域链
变量提升var声明的变量，function声明的函数存在变量提升let 、const 不会变量提升只有声明本身会被提升，而赋值操作不会被提升。举个例子 console.log(a); // undefined var a = 20 console.log(a); // 20因为var声明的变量会提升，但赋值操作不会提升，所以第一次打印时只是声明了a 但没有赋值 // 就是像这样子 var a console.log(a); a =
2022-01-14 21:25:57
253
原创 JS 作用域、自由变量
作用域：指的是变量可以使用的范围分为：全局作用域函数作用域块级作用域 （ES6新增）全局作用域直接编写在script标签之中的js代码，都是全局作用域。在全局作用域中有一个全局对象window (代表的是一个浏览器的窗口，有浏览器创建)，可以直接使用。js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）； .
2022-01-14 19:05:38
164
原创 vue路由守卫
我们都知道vue的路由守卫有全局路由守卫单个独享路由守卫中间路由守卫在平时我们一般主要使用的都是全局的路由守卫，他里边有全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫首先我们注册一个全局前置守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ..
2022-01-12 20:17:48
149
原创 H5与SCC3的新特性
CSS3一、css3新特性css3中新增的特性：选择器，背景和边框属性，文本效果，2D/3D转换1. 选择器常规选择器:last-child / 选择元素最后一个 /:first-child / 选择元素第一个 /:nth-child(1) / 选择第几个，写1就是第一个 /:nth-child(even) / 按照偶数进行选择 /:nth-child(odd) / 按照奇数进行选择 /:disabled / 选择每个被禁用的dom元素 /:checked / 选择每个被选中的dom元
2022-01-11 19:17:32
600
原创 link与@import的不同
1、 link属于html标签。@import在css中使用表示导入外部样式表；2、 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;3、 link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，老版本浏览器（IE5之前）不能识别；4、 link方式的样式的权重 高于@import的权重；5、link 支持使用javascript改变样式 （document.styleSheets），后者不可...
2022-01-11 16:53:05
112
原创 行内元素 、块级元素 、空元素标签、src与href的区别
行内元素 ：span b a s i img input select strong块级元素 ：div h1-h6 p ul ol li dl dt dd table from空元素 ： br hr img link meta input
2022-01-11 16:16:22
243
原创 两栏，三栏布局，圣杯、双飞翼布局
1、两栏布局左侧固定，右侧自适应css 样式.box{display: flex;width: 100%;height: 500px;}.left{width: 200px;height: 100%;background-color: blue;}.right{width: calc(100% - 200px);height: 100%;background-color: red;}html 代码 <div class="box">
2022-01-10 21:27:24
138
原创 flex 布局
什么是flexFlex 是 Flexible Box 的缩写，意思是"弹性布局"，可以给盒模型提供最大的灵活性。flex 的一些常用方法flex-directionflex-direction属性决定主轴的方向（即项目的排列方向）row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。flex-wrap属性可以控制是否换行n
2022-01-08 10:54:32
85
原创 元素居中的方式
如何让盒子居中第一种父相子绝第二种弹性盒.father{ width: 300px; height: 300px; background-color: aqua; display: flex; justify-content: center; align-items: center; } .seed{ width: 100px; height: 100px
2022-01-07 21:27:23
488
原创 position 定位
1、position: static是position的默认值 意思的没有定位也可以理解为清除定位2、position: relative相对定位给元素设置相对于原本位置的定位，元素并不脱离文档流，原本的位置会被保留，其他的元素位置不会受到影响。3、position: absolute绝对定位设置时注意子绝父相，就是给子元素设置绝对定位时也不要忘了给他的父级元素设置相对定位。如果没有给父盒子设置相对定位的话，他就会一层一层向上找，直到找到body到这时他就会基于body进行定位
2022-01-07 21:13:44
520
原创 vuex 用法
vuex 是什么vuex 是一个集中式的状态管理工具，通过vuex我们可以解决组件之间数据共享问题，后期也方便我们管理以及维护。介绍import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // 存放数据源 state: {}, // 唯一修改state的地方 mutations: {}, // 执行异步操作 actions: {},
2022-01-06 21:16:19
424
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人