Vue基础部分
文章平均质量分 52
Vue基础部分
Python User
这个作者很懒,什么都没留下…
展开
-
Vue之 $set的使用
1,什么时候使用$setset为解决双向绑定失效而生,只需要关注什么时候双向绑定失效就可以了。2,Vue.set 和 this.$set this.$set 实例方法,该方法是全局方法 Vue.set 的一个别名3,$set 用法数组:this.$set(Array, index, newValue)对象:this.$set(Object, key, value)4,实例data中未定义,手动给form添加age属性,并且点击按钮进行自增。如果使用 this.form.age原创 2022-04-21 20:24:38 · 18365 阅读 · 2 评论 -
watch 深度监听模式
watch 的深度监听—监听更深层的一些数据。如果是一个对象,则需要进行深度监控,才能监控到对象中属性的变化:data(){ return{ form :{ name:'xxx', age:12 } }}watch:{ // 只监听一个对象 form(){ deep:true, // 开启深度监听 console.log(v.namge,v.age) immediate:true }, // 监听一个对象的某一个属性: 'form.a': {原创 2022-04-21 19:43:16 · 749 阅读 · 0 评论 -
使用Vue获取 操作dom
vue一般是通过操作数据来实现界面的更新,通常不会去操作DOM,但实际开发场景总是千奇百怪,会有场景需要获取DOM通过 ref 来获取dom元素建议:vue中尽量不去操作 dom 元素,选用 ref 操作属性获取<button ref="btn">按钮</button><div ref="box"> <h1> ref</h1> <p> 测试</p></div><hr><div原创 2022-04-21 19:10:36 · 10804 阅读 · 0 评论 -
v-if 和 v-for 为什么不能连用
v-if 和 v-for 不能连用,否则会造成一个性能浪费!原因: 在 Vue2中 v-for的优先级高于 v-if,如果v-if的值为false时,v-for仍然会根据优先级进行渲染,这样就造成了一个资源浪费,如下所示:<template> <div> <!--不能同时使用,会造成资源浪费--> <div v-for = "(it, i) in getData" v-key="i" v-if="flag"> </div><原创 2022-04-19 19:42:18 · 1064 阅读 · 1 评论 -
Vue中$nextTick的使用
Vue渲染是一个异步的渲染,在做添加的时候,Vue不会马上去做渲染,而是在下一个tick的时候做渲染,这个时候要是尝试获取一些dom元素属性的时候,还是获取的数据改变之前的数值,这样子就会出现慢一拍的情况。为了能准确获取到数据改变之后的情况,这时就可以使用Vue中提供的一个api----$nextTick。主要思路就是采用微任务优先的方式调用nextTick包装的方法。this.$nextTick中的箭头函数(回调函数),他会在dom异步渲染完毕的时候执行这个箭头函数,如果将之后的操作放在这个箭头函数中原创 2022-04-18 13:43:35 · 1415 阅读 · 0 评论 -
vue中插槽slot的使用
1,插槽的使用场景2,插槽的使用通过作用域插槽v-slot:default 将子组件的数据传递到父组件中去,一般在插件里用~经常看到有form表单里看到有scope.row,用来获取这一行的数据,这个也是作用域插槽父组件 Father.vue<template> <div> <son> <template v-slot:default="isData"> <!--通过v-slot:default来绑定一个变量(任意取名),来原创 2022-04-17 15:33:50 · 670 阅读 · 0 评论 -
数据总线bus实现兄弟组件之间的通信
定义一个数据总线bus.js,Abro组件给Bbro组件传值bus.jsimport Vue from 'vue'const busData = new Vue();export default busDataAbro.vueimport busData from './bus'export default { data(){return { title:'this is title!' } } methods:{ onClick(){ // 定义一个点击事件进行传值 //原创 2022-04-15 23:01:25 · 432 阅读 · 0 评论 -
vue keep-alive组件
假设,两个同级组件在进行切换的时候,两个组件一直在做创建和销毁的过程,为了保持组件的状态不被来回创建和销毁,就需要用到keep-alive使用组件将切换的地方包裹起来就可以实现保存组件状态了!<keep-alive> <router-view></router-view></keep-alive>保存组件状态的原理就是给dom进行了缓存。使用keep-alive对三个组件进行切换,点击一个渲染一个组件,一次渲染只渲染一个组件,并且点击下一个组件时原创 2022-04-15 15:07:55 · 531 阅读 · 0 评论 -
Vue 路由懒加载和动态加载
什么是路由懒加载?不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间;路由 懒加载 具体的实现:var router = new VueRouter ({ routes:[ { path: '/public', name: 'public', component: () = > { // 使用import 引入 import('./components/t原创 2020-12-27 23:26:58 · 1459 阅读 · 0 评论 -
Vue 路由的两种模式 history 和 hash,以及命名路由
对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义。前端路由的核心,就在于——改变试图的同时不会向后端发出请求。hash模式: 有 /#/ 号的URL 为hash模式,hash符号之前的内容会被包含在请求中,hash之后的并不会包含于请求中,例如 www.baidu.com/#/name 请求的时候只会请求www.baidu.com;hash模式的工作原理是hashchange事件,可以在window监听hash的变化。我们在u原创 2020-12-27 22:56:49 · 1006 阅读 · 0 评论 -
Vue-axios 请求超时,请求拦截器
请求超时:1,可以在全局设置请求超时:axios.defaults.timeout = 30 * 1000; // 30s2,在某一个请求里面设置超时:axios.post(url, params, {timeout: 1000}) .then(res => { console.log(res); }) .catch(err=> { console.log(err); })})3,webpack的dev的proxyTable的超时时间设置 de原创 2020-12-27 21:23:32 · 1781 阅读 · 0 评论 -
Vue-router中几种通信的方式
https://blog.csdn.net/weixin_43026567/article/details/103474666原创 2020-12-27 20:31:13 · 309 阅读 · 0 评论 -
Vue实现数据双向绑定响应,未完待续。。。
简述: Vuejs 的响应式依赖于Object.defineProprtry,通过监听对象属性 的setter/getter 的变化,通过getter 进行依赖收集,而setter相当于观察者,数据产生变化的时候通知「订阅者」更新视图https://blog.csdn.net/kzj0916/article/details/108298865...原创 2020-12-21 20:48:01 · 146 阅读 · 0 评论 -
Vue 中 watch 和 computed 区别
computed与watch的差异1)computed 是计算一个新的属性,并将该属性挂载到 Vue 实例上,而 watch 是监听已经 存在且已挂载到 Vue 实例上的数据,所以用 watch 同样可以监听 computed 计算属性的变化。(2)computed 本质是一个惰性求值的观察者,具有缓存性,只有当依赖变化后,第一次访问 computed 属性,才会计算新的值。而 watch 则是当数据发生变化便会调用执行函数。(3)从使用场景上说,computed 适用一个数据被多个数据影响,而 wa原创 2020-12-21 20:22:52 · 185 阅读 · 0 评论 -
在Vue 中 v-for遍历的时候 为什么要用 :key
要了解为什么要使用 :key,就得先了解一下Vue的 虚拟dom技术和diff 算法;Vue 实现了一套虚拟dom,使得我们不用再直接操作dom,只用操作一下数据,便可以让他自动加载和渲染,其原理正是用了一个diff 算法来解决的;Vue的虚拟dom的diff算法,其核心是基于两个假设:1,两个相同的组件产生类似的dom结构,不同组件产生不同的dom结构;2,同一层级的一组dom节点,他们可以通过唯一的id进行区分;所以我们需要用key来给每个节点做一个唯一的标识,在正确的位置插入新的节点结论原创 2020-12-18 21:30:29 · 976 阅读 · 0 评论 -
vue-resource 和 axios 区别
在Vue项目中前后端交互时,早期的Vue版本使用Vue-resource插件从后台获取数据。从Vue2.0之后就不再对vue-resource进行更新,而是推荐使用axios.vue-resourceVue.js的插件提供了使用XMLHttpRequest 或 JSONP进行Web请求和处理响应的服务。vue-resource像jQuery的$,ajax,用来进行数据交互。主要用于发送ajax请求。特点:1.体积小,压缩后大约12kb2.支持主流浏览器,除了IE9以下3.支持Promiss AP原创 2020-12-17 22:09:05 · 377 阅读 · 0 评论 -
关于Vuex的理解和使用,全局共享数据
什么是Vuex?Vuex是一个全局共享数据的区域,相当于一个数据仓库;Vuex是为了保存 组件之间共享数据而诞生的,如果组件之间 有要共享的数据,可以直接挂载到Vuex上,而不必通过父子之间的传值;私密的数据不需要放在Vuex上,只有共享的数据才有必要放在Vuex上;标题安装Vue?cnpm i vuex -Simport Vuex from 'vuex'Vue.use(Vuex)new Vuex.store() // 创建一个实例,得到一个数据仓库对象,如下var store = new原创 2020-12-08 22:41:44 · 997 阅读 · 0 评论 -
Vue 多组件路由
原创 2020-11-14 22:09:35 · 96 阅读 · 0 评论 -
Vue 路由的嵌套
原创 2020-11-14 22:07:56 · 59 阅读 · 0 评论 -
Vue 路由的两种 传参方式
路由的第一种传参方式query 采用将参数写在路由的地址后面进行传参:?名字=value第一种传参方式 在 this.$route.query 中,如图所示:第一种传参的打印效果:第二种传参方式采用params 占位的方式,第二次的参数因为采用 :占位符的方式,所以参数在params中,如图:注意第二次的传参中URL地址里面没有显示? 和 id = 这样的形式:...原创 2020-11-14 15:33:02 · 179 阅读 · 0 评论 -
Vue钩子函数中created和mounted区别,各种钩子函数介绍
created:还没开始挂载,模板还没有被渲染成dom,也就是这时候通过id什么的去查找页面元素是找不到的,但是可以完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。mounted:挂载完成,模板已经渲染成dom后调用。Vue钩子函数的区别:1.每个钩子函数都在啥时间触发beforeCreate2.在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。created3.实例已经创原创 2020-11-09 16:11:27 · 594 阅读 · 0 评论 -
Vue组件基础
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no"> <!--设置屏幕宽度为设备宽度,禁止用户手动调整缩放--> <meta name="rem" content="max-width=480,design-width=750">原创 2020-07-16 09:05:33 · 127 阅读 · 0 评论 -
Vue生命周期 相关函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../js/vue-2.4.0 .js"></script> <title>生命周期<原创 2020-07-02 21:37:23 · 101 阅读 · 0 评论 -
Vue品牌案例,过滤器应用,bootstrap样式,自定义v-指令
技术点:1,各种车其实都是放在列表[]中,所以,添加也是调用add()函数利用v-model进行添加进列表,this.list.push()2,删除一个也是利用列表的功能,this.list.splice(index, 1)3,全文检索,写一个search(keywords)函数,在函数里面定义一个新的NewList的空列表,然后在写一个函数返回被搜寻的字段(有两种方法),将这个search返回后在 v-for里面进行遍历<!DOCTYPE html><html lang="en原创 2020-07-01 21:39:44 · 176 阅读 · 0 评论 -
Vue 过滤器案例(全局过滤器和局部过滤器)
过滤器 {{ msg | msgFormat('疯狂', '123') | test }} {{ msg | msgFormat('张三', '李四')}} <!-- 局部过滤器示例 --><div id="map2"> <h4>{{ dt | msgFormat }}</h4></div><scri...原创 2020-07-01 21:12:15 · 463 阅读 · 0 评论 -
Vue中v-if和v-show的特点
v-if和v-show都是控制元素的显示和隐藏但是他两有区别:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../js/vue-2.4.0 .js"></sc原创 2020-06-30 13:18:28 · 309 阅读 · 0 评论 -
Vue中v-for和v-model结合遍历数组,数组对象,对象,迭代数字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../js/vue-2.4.0 .js"></script> <title>Documen原创 2020-06-30 13:10:00 · 2922 阅读 · 0 评论 -
Vue通过属性绑定为元素绑定style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../js/vue-2.4.0 .js"></script> <title>Documen原创 2020-06-28 22:07:31 · 227 阅读 · 0 评论 -
Vue的v-model实现简单的计算器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- v原创 2020-06-28 22:04:29 · 519 阅读 · 0 评论 -
Vue中的 v-model 实现表单元素的数据双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- v-mod原创 2020-06-28 15:48:07 · 315 阅读 · 0 评论 -
Vue中 @click.stop/.self/.prevent 的绑定监听
@click.stop 阻止事件冒泡@click.self 阻止自己的冒泡行为,不能阻止人家的冒泡行为@click.prevent 阻止事件的默认行为<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2020-06-28 15:40:29 · 601 阅读 · 0 评论 -
Vue文字流动,涉及定时器字符串的截取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 跑马灯效果原创 2020-06-28 15:18:55 · 160 阅读 · 0 评论 -
Vue中v-text,v-html,v-bind,v-on:click/@click 事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue指令</title></head><body> <div id="app"原创 2020-06-28 15:12:04 · 518 阅读 · 0 评论