[前端面试套餐css+js+vue]第十一天

css常见动画有哪些？实现方式？

CSS动画是层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块

css实现动画的方式，有如下三种

• transition渐变动画
  • property：填写需要变化的css属性
  • duration：完成过渡效果需要的时间单位(s或ms)
  • timing-function：完成效果的速度曲线如ease，ease-in，ease-in-out，cubic-bezier(n,n,n,n)
  • delay:动画效果的延迟触发事件
  • 注意：并不是所有的属性都能使用过渡，如display：none dispkay：block
• transform转变动画
  • translate：位移
  • scale：缩放
  • rotate：旋转
  • skew：倾斜
  • 注意：transform不支持inline元素，使用前把它变成block
• animation实现自定义动画
  • 通过@keyframes来定义关键帧
    因此，我们想要让元素旋转一圈，只需要定义两帧即可

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

---

也可以用生命周期来刻画

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

定义好关键帧后，就可以直接使用了animation: rotate 2s;

js:bind,call,apply区别？如何实现一个bind？

call，apply，bind作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向

那么什么情况下需要改变this的指向呢？

var name="lucy";
const obj={
    name:"martin",
    say:function () {
        console.log(this.name);
    }
};
obj.say(); //martin，this指向obj对象
setTimeout(obj.say,0); //lucy，this指向window对象

从上面可以看到，正常情况say方法输出martin

但是我们把say放在setTimeout方法中，在定时器中是作为回调函数来执行的，因此回到主栈执行时是在全局执行上下文的环境中执行的，这时候this指向window，所以输出luck

我们实际需要的是this指向obj对象，这时候就需要该改变this指向了

setTimeout(obj.say.bind(obj),0); //martin，this指向obj对象

区别

• 三者都可以改变函数的this对象指向
• 三者的第一个参数都是this要指向的对象，如果没有这个参数或参数为undefined或null，则默认指向全局window
• 三者都可以传参，但是apply是数组，call时参数列表，且apply和call时一次性传入参数，而bind可以分为多次传入
• bind是返回绑定this之后的函数，apply，call则是立即执行

手写bind

• 修改this指向
• 动态传递参数

/*
 * @Author: 41
 * @Date: 2021-12-16 11:28:00
 * @LastEditors: 41
 * @LastEditTime: 2021-12-16 15:19:45
 * @Description: 
 */
Function.prototype.myBind=function(context){
    // 判断对象是否为函数
    if(Object.prototype.toString.call(this).slice(8,-1)!=="Function"){
        throw new TypeError("Error")
    }
    // 获取参数
    const args=[...arguments].slice(1)
    const fn=this
    return function Fn(){
        // 根据调用方式，传入不同绑定值
        return fn.apply(context,args.concat(...arguments))
    }
}

/**************************************************** */
/***********************测试区域********************* */
function foo(name) {
    this.name = name;
}
var obj = {}
//上下文 功能  done
var bar = foo.myBind(obj)
bar('jack')
console.log(obj.name) //'jack'
// 参数 功能   done
var tar = foo.myBind(obj, 'rose');
tar()
console.log(obj.name) //'rose'
// new 功能   error
var alice = new bar('alice')
console.log(obj.name) //alice   obj name should be 'jack'
console.log(alice.name) //undefined, alice name should be 'alice'
    

觉得这里没写明白，先这样吧

Vue常用的修饰符有哪些？有什么应用场景？

在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的事件去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理

vue中修饰符分为以下五种

• 表单修饰符
• 事件修饰符
• 鼠标按键修饰符
• 键值修饰符
• v-bind修饰符

修饰符的作用

表单修饰符

• lazy
  • 在我们填完信息，光标离开标签的时候，才会赋值给value，也就是在change事件之后再进行信息同步

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

• trim
  • 自动过滤用户输入的首空格字符，而中间的空格不会过滤

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

• number
  • 自动将用户的输入值转为数值类型，但如果这个值无法呗parseFloat解析，则会返回原来的值

<input v-model.number="age" type="number">

事件修饰符

• stop 阻止了事件冒泡，相当于调用了event.stopPropagation方法

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

---

• prevent 阻止了事件的默认行为，相当于调用了 event.preventDefault方法

<form v-on:submit.prevent="onSubmit"></form>

---

• self 只当在 event.target 是当前元素自身时触发处理函数

<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击

---

• once 绑定了事件以后只能触发一次，第二次就不会触发

---

• capture 使事件触发从包含这个元素的顶层开始往下触发

<div @click.capture="shout(1)">
    obj1
<div @click.capture="shout(2)">
    obj2
<div @click="shout(3)">
    obj3
<div @click="shout(4)">
    obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3 

---

• passive
  在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

passive 会告诉浏览器你不想阻止事件的默认行为

---

• native
  让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

<my-component v-on:click.native="doSomething"></my-component>

鼠标按钮修饰符

• left 左键点击
• right 右键点击
• middle 中键点击

键盘修饰符

键盘修饰符是用来修饰键盘事件(keyup，keydown)，有如下

• 普通键(enter,tab,delete,space,esc,up…)
• 系统修饰键(ctrl,alt,meta,shift)

v-bind修饰符

v-bind修饰符主要是为属性进行操作

• async 能进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

以上这种方法相当于以下的简写

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

使用async需要注意以下两点：

• 使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致

• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

---

• prop 设置自定义标签属性，避免暴露数据，防止污染HTML结构

<input id="uid" title="title1" value="1" :index.prop="index">

---

• camel 将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox

应用场景

根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：

• .stop：阻止事件冒泡
• .native：绑定原生事件
• .once：事件只执行一次
• .self ：将事件绑定在自身身上，相当于阻止事件冒泡
• .prevent：阻止默认事件
• .caption：用于事件捕获
• .once：只触发一次
• .keyCode：监听特定键盘按下
• .right：右键