VUE系列-Vue核心应用(二)

大家好，我是前端岚枫，一枚二线城市的程序媛，上篇主要跟分享了《Vue核心概念及特性 (一)》，今天主要跟大家分享我整理的vue的一些常用的核心应用，主要包括一些表单组件、自定义指令、修饰符、watch、computed、动画、vue的生命周期及可能涉及到一些常用的面试题，vue面试题相关的答案我后期会专门整理分享。

一.v-model的使用

1.1 select

<select v-model="select"><option v-for="fruit in fruits":value="fruit">{{fruit}}</option>
</select>

1.2 radio

 <input type="radio" v-model="value"  value="男"><input type="radio" v-model="value"  value="女">

1.3 checkbox

<input type="checkbox" v-model="checks" value="游泳" >
<input type="checkbox" v-model="checks" value="健身">

1.4 修饰符应用 .number .lazy .trim

<input type="text" v-model.number="value">
<input type="text" v-model.trim="value">

二.自定义指令

全局指令和局部指令
编写一个自定义指令
- 钩子函数bind，inserted，update

    <input type="text" v-focus.color="'red'">Vue.directive('focus',{inserted:(el,bindings)=>{let color = bindings.modifiers.color;if(color){el.style.boxShadow = `1px 1px 2px ${bindings.value}`}   el.focus();}});

clickoutside指令

    <div v-click-outside="change"><input type="text"  @focus="flag=true" ><div v-show="flag">contenter</div></div><script>let vm = new Vue({el:'#app',data:{flag:false},methods:{change(){this.flag = false}},directives:{'click-outside'(el,bindings,vnode){document.addEventListener('click',(e)=>{if(!el.contains(e.target,vnode)){let eventName = bindings.expression;vnode.context[eventName]()}})}}})</script>

三.watch和computed

为什么总有面试问他们的区别? 先说watch 和 computed内部调用的都是new Watcher

3.1 watch (监控)

先来看下watch

let vm = new Vue({el: '#app',data: { name: 'zf' }
});
function initWatch(key,handler){vm.$watch(key,handler);
}
initWatch('name',function(newValue){console.log(newValue)
});
vm.name = 'jw'; // 数据变化会执行对应的handler

当数据变化后会执行对应的处理函数

3.2.computed

