shixiaoxiao106-优快云博客

原创 Watch和Computed区别

Watch和Computed区别计算属性computed支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed如果computed属性属性值是函数，那么默认会走get方法；函数

2022-05-16 22:09:53 172

原创 Vue项目Class与Style绑定

Vue项目Class与Style绑定Vue中的的class和style 用法类似都有对象语法，数组语法，以下示例简单演示Vue项目Class和Style的使用Vue项目中Class绑定使用<template> <div class="HelloWorld">  <div class="static" v-bind:class="{ addClass: isAd

2022-05-16 20:44:44 118

原创 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 307

原创 vue的生命周期

vue的生命周期根实例在初始化的时候会调用很多的方法，调取的这些方法就是钩子函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed简述整个生命周期的过程new vue 实例的时候先初始化实例上的方法,vue自带的发布订阅的一些方法$on $once $off $emit 还有生命周期调取beforeCreated 之后在注入数据及响应式的数据变化(在此函数中打印vue,

2020-10-27 20:51:21 131

原创内容过多显示省略号

超出显示省略号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 499

原创 vue单页面开发的方式

实现单页开发的方式通过hash记录跳转的路径（可以产生历史管理）浏览器自带的历史管理的方法history( history.pushState()) 可能会导致404错误开发的使用hash的方式上线的话我们使用history

2020-10-19 22:00:21 298

原创 vue常用事件及vue事件修饰符

vue事件修饰符事件.stop :阻止冒泡行为事件.capture :阻止捕获事件.prevent 阻止默认行为事件.once 仅执行一次

2020-10-19 20:41:29 386

原创 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 179

原创 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 633

原创 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 292

原创 Vue2路由动画效果实现

一，路由中的动画效果实现<transition>　　运动东西(元素,属性,路由.....);</transition> class的定义:　　.fade-enter{} //初始状态　　.fade-enter-active{} //变化成什么样 --当元素出来(显示)　　.fade-leave{} //可不写　　.fade-leve-active{} ...

2018-08-07 16:49:23 774

原创 Vue-router中的懒加载

一，代码分割器 coding split 解决问题：vue在单页面开发时，只是加载一个app.js 文件，如果项目很大，页面加载速度会很慢，为了解决页面加载速度慢的问题，我们将app.js 文件分割成多个请求文件进行加载，用户点击那个页面，加载那个页面的数据二，代码分割器的用法平时路由配置如下import Vue from 'vue'import Router from '...

2018-08-07 14:29:17 209

原创 Vue-router中的导航钩子

vue-router中的导航钩子vue-router中的钩子有三种全局导航钩子路由中配置的单个导航钩子组件内部的导航钩子这三种钩子函数的参数用法一样参数介绍to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航...

2018-08-07 14:12:14 3507

原创 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 4905

原创 Vuex介绍

一，Vuex 解决什么问题 1，解决平级组件交互问题 2，找共同父级的问题 3，跨组件交互问题（比较父亲传值给孙子的问题）当然，Vue官网中还提供了一种方式eventBus 也可以解决上面的问题，eventBus它是基于发布订阅模式来使用的，eventBus 不适合大型的项目，使用起来比较混乱Vuex 主要是借鉴了flux ，redux ,redux 可以和其他框架类库搭配...

2018-08-06 17:51:14 205

shixiaoxiao106