vue 进阶必备，查缺补漏开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

vue 进阶必备，查缺补漏

计算属性-computed

初始化会执行，相关 data 属性数据发生改变会执行

computed:{
fullname1(){
return this.firstname+this.lastname
}

fullname2(){
//监视当前属性值的变化，当属性值发生改变时回调，更新相关属性数据
set(value){
const names=value.split(" ");
this.firstname=names[0];
this.lastname=names[1];
}
//回调函数，计算并返回当前属性值
// 回调函数：1、你定义的 2、你没有调用 3、最终它执行了
//当需要回调读取当前值时回调，根据相关数据计算并返回当前属性的值
get(){
   return this.firstname+this.lastname
}
}
}

注意：计算属性有缓存

监视属性-watch

1、简单写法

watch：{
   firstname：function（value）{
}
}

2、完整写法

watch：{
firstname: {
    handler(newValue) {},
    deep: true,
     immediate: true
    }
}

obj: { handler() { console.log("obj 变了"); }, deep: true }, deep: true 是干什么的？如果 obj.a 变了，obj 算不算也变了？如果你需要答案是【也变了】，那么就用 deep: true 如果你需要答案是【没有变】，那么就用 deep: false computed：计算属性，会被缓存 watch：监听器，不会被缓存

class 和 style 绑定

class 绑定

<p :class='a'></p>
data:{
   a:"aclass"
}
//对象形式
<p :class='{aclass:true}'>
//数组形式
<p :class='['aclass','bclass']'></p>

style 绑定

<p :style="{color : activeColor}"></p>

过度与动画-transition

可以给任何元素和组件添加进入/离开过渡；在进入/离开的过渡中，会有 6 个 class 切换； v-enter 、v-enter-active 、v-enter-to 、v-leave 、v-leave-active 、v-leave-to

使用：

<transition name="fade">
    <p v-show="isshow">show</p>
</transition>

还可以配合 animation 实现动画+@keyframes

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

使用 JavaScript 钩子 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"

过滤器-filters

在双花括号中

{{ message | capitalize }}

在 v-bind 中

<div v-bind:id="rawId | formatId"></div>

实现自定义过滤器

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
// ...
})

自定义指令

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

// 注册一个全局自定义指令 v-focus

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下： <input v-focus>

指令钩子函数会被传入以下参数： el：指令所绑定的元素，可以用来直接操作 DOM。 binding：一个对象，包含以下 property： name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。 modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。 vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

插槽-solt

父组件向子组件传递值代码示例

<slot name="test">子</slot>

<template v-slot:test></template>

<span slot="test"></span>

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情