let dirty = true; // 内部有脏值检测系统
function initComputed(key,handler) {Object.defineProperty(vm, key, {get() {if (dirty) { // 取值后会将dirty 变成falsevalue = handler();dirty = false;}return value}})
}
initComputed('age', function () {console.log('取值一次')return vm.name
});
console.log(vm.age);
console.log(vm.age);
vm.name = 'hello'; // 当依赖的值变化 会将dirty重新改成true,保证获取最新值
dirty = true;
console.log(vm.age);

源代码中通过,watcher 来实现脏值检测的

function initComputed(key,handler) {// 源码中dirty 是通过watcher中来实现自动更新dirty的值let watcher = new Watcher(vm,handler,function(){},{lazy:true});Object.defineProperty(vm, key, {get() {if (watcher.dirty) { // 取值后会将dirty 变成falsevalue = handler();watcher.dirty = false;}return value}});
}

watch 每次值变化后都能执行对应的回调
computed 计算属性多次取值是用缓存效果的，如果依赖的值变化会重新执行
computed defineProperty get / set

四.动画

元素的显示隐藏都可以增加动画效果v-if、v-show、v-for、路由切换等操作。

常见的增加动画的方式有 animation 、 transition 、 js编写动画

4.1 css3动画

我们先要具体掌握一下每个样式的触发阶段

<div @click="show()">显示/隐藏</div>
<transition><div class="content" v-if="isShow"></div>
</transition>

.content{width: 100px;height: 100px;background: red;;;
}
.v-enter{ /*进入前*/background: blue;opacity: 0;
}
.v-enter-active{ /*进入中*/transition: all 2s linear;
}
.v-enter-to{ /*目标*/background: black;
}
/* 回到默认效果 红色 */
.v-leave{ /*开始离开*/background: yellow;
}
.v-leave-active{ /*离开中*/transition: all 2s linear;
}
.v-leave-to{ /*目标*/background: green;
}
/*元素隐藏*/

我们可以使用name属性来更改默认v-前缀

配合**animate.css**使用

安装animate.css

npm install animate.css

<link rel="stylesheet" href="node_modules/animate.css/animate.css">
<style >.content{background: red;width: 100px;height: 100px;}.v-enter-active{animation:bounceIn 1s ease-in;}.v-leave-active{animation:bounceOut 1s ease-in ;}
</style>

也可以采用直接指定样式的方式

<transition enter-active-class="bounceIn" leave-active-class="bounceOut"><div class="content animated" v-if="isShow"></div>
</transition>

4.2 js编写动画

常用的钩子

before-enter 触发enter之前
before-leave 触发leave之前
enter 进入动画过程
leave 离开动画过程
after-enter 进入动画结束
after-leave 离开动画结束

添加购物车的例子:

<ul><li v-for="(list,index) in lists" ref="lists"><div class="cover"><img :src="list.cover"></div><button @click="addCart(index)">加入购物车</button></li><!-- 实现动画 --><transition @enter="enter" @after-enter="afterEnter" ><span class="animate" v-if="showAnimate"></span></transition>
</ul>
<div class="cart" ref="cart">快进来!!!</div>

我们可以借助 v-if来实现动画效果

let vm = new Vue({el: '#app',methods:{enter(el,done){ // 进入时会触发此函数// 将当前点击项的背景图赋予给动画元素el.style.background = `url(${this.lists[this.currentIndex].cover})`;// 设置元素背景el.style.backgroundSize = `100% 100%`;// 将动画元素放到指定位置 let {x,y} = this.$refs.lists[this.currentIndex].getBoundingClientRect();el.style.left = x +'px';el.style.top = y + 'px';el.style.transformOrigin = `center center`;// 获取动画目标位置let {x:a,y:b} = this.$refs.cart.getBoundingClientRect();el.style.transform = `translate3d(${a-x}px,${b-y}px,0) scale(0,0)`;el.addEventListener('transitionend',done); // 动画结束后触发 done 方法},afterEnter(){ // 结束后重置动画this.showAnimate = false; // 直接隐藏},addCart(index){// 加入购物车 this.currentIndex = index; // 当前点击的那一项this.showAnimate = true;}},data() {return {showAnimate:false,currentIndex:-1,lists: [{cover: 'http://www.javascriptpeixun.cn/files/course/2019/10-13/20510264fa40871768.png',id: 1,},{cover: 'http://www.javascriptpeixun.cn/files/course/2019/10-13/21114956089d654633.png',id: 2,},{cover:'http://www.javascriptpeixun.cn/files/course/2019/10-13/2048331a9c5a183234.png',id:3,}]}}
})

4.3 多元素动画

如果动画遇到v-for就需要使用transition-group,而且每个元素必须增加key属性

<div class="nav-list" ref="box"><transition-group><div class="nav-item" v-for="i in count" v-show="isShow" :key="i">{{i}}</div></transition-group>
</div>
<div class="nav" @click="show()">导航</div>
<script>let vm = new Vue({el: '#app',methods:{ // 控制是否显示show(){this.isShow = !this.isShow}},data() {return {isShow: false, count:6 // 循环六个导航}}})
</script>

.nav-list .v-enter{ /*进入前的状态*/opacity: 0;transform: translate(0,0);
}
.v-enter-active,.v-leave-active{ /*运动中的效果*/transition: all .5s linear;
}
.nav-list .v-leave-to{ /*离开后的目标*/transform: translate(0,0);opacity: 0;
}

五.Vue中的生命周期

beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

钩子函数中该做的事情

created 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
mounted 实例已经挂载完成，可以进行一些DOM操作
beforeUpdate 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
destroyed 可以执行一些优化操作,清空定时器，解除绑定事件

六.面试题环节

computed和watch有什么区别?
Vue的生命周期,每个生命周期具体适合哪些场景
Vue中ref是什么?
Vue动画的生命周期?
Vue如何编写自定义指令?

VUE系列-Vue核心应用(二)相关推荐

VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
vue系列--vue是如何实现绑定事件
一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 ...
齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决
老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1.找到 confi ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
通过自定义组件学习Vue系列（二）【时间轴】（附源码）
需求: 用于升级日志的显示效果图: 实现原理: 主要区域分为两块,时间区和内容区,时间区是画一个圆点和显示一个时间,内容区左边一个竖线和文字显示然后做一下循环,将每个日期的数据显示出来布局采用f ...
【vue系列之二】详解vue-cli 2.0配置文件
上次给大家分享的是用vue-cli快速搭建vue项目,虽然很省时间和精力,但想要真正搞明白,我们还需要对其原理一探究竟. 大家拿到一个项目,要快速上手,正确的思路是这样的: 首先,如果在项目有read ...
vue系列：Vue核心概念及特性 (一)
大家好,我是前端岚枫,一枚二线城市的程序媛,下半年对于我们来说是比较特殊的几个月,7月底,郑州出现好多年不遇的水灾,没法出行,在家休息,8月出现了疫情,在家办公一个月,9月疫情过去,终于能来公司上班了 ...
vue快速修改数组的某个值_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...