vue
bhots
不会写代码
展开
-
vue 简繁切换
有时候公司业务需要在香港等地区上线,为了适配很多时候我们都需要对其进行简繁切换。目前最好的方法有两种。1.language-hk-loader地址https://www.npmjs.com/package/language-hk-loader这个东西真的很不错,简单npm下载后引入即可在 build 文件夹下找到 webpack.base.conf.js 这个文件,在 module 的 rules 下面添加代码ok🆗了。2.用js进行处理有时候我们没办法用language-hk-loader进行.原创 2022-06-18 16:49:16 · 911 阅读 · 0 评论 -
vue 响应式布局
对于初学者而言,如何对页面进行自适应变成了一个老大的难题。若是按照UI设计稿1920px的宽度进行设计,那对于那些宽度比例比较小的屏幕来说,就只能显示一半,有些朋友为了自适应,往往是对其中的样式定百分比来显示,这样对于不同的电脑而言都能适配,可是这样子各种组件很容易大小比例发生变化,这样的变化并不能满足测试和UI的需求。下面我说一下我的设计思路,希望能够帮助到各位。我们可以在代码中进行判断,若是屏幕尺寸大于某个值的,就将页面大小宽度设定为1920px的固定值,若是小于这个值的,我们就可以设置页面内容宽度原创 2022-06-18 15:53:10 · 8536 阅读 · 2 评论 -
关于如何在vue中使用axios时候通过formData发送数据
参考https://www.jianshu.com/p/b10454ed38ba之前写axios请求的时候,发现后端只能通过URL后面绑定参数的形式传值,无法无法识别到前端穿过来的对象值,但是我传值都很标准,不可能出现问题然后我通过postman测试,发现后端需要用formData才能看到后端传过来的对象值然后现在问题发现了,原来是因为axios传到后台的不是formdata数据,现在解决的方法也很简单,加上如上的内容就可以了,具体什么原因以后再细细研究。这一段加在main.js上,然后修改原创 2022-02-21 01:15:25 · 2421 阅读 · 0 评论 -
关于在vue中axios跨域问题没反应的问题
之前按照网上的教程走了一遍发现没有实现,于是在经历了一天的闷棍后,终于找到了实现方法。果然解决方法比较懵逼。以后还需努力学习。现在发一遍网络上同用的教程。1.首先引入包npm install axios -s2.在主文件夹下创建vue.config.js文件,输入以下代码module.exports={ //打开vue官网 vue cli查看vue.config.js配置。 //vue脚手架全部打包好了,你想要啥东西都可以在这里配置,不能直接里面配置 lintOnSave原创 2022-02-20 12:14:09 · 3512 阅读 · 9 评论 -
如何在vue用scss
1.安装sass 依赖包 ,在cmd界面输入: npm install sass-loader --save-devnpm install node-sass --sava-dev2.在build文件夹下的webpack.base.conf.js的rules里面添加配置{test: / \.scss$ / ,loaders: [ 'style' , 'css' , 'sass' ]}3.scss使用测试:如下测试修改字体颜色< style lang = "scss" >原创 2022-02-18 23:11:49 · 6898 阅读 · 0 评论 -
js监听滑动&element轮播图添加手指滑动
实习的时候遇到了大问题,项目要求我做左右滑动,然后切换年月份,结果不行,细细整理,发现了两个滑动函数的不同之处。第一个实现方案,左右滑动切换,顶部的年月切换,监听的是滚动距离首先是数据DevelopList遍历<div class="HomeDevelScoll" v-on:scroll="onHomeDevelScrollX"> <div v-for="item in DevelopList" :key="item.id" class="HomeDevelScollIte原创 2021-11-17 19:08:28 · 770 阅读 · 2 评论 -
关于vue不用脚手架 为啥引入element不行的问题
关于vue不用脚手架 为啥引入element不行的问题很简单,你要在引入vuejs后再引入element,一个小问题,之前一直没有留意原创 2021-11-10 09:59:24 · 1017 阅读 · 0 评论 -
vue中的路由3-----路由组件的两个新生命周期与路由守卫
首先我们认识一下vue路由的生命情况1.两个新生命周期对于vue来讲,每一次加载进的页面都是进入到一个栈里面,加入一个新的页面就往栈里添加一条数据,点击返回就退到上一条数据,上一个vue页面就是被销毁了。现在有一个需求,就是a页面填写完数据,切到b页面,然后返回来a页面的时候数据还在,应该怎么实现呢由于当你跳到下一个页面的时候,上一个页面就会被销毁了,所以我们需要一个代码保持组件的生存我们引入一个全新的vue标签 <keep-alive>,意思是保持你的组件代码切换的时候不被销毁。&原创 2021-09-19 12:42:05 · 1545 阅读 · 0 评论 -
vue中的路由2-----嵌套路由跳转,传参和路径记录问题
vue路由如何传参的问题这篇文章分为两个部分,第一个是怎么传过去第二个是怎么接收信息在学习之前我们要了解一下路由跳转的规则(1)路由跳转相当于一个栈,你每跳一次就往栈添加一条数据,所以你可以按返回按钮返回到上一个页面,你也可以通过添加replace的方法,这个相当于跳转的时候,将路径记录的栈的第一条换掉成最新的一条,当你点击返回上一个页面按钮的时候就不能跳转到刚刚那个页面了(2)跳转路由有两种不同的传参方法,一种将数据放在query上,一种放在params上,但无论哪一种,这些方法都是属于t原创 2021-09-12 19:17:10 · 629 阅读 · 0 评论 -
vue中的路由1,从0初始化一个路由
在vue建立以后初始化一个路由的常规写法1.npm下载路由npm i vue-router2.在目录下创建一个router文件夹专门用来放router配置文件,新建index.js3.首先你新建两个vue组件About,Home 作为路由的两个跳转对象<template> <div class="hello"> 这个是About组件 </div></template><script>export defa原创 2021-09-12 16:44:08 · 561 阅读 · 0 评论 -
vue中vuex的使用(4)---模块化
由于之前的时候写vuex都是整合在index.js里面,代码不分家,这样子就会有极大的混乱,于是在这里写一下vuex模块化的使用1.创建文件我们假设有两个vuex的模块,一个是count,专门存储有关计算的内容,一个是person,专门存储有关个人的内容,于是我们可以新建两个js文件,分别存储和两个相关的vuex文件。创建相应的接口并将这个js暴露注意,添加命名空间可以使得下一步的外部空间识别这个js//人员有关的部分const PersonOptions={ namespaced:t原创 2021-09-11 23:46:40 · 178 阅读 · 0 评论 -
vue中vuex的使用(3)----读数据和改数据如何简写以及组件间通信
通过之前博文中的内容可以看出,每次写代码都要写一大堆相同的方法像这种increment(){ console.log(this.$store) this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) },这种类型明明就是简单的引入数据到vue里面,代码也几乎一样,我们可以调用vuex的几个简单的引用简写方法两种简写,一种简写数据,一种简写方法原创 2021-09-11 21:00:56 · 490 阅读 · 0 评论 -
vue中vuex的使用(2)----getters使用方法
有时候我们在vuex里面放置的数据,需要经过一系列的转换才拿出来,比如说*10后拿出来,这时候需要用到getters,这个方法可以将共享数据经过特定处理后再给外界取出使用主要步骤如下1.设立getters对数据加工打开vuex的配置文件,加入//getters---用于将states里面的数据进行加工const getters = { bigSum(state){ // console.log(state) return state.sum*10 }原创 2021-09-11 20:12:55 · 977 阅读 · 0 评论 -
vue中vuex的使用(1)---引入和简单模板 vue插件的查看
vuex是啥vuex是做数据交互的,将数据保存在特定的地方,然后各个组件都可以访问这个数据,共同修改和读取数据,以此达到数据共享的效果结构图如下类似于mvc文件,actions是对组件vue components传过来的数据进行处理的,处理完毕后交给mutations,mutations是将actions传过来的数据存储进state里actions存储着所有的共享数据1.如何引入?一.引入vuex到库npm i vuex二.引入到vue当中在src目录下创建一个store的文件夹,原创 2021-09-11 19:20:59 · 839 阅读 · 0 评论 -
vue插槽用法
插槽就是父组件像子组件插入dom结构的一种方法简单来说一共有三种1.默认插槽子组件<div class="hello"> <!-- 这就是插槽 --> <div>{{title}}</div> <slot>没有的话就在这里显示这句话</slot> </div>父组件<Category1 :title=" title "> <!--原创 2021-09-11 11:09:46 · 410 阅读 · 0 评论 -
vue axios解决跨域问题
什么是跨域问题?简单的说就是浏览器(前端人员)跟服务器不同端,浏览器为了安全不允许再不同网络下的数据通信,不能传输数据的问题怎么解决跨域问题呢,就是设立一个代理服务器8080,跟浏览器8080同一个域,然后将服务器5000发过来的数据先发送给代理服务器8080,由于代理服务器跟浏览器同一个域,就可以方便的将代理服务器8080的数据给浏览器8080。代理服务器转发的数据浏览器就可以接收到了。不难理解首先第一步当然是引入axios包终端输入npm i axios引入axios包目前有两种方法进行原创 2021-09-11 08:55:12 · 647 阅读 · 0 评论 -
Vue全局事件总线详解
什么是事件总线我们之前的时候经常性是需要两个隔着老远的组件之间的通信,这个要是一层层的传递下去通信那真的是太麻烦了,所以才有了这个东西原理如下:在vue加载的时候设立一个公共的实例类型,我们的组件可以在这个全局的实例对象的原型上添加一个函数,等其他组件调用的时候再回调回来用这种方法进行通信。这个公共的实例对象必须是vue或者vc类型,不然没办法用到上面的用法1.给vue添加一个公共的实例类型打开main.js,添加方法1.若是vc类型的时候(演示而已,这个平时不会这样子写)const Demo原创 2021-09-07 16:04:53 · 2257 阅读 · 0 评论 -
js本地存储与vue的写法
什么是本地存储?简单来说就是本地信息存储-关闭浏览器后还可以看到简单的在写一下let p={name:'aa',age:18};//保存到本地 function saveData(){ localStorage.setItem('msg','hello!!!') localStorage.setItem('msg',666) localStorage.setItem('person',JSON.stringify(p))//对象改字符串 }//读取 fu原创 2021-09-07 10:53:06 · 251 阅读 · 0 评论 -
vue 自己制造一个简单的插件模板
我们在vue的开发过程中时刻都引进了许多的插件,那他到底是怎么来的呢我们简单演示一下首先我们新建一个插件js暴露接口//这个是插件的jsexport default{ install(Vue){ //插件的所有内容写在这里 console.log("aaaaa") console.log(Vue) //在这里可以用传进来的vue做各种配置 Vue.filter('mySlice',function(valu原创 2021-09-07 10:38:52 · 160 阅读 · 0 评论 -
vue与混合样式mixins
有时候我们需要写一点代码,但是这种代码重复性很高,是否有一种方法可以直接写在一起,然后各个组件需要的时候引用就可以呢当然有,混合样式mixins,将一个js分别引入到vue的方法。我们介绍这个东西怎么用首先我们可以在这里新建一个文件,里面包含vue的一些方法,比如说method,props这些,注意写成对象形式export const mt={//分别暴露 methods:{ showName(){ console.log(this.name)原创 2021-09-07 10:33:33 · 522 阅读 · 0 评论 -
vue的组件子组件父组件传值简单实例和详解 pros $emit和$refs,解绑事件
一个很简单的pros实例,用来演示父组件子组件传值1.父组件怎么向子组件传值首先我们假设我们有一个组件叫HelloWorld ,在父组件上这么写,直接name=""这样子传过去<HelloWorld ref="hello" name="阿虎" :age="18" :num="16"></HelloWorld>在子组件用props接收传过来的参数。接收一般有三种方式,但是为了简单,我们一般用第一种方式就可以了,一般接收完后就可以在代码方面直接调用了 //这个常用,一般写这个原创 2021-09-07 10:24:02 · 619 阅读 · 0 评论 -
vue里面的ref详解
在以前的js中我们都是通过设置id,然后通过document.getelementbyid(hello) 来获取dom树进行操作,方便快捷。但是在vue框架里面,我们都是通过ref设置来获取参数的,这个东西有一个 好处,对于普通的元素比如button而言,他就是一个跟js一样的dom树获取,但是对于组件而言,就可以获取整个组件对象(VC),我们可以通过这种方式获取组件里面的内容进行操作我们用代码演示设立了两个ref获取的元素,一个是原生的button一个是组件<button @click="原创 2021-09-07 09:19:08 · 4298 阅读 · 0 评论 -
vue的数组 模糊查询与排序内容
首先我们回忆一下数组的遍历<ul> <li v-for="(item,index) in personList" :key="item.id"> <!-- key是不存在的,就是用来给dom树遍历的 --> idnex:{{ index }},id:{{ item.id }},名字:{{ item.name }} 年龄{{item.age}} </li> </ul> 遍历对象 <ul>原创 2021-08-18 12:37:51 · 894 阅读 · 0 评论 -
vue的计算属性computed与监听属性watch
计算属性是vue里面一个很常见的属性,相当于data里面有一个特殊的变量,这个变量绑定一个其他值,当其他值变化的时候他会执行一个函数,然后将这个变量的值等同于这个函数的返回值,这些函数都写在计算属性computed里面监听属性是用来监听数据的变化的,当他监听的数据发生变化的时候执行一个函数,这些函数都放到watch里面const vm =new Vue({ el:"#root", data:{ }, computed:{//计算属性原创 2021-08-18 12:19:42 · 381 阅读 · 0 评论 -
vue js绑定样式修改
我们假设有这样子几个样式.basic{}.one{ border-style:solid; border-width:5px; border-color:red;}.two{ border-style:solid; border-width:medium; border-color:blue;}.three{ border-style:solid; border-width:1px; border-color:green原创 2021-08-18 11:56:00 · 271 阅读 · 0 评论 -
js this指向问题详解
以函数形式调用时,this 永远都是 windowfunction aa(){ console.log(this)}aa();// 指向全局对象window以方法的形式调用时,如person.getname,this 是调用方法的对象,即对象本身对于vue,里面的this默认指向vue的实例const vm =new Vue({ el:"#root", data:{}, methods:{ showInfo(event){原创 2021-08-18 11:20:09 · 140 阅读 · 0 评论 -
vue事件修饰符
添加方法<a href="http://www.baidu.com" @click.prevent="showInfo2">事件修饰符按钮</a>常用修饰符的意思prevent:就是修饰符,阻止跳转stop:阻止事件冒泡,比如假设外面一层div还有一个click,就可以不用1后不会触发外面那个点击事件capture,跟上面的差不多once:只有第一次点击才会触发,点击玩后就不触发了...原创 2021-08-18 11:03:09 · 67 阅读 · 0 评论 -
vue与数据代理
数据代理就是通过一个对象代理对另外一个对象中属性的操作意思就是在另外一个对象里通过代理的方式来操作另外一个对象的值如图在obj2里面添加了队obj的x的读写方法 let obj={x:100} let obj2={y:100} Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x=原创 2021-08-18 10:58:29 · 77 阅读 · 0 评论 -
Object.defineproperty方法与用处
给输入的内容进行修改对于对象而言,若是想插入一个值a,当值a改变的时候,对象里面的值a也改变,那必须要用到这个方法如下所示,插入到person后,急事修改number的值,调用person里面的age也不会改变let nunber=18; let person={ name:'这是', sex:'男', // age:Number }我们通过这个方法将num插入到person里面增添的不是num,而是对于外部num的读写方法get原创 2021-08-18 10:52:06 · 207 阅读 · 0 评论