- 博客(15)
- 收藏
- 关注
原创 Watch和Computed区别
Watch和Computed区别计算属性computed支持缓存,只有依赖数据发生改变,才会重新进行计算不支持异步,当computed内有异步操作时无效,无法监听数据的变化computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed如果computed属性属性值是函数,那么默认会走get方法;函数
2022-05-16 22:09:53
137
原创 Vue项目Class与Style绑定
Vue项目Class与Style绑定Vue中的的class和style 用法类似都有对象语法,数组语法 ,以下示例简单演示Vue项目Class和Style的使用Vue项目中Class绑定使用<template> <div class="HelloWorld"> <!--对象用法 对象的属性名称为class名称--> <div class="static" v-bind:class="{ addClass: isAd
2022-05-16 20:44:44
92
原创 vue实例上常用的方法
vue实例上的方法 1. $data :vm.$data获取实例上data数据 2. $watch:vm.$watch监控 3. $el:vm.el获取元素实例上el元素 4. $set:vm.$set后加的属性加上响应式的变化 5. $options:vm.$options 获取vm 上的所有的属性 6. $nextTick:vm.$nextTick异步方法等待dom渲染完获取vm 7. $refs:vm.$refs一个页面中定义的,只能用一个refs 但是如果是v-for就可以获取一组
2020-10-27 21:30:04
277
原创 vue的生命周期
vue的生命周期根实例在初始化的时候会调用很多的方法,调取的这些方法就是钩子函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed简述整个生命周期的过程new vue 实例的时候先初始化实例上的方法,vue自带的发布订阅的一些方法$on $once $off $emit 还有生命周期调取beforeCreated 之后在注入数据及响应式的数据变化(在此函数中打印vue,
2020-10-27 20:51:21
108
原创 内容过多显示省略号
超出显示省略号js 处理内容过多显示省略号 handleOmit(countent,el){ for(let i=0;i<countent.length;i++){ el.innerHTML=countent.substr(0,i+1);//包头不包尾加上最后一个字符 if(el.offsetHeight<el.scrollHeight&&countent!=''){ el.style.overflow='hidden'; if(i=
2020-10-27 11:47:51
473
原创 vue单页面开发的方式
实现单页开发的方式通过hash记录跳转的路径(可以产生历史管理)浏览器自带的历史管理的方法history( history.pushState()) 可能会导致404错误开发的使用hash的方式 上线的话我们使用history
2020-10-19 22:00:21
266
原创 vue常用事件及vue事件修饰符
vue事件修饰符事件.stop :阻止冒泡行为事件.capture :阻止捕获事件.prevent 阻止默认行为事件.once 仅执行一次
2020-10-19 20:41:29
356
原创 vue计算属性 computed
vue计算属性computed下面是一个简单的computed 的使用,在项目中常用selectAll,进入页面,selectAll 先通过get 获取值,当页面刷新时,则通过其他的checbox 的元素的isSelect来计算值<template> <div class="demo"> <div class="example"> <div class="item"> <input type="c
2020-10-13 23:20:37
152
原创 vue局部和全局过滤器filters的简单使用
vue 过滤器filtersitem|toFixed(2) 中的 | 指的是filters 的管道符,filters 对象中的方法 toFixed第一个参数item 是指的要处理的数据,第二个参数params指的是toFixed 方法传递的一个参数值<template> <div class="demo"> <div class="example"> <div class="item" v-for="(item,index) i
2020-10-13 22:41:28
603
原创 vue提供的14个指令
VUE常用命令vue官网上提供14个常用命令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-modelv-slotv-prev-cloakv-once以下按项目中常用量来一一介绍v-model :双向数据绑定,表单元素常用 input select radio checkbox textarea 等v-show: 元素的显示和隐藏,频繁操作元素的显示和隐藏,就用v-show ,原理是操作的dom 的css样式 dis
2020-10-12 21:40:13
266
原创 Vue2路由动画效果实现
一,路由中的动画效果实现<transition> 运动东西(元素,属性,路由.....);</transition> class的定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 --当元素出来(显示) .fade-leave{} //可不写 .fade-leve-active{} ...
2018-08-07 16:49:23
726
原创 Vue-router中的懒加载
一,代码分割器 coding split 解决问题:vue在单页面开发时,只是加载一个app.js 文件 ,如果项目很大,页面加载速度会很慢,为了解决页面加载速度慢的问题,我们将app.js 文件分割成多个请求文件进行加载,用户点击那个页面,加载那个页面的数据二,代码分割器的用法平时路由配置如下import Vue from 'vue'import Router from '...
2018-08-07 14:29:17
192
原创 Vue-router中的导航钩子
vue-router中的导航钩子vue-router中的钩子有三种全局导航钩子 路由中配置的单个导航钩子 组件内部的导航钩子这三种钩子函数的参数用法一样参数介绍to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航...
2018-08-07 14:12:14
3470
原创 Vuex 中getters的使用
一,Vuex 中getters的使用 vuex 中的getters 想当于vue中的computed ,getters是vuex 中的计算属性 ,计算属性写起来是方法,但它是个属性二,getters 使用案例计数器(代码直接粘贴复制即可用)import Vue from 'vue'import App from './App'import router from './rout...
2018-08-07 12:35:17
4868
原创 Vuex介绍
一,Vuex 解决什么问题 1,解决平级组件交互问题 2,找共同父级的问题 3,跨组件交互问题(比较父亲传值给孙子的问题)当然,Vue官网中还提供了一种方式eventBus 也可以解决上面的问题,eventBus它是基于发布订阅模式来使用的,eventBus 不适合大型的项目,使用起来比较混乱Vuex 主要是借鉴了flux ,redux ,redux 可以和其他框架类库搭配...
2018-08-06 17:51:14
186
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人