![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 57
'Han'Zi
这个作者很懒,什么都没留下…
展开
-
vue大坑:v-for的key以及props传参不当导致的闭包
* 为什么props传参在模版中使用没问题,在函数中使用不变化使用传参的方式,就是在调用函数的时候把参数传递进去,避免的闭包。当我们点击上方的月份时,会改变下方加载的卡片信息。* 重新规划v-for的key值。原创 2023-04-13 20:25:38 · 638 阅读 · 1 评论 -
路由跳转同一个界面,但是params不同。页面不刷新?(路由的key)
如果不设置路由的key值,默认情况下是根据路径判断的,就是不包括params值。Home组件内容(父),并且跳转路由到子组件。原创 2023-01-04 15:51:45 · 1269 阅读 · 0 评论 -
nextTick(),关于Echarts无法通过表格下拉展示出来的问题
文章目录this.$nextTick():将回调延迟到下次DOM更新循环之后执行理由!!解决方案:this.$nextTick():将回调延迟到下次DOM更新循环之后执行在我们使用Echarts的时候,首先要准备一个容器,有了容器我们才能将它渲染出来倘若我们要设计一个表格,然后有一个下拉框,点击下拉框的时候展示出我们的echarts【同理,不仅仅是下拉框,后面vue才添加的元素都算】这种效果如果直接在vue函数中实现的话,代码如下:html代码js代码然而这样会有一个错误,echar原创 2022-04-11 11:00:08 · 810 阅读 · 0 评论 -
深度选择器/deep/,关于elementui样式修改不了的问题完美解决
深度选择器/deep/在vue-elementui写项目时,时常elementui的效果不理想,但是又没办法直接修改elementui的样式因为我们无法通过普通的选择器获取到我们要更改的标签【elementui自己加了一层】,通常的解决办法是在全局css中,寻找到我们要更改标签的class【elementui自定义的class】,但是这样的话,会影响到所有对应的标签,例如:我更改了el-input__inner的字体颜色,那么所有使用到的el-input颜色都会对应改变,这显然是不合理的在此引出原创 2022-04-11 10:41:05 · 4872 阅读 · 1 评论 -
vue3-快速上手(对比vue2)
对比vue2,来快快速上手vue3原创 2022-04-08 12:49:44 · 729 阅读 · 0 评论 -
vue-项目完成的项目报告
文章目录项目优化1.生成打包报告2.通过vue.config.js修改webpack的默认配置项目优化1.生成打包报告第一种方法:命令行【不推荐】vue-cli-service bulid --report第二种方式:vue的可视化UI面板直接查看在ui面板中查看打包的项目,并且进行优化2.通过vue.config.js修改webpack的默认配置通过vue-cli 3.0工具生成的项目,默认是隐藏了webpack配置项的,目的是为了让工作中心放在业务逻辑上面然后配置webpa原创 2022-03-26 17:34:59 · 2947 阅读 · 0 评论 -
微信小程序-快速上手
文章目录一.开发小程序的文件结构二.页面文件结构结构三.数据一.开发小程序的文件结构这5个文件是必备的核心文件,对比Vue的项目结构.wxml对比就是.html.wxss对比就是.css.json文件是配置文件,其中主要有两个重要的配置,page:相当于路由window:更改小程序的外观细节 二.页面文件结构结构一般情况下,把我们所写好的页面存放到一个文件夹里面【page】每一个页面对比vue,就相当于是一个组件每一个页面,都包含4个基础文件(.js .wxss .w原创 2022-03-21 15:40:26 · 758 阅读 · 0 评论 -
vue组件-路由
文章目录零.什么是路由一.基本使用二.注意点多级路由三.路由命名:简化跳转四.query传递参数五.params传递参数六.缓存路由组件七.路由的声明周期钩子八.路由器工作模式【hash和history】九.打包项目npm run build零.什么是路由每一组key-value对应关系,就是一个路由route路由器router,用于管理多个路由用于实现单页面应用vue的一个插件库数据通过ajax请求获取一.基本使用1.安装:npm i vue-router2.使用插件:Vue.us原创 2021-11-05 17:00:40 · 491 阅读 · 0 评论 -
vue组件-Vuex
文章目录零.什么是Vuex一.如何使用Vuex1. 安装vuex:2. 引入Vuex3. 使用插件4. 创建store文件5.引入store配置6.基本使用二.mapState等4个map用法1.为什么要用map方法2.mapState:2.mapGetters:3.mapActions:4.mapMutations:零.什么是Vuex专门在 Vue中集中式状态(数据)管理Vue的插件多个组件可以共享并且操作Vuex里面的数据一.如何使用Vuex1. 安装vuex:npm i vuex原创 2021-11-05 16:37:00 · 248 阅读 · 1 评论 -
vue组件-插槽
文章目录什么是插槽默认插槽具名插槽作用域插槽:字组件可以向父组件传递数据什么是插槽在子组件的一对<slot>标签,存放父组件写入组件标签的东西当在组件标签里面写内容的时候,这些内容显示在组件的插槽处倘若写了<slot>插槽,但是没有放东西,就会显示插槽里面的内容默认插槽父组件中 <students> <div>xxx</div> </students>字组件中 <template>原创 2021-11-05 16:07:39 · 210 阅读 · 0 评论 -
vue组件-全局事件总线||消息订阅与发布
文章目录开始子组件通过props函数给父组件传递数据全局事件总线添加方法:使用方法消息订阅与发布开始当我们父给子组件传递东西的时候,可以直接通过props配置项传递但是子给父传递东西该怎么传递?子组件通过props函数给父组件传递数据我们可以由父组件通过props传递一个函数给子组件子组件通过函数的参数给父组件数据但是倘若父级的层级关系太多的时候,这样就显得不太合理了全局事件总线我们通过给所有vm和vc都看得到的地方,添加一个对象,这个对象专门用于给vm,vc通过函数参数的方式传原创 2021-10-28 21:34:15 · 97 阅读 · 0 评论 -
vue组件-props配置项
功能:让组件能接收外部传入的数据传输数据<School name="xxx" age="xxx" />接收数据先配置全新配置项props第一种: 简单接收 props:['name','age']第二种:限制类型 props:{ name:String age:number }第三种:全能限制 props{ name{ type:String ,原创 2021-10-28 21:18:25 · 223 阅读 · 0 评论 -
vue组件-ref属性;install插件;mixin混入
什么是ref属性是vue组件标签的唯一标识【相当于id】并且可以通过ref属性,来访问组件标签中的vuecomponent实例对象用法打标识: <shool ref="yyy"> xxx </shool>使用:this.$refs.yyy特点由于我们可以访问到组件的实例对象,使用我们可以通过ref属性,让父元素访问到子元素的内容什么是vue插件可以增强vue的一个(js等)文件这个文件里面是一个对象,对象里面有一个install方法,install方原创 2021-10-28 21:13:44 · 195 阅读 · 0 评论 -
vue-单文件组件基本使用
模块化就是把一个很大的东西,拆分成一些小的东西vue组件就是把一个大的html文件,拆成了一些小的vue文件这个vue文件里面,包括了html,js,css当要去使用者组件的时候,就需要暴露这些组件【export】,然后引入【import】vue-cil脚手架由于浏览器不认识.vue文件,就需要我们搭建vue脚手架vue脚手架给我们配置好了基本上所有东西,我们直接在里面写项目就可以了单文件组件格式temlate标签里面的内容,必须有一个根标签写入的组件必须要暴露【不然等于原创 2021-10-28 21:02:11 · 803 阅读 · 0 评论 -
vue-非单文件组件【了解】
文章目录介绍vue中使用组件的三大步骤:一. 如何创建组件【定义组件】二. 如何注册组件三.使用组件例子介绍vue中使用组件的三大步骤:创建组件注册组件使用组件【写组件标签】一. 如何创建组件【定义组件】使用Vue.extend({xxx}),其中的xxx跟new Vue{(xxx)}基本一致局别:不能写el的挂载,因为组件最终都要归顺于vm管理,其中的el挂载对象看vm中的data必须写成函数式、返回对象数据,因为在组件被多个vm使用时,防止数据改变而全部改变的问题注意使用te原创 2021-10-28 20:49:36 · 60 阅读 · 0 评论 -
vue-生命周期
文章目录什么是生命周期生命周期函数生命周期图什么是生命周期又名:生命回调函数,生命周期函数,生命周期钩子理解:Vue在某一个时刻帮助我们调用一些特殊名称的函数【例如mounted】注意:这些特殊函数的名称不能变,程序员只能改变里面的内容生命周期函数中,this的指向调成了vm 或 组件实例对象生命周期函数一. vm分为4对生命周期(创建,挂载,更新,销毁)创建:创建数据监视,数据代理【注意不是创建vm,vm早就已经创建了】将要创建:beforeCreate()函数原创 2021-10-28 20:45:25 · 73 阅读 · 0 评论 -
vue-监听属性watch
监视属性:1.使用方法:新添加一个配置项watch在watch配置项里面,创建一个对象(这个对象计算我们要监听属性的名字)在对象里面添加方法:handler(a,b),当属性改变时,这个方法就会被调用(有两个返回值,new和old)2.其他配置属性:深度监视(下面例子详解)deep:true可以监视对象里边的属性立即执行一次immediate:true3.例子 <div> 今天的温度:<span>{{wenDu}}</s原创 2021-10-28 20:38:07 · 124 阅读 · 0 评论 -
vue-计算属性computed
计算属性:定义:要用的属性不存在,通过已有的属性计算得来(已有的属性:必须是在vue内部的)原理:底层使用了Object.defineproperty方法提供的getter和setterget函数什么时候执行(1)初次读取的时候会执行一次(2)当依赖的数据改变的时候执行一次,并且在此调用(3)get还会自动的把this的指向改变为vm优势:与methods实现相比,内部有缓存机制(复用),效率更高注意:(1)计算属性的结果最终出现在vm上,直接使用即可(2)如果计算原创 2021-10-28 20:32:21 · 101 阅读 · 0 评论 -
vue-监视的原理
文章目录vue是怎样监视数据改变的(原理):**vue监听的特点(好处):**vue监听的注意事项(坏处):1.监听对象2.监听数组vue是怎样监视数据改变的(原理):就是把我们代码中写的data,通过一定的转换,成为vm中的vm_data这个转换就是,给每个元素新增加了get,set方法其中set方法,还有重新加载的功能(响应式),就是一旦被调用了set(元素被改变),就重新加载页面vue监听的特点(好处):1. 他可以层层深入的,找到每个对象中里面所有对象,进行处理(set),就是对象里原创 2021-10-17 21:00:35 · 116 阅读 · 0 评论 -
Vue-for指令中,key的重要性
文章目录先看下面一段简单的代码(v-for中没有设置key值)效果图然后我们再点击这个按钮的效果原因:先看下面一段简单的代码(v-for中没有设置key值) <input type="button" value="点我添加人员(无key)" @click.once="add1"> <ol> <li v-for="(p,index) in arry"> {{p.name}}<input type="text"> &l原创 2021-10-17 20:53:06 · 63 阅读 · 0 评论 -
MVVM模型-vue
文章目录什么是MVVM模型vue中是怎么去体现MVVM模型的关于VM中那些可以出现在V中什么是MVVM模型M:model(模型):数据V:view(视图):模板代码VM:视图模型:Vue实例可以看到的就是“V”看不到的数据就是“M”其中间处理他们两个的就是“VM”vue中是怎么去体现MVVM模型的V:在《body》标签的代码中,写出来的就是VM:在vue内部data里面的数据就是MVM:new Vue这个Vue就是VM,可以通过vue来使得M和V产生关系关于VM中那些可以出原创 2021-09-15 21:07:07 · 59 阅读 · 0 评论 -
Vue-事件绑定on
使用方法v-on:事件=”方法名“@事件=“方法名”【跟上面是一样的,只是上面的简写】传递参数1.@事件=“方法名(参数1,参数2)”2. 对应的方法:方法名:function(参数1,参数2){ alert("你是"+参数2+参数1) }限定事件1.@事件.限制条件=“方法名”例如: @keyup.enter="ke"...原创 2021-09-14 14:02:23 · 173 阅读 · 0 评论 -
Vue-数据同步v-model
作用v-model可以使表单内容和vue数据变量同步,相关联使用方法1.v-model=“变量名”例如<input type="text" v-model="message"> message:"我可以改变"那么我input里面的内容就是message的内容,并且当我改变input里面的数据时,message也会随之改变...原创 2021-09-14 13:55:33 · 406 阅读 · 0 评论 -
Vue-循环指令v-for
作用可以循环打印数组用法1.v-for: ( 变量名 ,索引名) in 数组名例如:v-for:(a,index) in array【那么它就会循环执行,a与index就是数组的每一个元素和索引】2.v-for: 变量名 in 数组名例如:v-for:a in array效果1.在列表标签中,它就会自动添加列表例如:<ul> <li v-for="(a,index) in arr">{{index+1+":"+a}}</li>原创 2021-09-14 13:47:13 · 736 阅读 · 0 评论 -
Vue-做一个网页
网页的成果图,和讲解在b站这个链接里https://www.bilibili.com/video/BV1KM4y1G7Zk?share_medium=android&share_plat=android&share_session_id=118a759a-e227-44d1-a58c-44e8c21c6829&share_source=QQ&share_tag=s_i×tamp=1631099611&unique_k=xYxOgX一些展示图片,有原创 2021-09-08 19:35:57 · 2452 阅读 · 0 评论 -
Vue-更改属性(v-bind),显示切换(v-show和v-if)
Vue显示切换显示切换有两种指令v-show:‘bool’v-if:‘bool’他们的区别是:v-show的实质是改变了元素的diplay属性,只是隐藏了元素,元素本身并没有在代码中消失v-if的实质是吧元素从dom中删除,直接没有了这个元素,使用我们看不见它了在平常使用的过程中,频繁切换显示的话就用v-showv-show和v-if用法在进行是否隐藏和显示的时候,主要看的就是里面的值是否为true或者false那么我们可以有多种方法进行判断真假v-show:“ag原创 2021-09-03 13:45:08 · 3050 阅读 · 0 评论 -
Vue-入门(运行第一个vue,el挂载点,data数据对象)
什么是VueVue是一个js的框架简化了我们DOM操作具有响应式数据驱动Vue如何的使用首先要导入vue框架<script src="../kj/vue.js"></script>//这里我的vue在kj/vue.js里面在script标签中创建new Vue({…}})el挂载点1.el用来设置vue管理元素的2.vue会管理el选中的元素及其内部元素3.推荐使用id选择器,也可以用其他选择器4.只能作用于双标签【但html和body标原创 2021-09-02 12:03:17 · 120 阅读 · 0 评论