shark skr-CSDN博客

原创 vue修改数据页面不重新渲染

直接添加属性的问题<template><div><p v-for="(value,key) in item" :key="key"> {{ value }}</p><button @click="addProperty">动态添加新属性</button></div></template><script>export default {data:()=>{

2022-02-17 18:56:03 268 1

概念在下次 DOM 更新循环结束之后执行延迟回调1什么时候会用到$nextTick有时候我们想要在created中获取到dom元素，就可以使用$nextTick（）1created(){let that=this;that.$nextTick(function(){ //不使用this.$nextTick()方法会报错 that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素});}123456如果想要在修改数据后立刻得

2022-02-17 18:52:21 299 1

原创 vue之prop

Prop1 . prop 大小写Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'})<blog-post post-title="hello!"></blog-post>12345672 .单项数

2022-02-16 21:23:04 151 1

原创 slot插槽

1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = {template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div>`,data () { return { style1: { width:

2022-02-16 21:20:35 88

原创 v-for中为何要使用key

一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul><li v-for="item in items" :key="item.id">...</li></ul>123用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />12那么这背后的逻辑是什么，key的作用又是什么？key是给每一个vnode的唯

2022-02-16 21:17:49 394

原创 vue使用keep-alive缓存页面优化项目

概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode

2022-02-15 21:11:23 172

原创 vue路由导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.b.

2022-02-15 21:09:15 69

原创 vue脚手架本地开发跨域请求设置

vue脚手架配置在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址 ws:false,//是否启用websock

2022-02-15 21:06:58 77

原创 vue-router基础传参跳转

一、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-14 21:09:59 152

原创 vue过滤器

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值.Vue.filter('global-filter',(val,...args)=>{console.log(`需要过滤的数据是:${val}`)return val + ' 过滤器追加的数据'})var app = new Vue({el:.

2022-02-13 22:53:53 64

原创 vue自定义指令使用场景

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时inserted: function (el) {// 聚焦元素el.focus()}})<input v-focus>123456789

2022-02-13 22:51:04 186

原创 vue自定义指令

一、什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx`// -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'

2022-02-13 22:48:55 70

原创 vue封装自定义组件

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？1答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功.

2022-02-11 21:21:57 266

原创 vue的修饰符都有那些

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right修饰键：.ctrl.alt.shift.meta<input @keyup.alt.67="clear"><div @click.ctrl="doSomething">Do something</div>1234与按

2022-02-11 21:15:11 96

原创 MVC和MVVM

mvvm 概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例： view 对应 template，vm 对应...

2022-02-11 21:03:21 94

原创 computed，methods，与watch之间的区别

1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<div>{{message.split('').reverse().join('')}}</div><div>{{reverseMessage}}</div>computed: {

2022-02-10 23:36:53 269

原创 watch监听

watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p ></div><script src="/node_modules/vue/dist/vue.js"></script><script t

2022-02-10 23:35:52 170

原创组件之间的通讯传值

一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动父—>子（子组件中修改props数据，是无效的，会有一个红色警告）1. 父组件parent.vue代码如下：父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren

2022-02-10 07:41:00 346

原创为什么data是一个函数

实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }})vue组件可能会有很多个实例，采用函数返回

2022-02-07 19:55:26 497

原创 vue中的diff算法

什么是diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点当节点一旦发生改变会给一个变量效率大大提高diff算法的两个特点比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较Diff算法的步骤：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新

2022-02-07 19:52:14 103

原创 vue中的虚拟dom

一、什么是虚拟DOM通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一

2022-02-07 19:49:40 94

原创 vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始

2022-02-07 19:36:18 52

原创 vue生命周期

总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数创建后：Created() 是最早使用data和methods中数据的钩子函数挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树挂载后：Mounted() dom渲的数据已经同步更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的更新后：Updated() 内存和页面都是新的销

2022-02-07 19:31:57 45

原创 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-02-07 19:27:26 38

原创什么是回流，什么是重绘，有什么区别?

什么是回流?页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。有什么区别？回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变优化项目，提高性能应用场

2022-02-07 19:12:55 130

原创 v-if和v-show的区别

都可以动态控制着dom元素的显示隐藏一、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的...

2022-02-07 18:57:57 426

原创 js宏任务和微任务

宏任务和微任务宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await注意：微任务比宏任务的执行时间要早console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);

2022-01-21 11:57:50 58

原创 js的数据类型，堆栈内存

数据类型基本数据类型（值类型）： Number、String、Boolean、Undefined、Null引用数据类型: Object。包含Object、Array、function、Date、RegExp堆栈内存栈存储栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null，以及对象变量的指针堆内存而堆内存主要负责像对象Object这种变量类型的存储案例// 栈堆内存console.log({}=={})cons

2022-01-21 11:45:10 55

原创深拷贝和浅拷贝

深拷贝与浅拷贝的区别浅拷贝：只复制第一层的浅拷贝深拷贝：深复制则递归复制了所有层级为什么要使用深拷贝我们希望在改变新的数组（对象）的时候，不改变原数组（对象）数组浅拷贝直接遍历var array = [1, 2, 3, 4];function copy (array) { let newArray = [] for(let item of array) { newArray.push(item); } return newArray;}var co

2022-01-21 11:27:27 40

原创 js数组方法

js数组方法join()push() 和 pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）join()就是把数组转换成字符串，默认的是逗号( ，)书写格式：join(" ")，括号里面写

2022-01-21 11:20:31 37

原创 this指向

this5大调用场景：1.普通函数2.对象方法3.call、apply、bind4.class5.箭头函数1.普通函数中的this function fn(){ console.log(this); } fn(); //相当于下面的window.fn(); window.fn();window调用了fn，所以this指向window2.对象方法中出现this let a={ name:'李四', run:function(){ c

2022-01-15 20:43:07 46

转载垃圾回收机制

垃圾回收机制浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。只有函数内的变量才可能被回收不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变

2022-01-15 20:25:05 142

原创作用域与自由变量

作用域（定义）变量作用域：就是一个变量可以使用的范围。作用域（种类）js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；** 如下图所示：**es6作用域,只适用于const,let自由变量自由变量的概念：当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全

2022-01-15 20:15:43 76

原创原型与原型链

1. prototype每个函数都有一个prototype属性，被称为显示原型2._ proto _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor 属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型

2022-01-15 20:03:22 48

原创 HTML+CSS+盒模型+flex布局+H5和CSS3新特性

目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级

2022-01-12 20:47:27 519

原创 Vue路由守卫

文章目录全局守卫全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫完整的导航解析流程正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：co

2022-01-11 20:51:29 617

原创 css的一些知识总结

目录行内元素有哪些？块级元素有哪些？空(void)元素有那些？什么是CSS Hack1.条件Hack2.属性Hack3.选择符Hack浏览器优先级src与href的区别href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。link和@import的区别行内元素有哪些？块级元素有哪些？空(void)元素有那些？CSS规范规定，每个元素

2022-01-11 20:12:06 57

空空如也

空空如也