vue
古木2019
这个作者很懒,什么都没留下…
展开
-
uniapp vue项目把图片路径从data数据传到css(uniapp css变量)
【代码】uniapp vue项目把图片路径从data数据传到css。原创 2023-09-23 17:14:13 · 365 阅读 · 0 评论 -
Vue+Element+computed 实现购物车
<template> <div class="cart"> <div class="group_btn"> <el-button type="success" @click="addDialog">添加</el-button> </div> <el-table ...原创 2020-03-30 22:27:27 · 632 阅读 · 0 评论 -
浅谈 Computed和Watch的区别
computed计算属性类似于过滤器,对绑定到试图的数据进行处理,并监听变化进而执行对应的代码基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用methods时,在重新渲染的时候,函数总会重新调用执行computed属性默认的只有getterwatch监听属性通过watch来响应数据的变化watch 选项允许我们执行异步操作 (访问一个 ...原创 2020-03-30 18:42:29 · 1760 阅读 · 0 评论 -
浅谈 vue路由跳转的四种方式
ps : 区别this.$router.push跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面this.$router.replace跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)this.$router.go(n)向前或者向后跳转n个页面,n可为正整数或负整数1....原创 2020-03-30 18:02:25 · 1848 阅读 · 1 评论 -
SPA及其优缺点
SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。Vue就是SPA应用的典型代表,特别是配合webpack等前端构建工具,加载页面的时候将JavaScript、CSS统一加载,然后通过监听url的hash实现内容切换。优点:无刷新切换内容,提高用户体验。 符合前后端分离的开发思想,通过ajax异步请求数据接口获取数据,后台只需要负责数据,不用考虑渲...原创 2020-03-29 11:27:22 · 980 阅读 · 0 评论 -
vue router的钩子函数
1、全局的钩子beforeEach(to,from,next)页面加载之前 页面跳转之前权限认证,访问拦截afterEach(to,from,next)页面加载之后2、组建内的导航钩子beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave,直接在路由组件内部进行定义的beforeRouteEnter(to, from, ne...原创 2020-03-28 21:04:53 · 192 阅读 · 0 评论 -
浅谈 vue路由守卫
完整的导航解析流程导航被触发。 在失活的组件里调用离开守卫。 调用全局的 beforeEach 守卫。 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 在路由配置里调用 beforeEnter。 解析异步路由组件。 在被激活的组件里调用 beforeRouteEnter。 调用全局的 beforeResolve 守卫 (2.5+)。 导航被确认。...原创 2020-03-28 21:01:06 · 451 阅读 · 0 评论 -
浅谈 axios ajax fetch
原生ajax //创建异步对象 var xhr = new XMLHttpRequest(); //设置请求基本信息,并加上请求头 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open('post', 'test.php' ); /...原创 2020-03-26 18:57:24 · 128 阅读 · 0 评论 -
浅谈 vue数据双向绑定原理
原理vue.js 是采用数据劫持结合发布者-订阅者的模式的方法,通过Object.defineProperty()来劫持各个属性的Getter、setter,在数据变动时发送消息给订阅者。总结实现的整个流程首先我们为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订...原创 2020-03-26 14:30:08 · 182 阅读 · 0 评论 -
浅谈 vue组件传值
一般有三种传值方式:1.父传子、2.子传父、3.兄弟组件之间通信1.父组件向子组件传值一般会在子组件里面定义props来做接收,这是比较常见的情况这是父组件<template> <div> <div>我是父组件</div> <div>我发送给第一个组件的信息是:{{msg}}</div...原创 2020-03-26 12:15:42 · 112 阅读 · 0 评论 -
vue中使用WebSocket(ui用的ant design)
那些原理,和什么情况下时候适合用WebSocket我这就不多说,直接上代码(哈哈...拷贝即用):<template> <div class="box"> <a-input-search placeholder="请输入你要发送的消息" @search="websockets...原创 2020-01-07 12:10:19 · 2082 阅读 · 0 评论 -
Vuex有那几种状态和属性?
vuex的流程页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。最后通过getter把对应值跑出去,在页面的计算属性中,通过mapGetter来动态获取state中的值vuex有哪几种状态和属性有五种,分别是State , Getter , Mutation , A...原创 2019-12-16 19:11:22 · 1644 阅读 · 0 评论 -
vue.js 点击操作DOM($event事件)
vue中有两种方法获取到当前元素var el = event.target; //当前元素,可修改(能够用此方法获取到他的子元素,不能获取他本身的内容)var el = event.currentTarget;//当前元素,不可修改(能够用此方法获取到他的子元素及能获取他本身的内容)点击当前元素删除父级元素呢!先看一下代码: <draggable class="...原创 2019-11-27 09:47:45 · 3678 阅读 · 0 评论 -
vue 异步组件实现按需加载
当build打包后,app.js过大的时候,可以考虑用异步组件的方式。import HomeHeader from "./components/Header";import HomeSwiper from "./components/Swiper";import HomeIcons from "./components/Icons";import HomeRecommend from...原创 2019-06-13 14:57:17 · 161 阅读 · 0 评论