![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
yzkdcsdn
这个作者很懒,什么都没留下…
展开
-
Vue 的父组件和子组件生命周期钩子函数执行顺序?
Vue 的父组件和子组件生命周期钩子函数执行顺序?1、首次加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount-> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted-> 父 mounted2、子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated3原创 2021-12-21 10:38:47 · 100 阅读 · 0 评论 -
最近也算很火的Agular和vue到底有什么区别,就简单分析下
Agular和vue到底有什么区别angularvue框架对比总结angularangular一般指 angular2 及以上版本。2010年9月,Google 发布首次angular,即angular1版本。2016年10月 Google 又发布了angular2版本,但是2版本与1版本有非常大的区别,几乎是全部重写,且不向前兼容,更像是一个全新的框架。遂将angular1改名叫angularJs,现angular特指angular2+。vue于 2014 年 2 月首次由 Google 前员工尤原创 2021-12-17 16:42:34 · 544 阅读 · 0 评论 -
在使用tr的时候经常遇到的错误1
我们在使用tr、td等表格类的时候会经常遇到这样一个问题英文大致意思如下:警告:ValidatedMonitoring(…):<tr>不能显示为<table>的子级。向代码中添加<tbody>,以匹配浏览器生成的DOM树。解决这个问题也很简单,因为提示已经告诉我们只需要加个tbody就可以了,所以我们在tr的外层加一层tbody就可以了,示例如下:学费了吗?!!!...原创 2021-12-17 16:33:08 · 514 阅读 · 0 评论 -
列表渲染循环过程中遇到的问题
1、列表渲染循环过程中遇到的问题我们在做项目的时候是不是会出现这样的问题,虽然他不影响程序的正常运行,但是我们看着很难受,所以应该怎么做呢?很简单很简单:循环的时候加个key={i} 虽然加或者不加不会影响程序的运行,但是加总比不加好吧。如下图:此时我们应该给循环那一块的父元素加上key作为唯一标识:如上图所示,此时浏览器就不会报错了!很简单吧!...原创 2021-12-17 16:30:06 · 143 阅读 · 0 评论 -
请求拦截器和响应拦截器
拦截器就是在数据请求的过程中 拦截请求 或者是 拦截响应的一个技术。请求拦截器 就是在发送请求的使用进行一些操作。响应拦截器 就是拦截在响应的时候进行的一些操作。比如 :登录错误返回登录的状态实现:1.下载axios npm install --save axios2.新建utils 文件夹 工具文件夹3.编写如下代码:// 拦截器// 1.引用axiosimport axios from "axios"// 2.创建axios实例let service=axio原创 2021-12-07 19:38:44 · 1305 阅读 · 0 评论 -
Vue的混入(mixin)
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。通俗一点来说就是将需要需要复用的属性和方法进行封装 方便其他组件进行使用。1、例子使用:在src下创建一个文件夹这个文件夹用来存放混入封装的复用内容// 定义一个混入对象let myMixins = { // 原来vue中怎么写属性或者方法 那么在这个对象中就怎么 created: function原创 2021-12-07 19:35:30 · 147 阅读 · 0 评论 -
vue3.0 和 2.0 的区别
默认进行懒观察(lazy observation)。在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。 更精准的变更通知。 比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。3.0 新加入了 TypeScript原创 2021-11-23 11:51:10 · 116 阅读 · 0 评论 -
vue 中什么是权限控制
什么是权限控制?一、在项目中,尤其是在后台管理系统中,不同人员登陆,看到的页面菜单是不一样的,比如,一个公司的办公系统,老板登陆可以看到所有的页面,而普通员工登录可能无法看到公司业绩,营收情况的页面,比如公司的员工个人资料页面只有人力资源部门有权利看,其他部门的员工是不允许查看公司员工信息数据的。当然了除了页面的权限,还会有一些按钮级别的权限,比如一个下载按钮,有的帐号可以用,有的人不能用,比如学校的系统,一个页面中有一个确认成绩按钮,这个按钮只有老师有权利点击,其他学生登陆是无法点击的。二、所以权限控原创 2021-11-23 11:35:35 · 352 阅读 · 0 评论 -
为什么修改了 data 中的数据,但是视图没有更新?
vue 的 data 里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。根据官方文档:定义如果在实例创建之后添加新的属性到实例上,它不会触发视图更 新。原因:当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项, Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部 转为gettertter。受现代 JavaScript 的限制 (以及废弃 Object.o.原创 2021-11-18 20:21:07 · 1982 阅读 · 0 评论 -
mvvm 框架是什么?它和其它框架(jquery)的区别是什么? 哪些场景适合?
定义MVVM 分为三部分:分别是 M(Model,模型层),V(View,视图层),VM(ViewModel,V 与 M 连接的桥梁,也可以看作为控制器 MVC 的 C 层)M:模型层,主要负责业务数据相关,V:视图层,负责视图相关,细分下来就是 html+css 层,VM:V 与 M 沟通的桥梁,负责监听 M 或者 V 的修改,是实现 MVVM 双向绑定的要点;因此开发者只需关注业务逻辑,不需要手动操作 DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM 来统一管理。区别vue原创 2021-11-18 20:16:16 · 565 阅读 · 0 评论 -
如果一个组件在多个项目中使用怎么办?(必看)
方案一:npm 发布引用公共组件编写完成后,将其发布到 npm。发布流程如下:在http://www.npmjs.com 注册一个账号进入 common 的控制台,输入命令 npm login,按照提示输入刚注册的账号密码输入命令 npm publish 即可需要用该组件的项目通过 npm install 命令将公共组件以 node_module 的方式引入。另外,每次改动代码再次发布时,需要修改 package.json 文件中的版本号,不然发布不成功。• 方案二:npm link首先进入公共包,在原创 2021-11-18 20:14:46 · 1271 阅读 · 0 评论 -
Vue 双向绑定的原理
双向绑定原理:vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的数据劫持:当我们访问或设置对象的属性的时候,都会触发Object.defineProperty()函数来拦截(劫持),然后再返回(get)或设置(set)对象的属性的值,并且当数据发生改变的时候做出反应发布者-订阅者模式:其定义对象间一种一对多的依赖关系,当一个 对象的状态发生改变时,所有依赖它的对象都将得到通知...原创 2021-11-18 20:10:06 · 86 阅读 · 0 评论 -
Mvvm 与 mvc 的区别
Mvvm 与 mvc 的区别MVVMMVC两者在思想上的区别MVVMMVVM 分为三部分:分别是 M(Model,模型层),V(View,视图层),V(ViewModel,V 与 M 连接的桥梁,也可以看作为控制器MVC 的 C 层)1、M:模型层,主要负责业务数据相关2、V:视图层,负责视图相关,细分下来就是 html+css 层3、VM:V 与 M 沟通的桥梁,负责监听 M 或者 V 的修改,是实现MVVM 双向绑定的要点;因此开发者只需关注业务逻辑,不需要手动操作 DOM,不需要关注数据状态原创 2021-11-18 20:09:14 · 6025 阅读 · 0 评论 -
Vue 如何定义一个过滤器
Vue 如何定义一个过滤器全局过滤器局部过滤器过滤器的调用方法全局过滤器位置:创建实例之前语法如下Vue.filter('过滤器名称',function(val){//val 表示需要处理的值return val + 4; //返回处理后的数据})局部过滤器只能在当前 vue 注册内容中使用位置:在 vue 实例中与 el 属性 data 属性同级定义语法如下filters:{ "过滤器名字":function(val){return 输出内容}}过滤器的调用方法{原创 2021-11-18 20:05:43 · 383 阅读 · 0 评论 -
Vue-cli 中如何自定义指令
Vue-cli 中如何自定义指令自定义指令的钩子函数o bind:绑定指令到元素上,只执行一次o inserted:绑定了指令的元素插入到页面中展示时调用,基本上都是操作这个钩子函数o update:所有组件节点更新时调用o componentUpdated:指令所在组件的节点及其子节点全部更新完成后调用o unbind:解除指令和元素的绑定,只执行一次directives:{自定义指令的名字:{自定义指令钩子函数(el){操作逻辑}}}<template><原创 2021-11-18 20:03:03 · 519 阅读 · 0 评论 -
Vue 的路由钩子函数/路由守卫有哪些
Vue 的路由钩子函数/路由守卫有哪些全局前置守卫全局后置钩子路由独享的守卫组件内的守卫(只对当前组件生效)全局前置守卫o 当一个导航触发时,全局前置守卫(在进入组件之前)按照创建顺序调用。o vue-router 提供的 router.beforeEach((to,from,next)=>{})可以方便地实现全局前置导航守卫to:即将要进入的目标路由对象from:当前导航正要离开的路由next:下一步执行router.beforeEach((to,from,next)=>{/原创 2021-11-17 20:57:32 · 377 阅读 · 0 评论 -
Vue 注册一个全局组件(一定要看哈)
• 全局组件作用域:全局范围内均可使用建议:组件名(字母全小写且必须包含一个连字符)语法Vue.component('name',{template:'<div></div>'})位置:创建实例前定义全局组件template 的设置template:'html 代码'template:'#template1' 引用 template 内容数据的定义:data:function(){return {a:1,b:2}}函数的定义:methods:{函原创 2021-11-17 20:55:09 · 75 阅读 · 0 评论 -
Vue 数据绑定的几种方式
• 普通文本绑定:双大括号法/插值表达式 {{}}或者使用 v-text 指令绑定,以文本的形式输出• 解释 HTML 标签的绑定:使用 v-html 绑定• 将数据绑定到标签的属性上:使用 v-bind :属性名=“变量”来绑定...原创 2021-11-17 20:54:02 · 224 阅读 · 0 评论 -
Vuex 是什么?怎么使用?在那种场景下使用
VuexVuex的概念Vuex的使用Vuex的概念Vuex 是一个专为 Vue.js 应用程序开发中管理的一个模式。通过创建一个集中 的数据存储,方便程序中的所有组件进行访问。Vuex的使用使用:在 store 下的 index.js 中 Vue.use(Vuex)创建 store 实例javascriptexport default new Vuex.Store({state: {},//存放数据54mutations: {},//修改数据的值actions: {},//执行异原创 2021-11-17 20:53:18 · 296 阅读 · 0 评论 -
计算属性是什么,它与Watch的区别?
计算属性是什么,它与Watch的区别?计算属性的概念与watch的区别计算属性的概念首先它是一种属性,其次它有“计算”这个特殊性质。每次取得它的值的时候,它不像普通属性那样直接返回结果,而是经过一系列的计算之后再返回结果。同时只要在它的当中引用了 data 中的某个属性,当这个属性发生变化时,计算属性会自动重新执行与watch的区别当 watch 监听的值发生改变就会被调用,watch 可以在数据变化时做一些异步处理或者开销大的操作;计算属性是计算依赖的值,当依赖的值发生改变才会触发..原创 2021-11-17 20:51:17 · 387 阅读 · 0 评论 -
Vue 循环的 key 作用
vue 中循环需加 :key=“唯一标识” ,唯一标识可以指 item 里面 id、 index 等,因为 vue 组件高度复用增加key 可以标识组件的唯一性,为了更好地区别 各个组件,key 的作用主要是为了高效的更新虚拟 DOM为遍历数组或元素中的唯一标识,增加或删减元素时,通过这个唯一标识 key 判断是否是之前的元素,vue会直接对已有的标签进行复用,不会整个的将所有 的标签全部重新删除和创建,只会重新渲染数据,然后再创建新的元素直到数据 渲染完为止...原创 2021-11-17 20:48:24 · 252 阅读 · 0 评论 -
v-text 与{{}}区别
v-text 与{{}}区别• v-text 是操作网页元素中的纯文本内容,{{}}是它的另外一种写法, v-text 与{{}}等价,{{}}叫模板插值,v-text 叫指令,有一点区别就是,在渲染的数据比较多的时候,可能会把大括号显示出来,俗称屏幕闪动。• 解决屏幕闪动的方法:o 使用 v-text 渲染数据;o 使用{{}}语法渲染数据,但是同时使用 v-cloak 指令(用来保持在元素上直到关联实例结束时候进行编译),v-cloak 并不需要添加到每个标签,只要在 el 挂载的标签上添加原创 2021-11-17 20:46:48 · 382 阅读 · 0 评论 -
Vue 常用的修饰符有哪些
Vue 常用的修饰符按键修饰符事件修饰符按键修饰符按键修饰符 .up,.down,.ctrl,.enter,.space 等等语法:@click.修饰符='fn()'事件修饰符prevent 修饰符:阻止事件的默认行为(submit 提交表单)stop 修饰符:阻止事件冒泡capture 修饰符:与事件冒泡的方向相反,事件捕获由外到内self:只会触发自己范围内的事件,不包含子元素once:只会触发一次注意:修饰符可以串联使用...原创 2021-11-17 20:40:04 · 304 阅读 · 0 评论 -
Vue的单向数据流
Vue的单向数据流数据从父级组件传递给子组件,只能单向绑定。子组件内部不能直接修改从父级传递过来的数据。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop...原创 2021-11-13 15:10:27 · 377 阅读 · 0 评论 -
v-show 和 v-if 的区别
v-show 和 v-if 的区别• 相同点:v-show 和 v-if 都能控制元素的显示和隐藏• 不同点:1、实现本质方法不同v-show 本质就是通过设置 css 中的 display 设置为 none,控制隐藏v-if 是动态的向 DOM 树内添加或者删除 DOM 元素2、性能v-if 有更高的切换消耗(安全性高)v-show 有更高的初始化的渲染消耗(对安全性无要求选择)• 总结:如果要频繁切换某节点时,使用 v-show(无论 true 或者 false 初始都会进行原创 2021-11-13 15:07:53 · 310 阅读 · 0 评论 -
Vue 项目如何性能优化
Vue 组件中的 data 为什么是函数组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果。...原创 2021-11-13 14:58:04 · 213 阅读 · 0 评论 -
Vue.nextTick以及使用场景
Vue.nextTick以及使用场景什么是`Vue.nextTick`什么是Vue.nextTick1、为了在数据变化之后等待 Vue 完成更新 DOM 可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。在下次 DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM2、使用场景:在 Vue 生命周期的 created()钩子函数进行 DOM 操作一定要放到 Vue.nextTick()的回调函原创 2021-11-12 20:09:54 · 417 阅读 · 0 评论 -
Vue中的keep-alive
1.对keep-alive的理解:在写项目的时候,会不停的切换两个标签页的内容,就会发现选择好的内容,在切换路由之后会恢复初始化,也就是说之前的状态丢失。原因就是每次切换路由的时候,Vue都创建了一个新的组件实例。解决这个问题就可以用keep-alive元素将其路由出口包裹起来。在切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间以及消耗性能,提高用户体验性2.keep-alive 属性include(包含的组件缓存)<keep-alive include="Democ">&原创 2021-11-10 11:54:51 · 289 阅读 · 0 评论 -
Vue路由传参的两种方式,params和query方式的区别
1、用法上的区别:query可以用name也可以用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$router.query.name和this.$router.params.name2、url展示上:params类似于post,query更加类似于我们ajax中学的get传参,说得简单一点,用params传参在浏览器地址栏中不显示参数,用query传参的话浏览器地址栏中会显示参数,所以用params传值相对安全...原创 2021-11-10 11:43:40 · 1056 阅读 · 0 评论 -
Vue单页面的优缺点
Vue单页面的优缺点优点缺点优点1.用户体验好,内容的改变不需要重新加载整个页面,对服务器压力较小。2.前后端分离,比如联合项目3.完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整缺点1.不支持低版本浏览器2.首次加载页面的时候需要加载大量的静态资源,这个加载时间相对较长。3.不利于SEO(搜索引擎)优化,单页页面,数据在前端渲染,就意味着没有SEO4.页面导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用原创 2021-11-06 15:13:27 · 613 阅读 · 0 评论 -
Vue常用指令
Vue常用指令1.v-model 主要用于表单上数据的双向绑定2.v-show 控制切换一个元素的隐藏与显示3.v-on HTML元素绑定事件监听4.v-for 遍历data中的数据,并在页面进行数据展示5.v-bind 指令绑定HTML元素的属性6.v-if 指令判断是否加载固定的内容7.v-else 指令必须配合v-if使用否则无效,当v-if条件不成立的时候执行8.v-esle-if 指令当有一项指令成立时执行9.v-text 指令操作网页元素中的纯文本内容10.v-html 指令原创 2021-11-06 15:06:45 · 152 阅读 · 0 评论 -
Vue的路由模式
Vue的路由模式Vue路由的实现Vue路由模式中hash和history的概念Vue路由模式中hash和history的区别Vue路由的实现hash模式和history模式Vue路由模式中hash和history的概念1.hash模式:hash模式url里面永远带着#号,在开发当中默认使用这个模式2.history模式:history模式没有#号Vue路由模式中hash和history的区别1.Url显示层面:hash:有#history:无#,美观2.回车刷新hash:可以加载到ha原创 2021-11-06 15:00:53 · 89 阅读 · 0 评论 -
Vue的生命周期
Vue的生命周期1.生命周期2.生命周期过程四个阶段,八个钩子函数3.生命周期的作用4.DOM 渲染在哪个生命周期阶段内完成5.生命周期图片过程图片![此为生命周期图片](https://img-blog.csdnimg.cn/79ad53a45aae42fba8f25f9d6623937e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAeXprZGNzZG4=,size_20,co原创 2021-11-02 16:33:52 · 107 阅读 · 0 评论