Kim丶

vue进阶笔记

自定义指令

自定义全局指令

第一个参数：指令名称。
第二个参数：一个对象，该对象有一下指令相关的钩子函数。
注意：定义的时候，指令的名称前面不需加 v- 前缀，但调用的时候需要。

Vue.directive('指令名称', { /*钩子函数*/ });

自定义私有指令（directives属性）

在声明vm对象中通过 directives 选项定义。

directives: {
  // focus为指令名
  focus: {
    // 指令的定义，inserted为钩子函数
    inserted: function (el) {
      el.focus();
    }
  }
}

使用自定义指令

与官方定义指令使用一样，也可传参数。

<input v-focus>

<div id="app" v-demo="message">div>

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。与JS行为相关的操作，最好在inserted去执行。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：（加粗为重要（或常用）属性）

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
- 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 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

<div id="app" v-demo="message">div>

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify;
    el.innerHTML =
      'name: '       + s(binding.name) + '
' +
      'value: '      + s(binding.value) + '
' +
      'expression: ' + s(binding.expression) + '
' +
      'argument: '   + s(binding.arg) + '
' +
      'modifiers: '  + s(binding.modifiers) + '
' +
      'vnode keys: ' + Object.keys(vnode).join(', ');
  };
})

new Vue({
  el: '#app',
  data: {
    message: 'hello!'
  }
});

函数简写

在很多时候，可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。可以采用以下方式：

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value;
});

对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }">div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color); // => "white"
  console.log(binding.value.text);  // => "hello!"
})

Vue中的动画

使用包裹需要动画的元素。

过渡类名

v-enter：定义进入过渡的开始状态。在元素被插入之前生效。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to： 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

使用过渡类名

对于这些在过渡中切换的类名来说，**如果使用一个没有定义name属性的，则 v- 是这些类名的默认前缀。**如果你使用了，那么 v-enter 会替换为 fade-enter。

<style>
	/* 定义进入和离开时候的过渡状态 */
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.2s ease;
      position: absolute;
    }
    /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }
style>
<div id="app">
    <input type="button" value="动起来" @click="myAnimate">
    
    <transition name="fade">
      <div v-show="isshow">动画哦div>
    transition>
div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
  methods: {
    myAnimate() {
      this.isshow = !this.isshow;
    }
  }
});
script>

过渡模式mode

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

例：

<transition name="fade" mode="out-in">
  
transition>

使用第三方css动画库（自定义过渡的类名）

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
他们的优先级高于普通的类名，含义对应上面的过渡类名。

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<div id="example-3">
  <button @click="show = !show" value="Toggle render">button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hellop>
  transition>
div>
<script>
new Vue({
  el: '#example-3',
  data: {
    show: true
  }
});
script>

显性的过渡持续时间

用组件上的 duration 属性定制一个显性的过渡持续时间。
...
... 定制进入和移出的持续时间。

JavaScript钩子实现动画

可以在属性中声明 JavaScript 钩子。

<transition
  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"
>
  
transition>

// ...
methods: {
  // 进入中
  // --------
  beforeEnter: function (el) { ... },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) { /* ... */ done(); },
  afterEnter: function (el) { ... },
  enterCancelled: function (el) { ... },
  // 离开时
  // --------
  beforeLeave: function (el) { ... },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) { /* ... */  done(); },
  afterLeave: function (el) { ... },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) { ... }
}

ps:

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡。

<transition appear>
  
transition>

列表过渡

使用组件。

不同于，它会以一个真实元素呈现：**默认为一个。可以通过 tag 特性更换为其他元素。
内部元素 总是需要 提供唯一的 key 属性值。
过渡模式不可用

<transition-group tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
            {{item.id}}---{{item.name}}
        li>
transition-group>

列表的排序过渡

新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀。

Vue定义组件

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

全局组件定义的三种方式

使用 Vue.extend 配合 Vue.component 方法：
- Vue.extend{ template: 'HTMLCode' } 返回一个组件模板对象。
- Vue.component('组件名称', 创建出来的组件模板对象)

var login = Vue.extend({
      template: '登录
'
});
Vue.component('login', login);

直接使用 Vue.component 方法：
- Vue.component('组件名称', { template: 'HTMLCode' })

Vue.component('register', {
      template: '注册
'
});

将模板字符串，定义到script标签（也可以是

vue进阶笔记

自定义指令

自定义全局指令

自定义私有指令（directives属性）

使用自定义指令

钩子函数

钩子函数参数

函数简写

对象字面量

Vue中的动画

过渡类名

使用过渡类名

过渡模式mode

使用第三方css动画库（自定义过渡的类名）

显性的过渡持续时间

JavaScript钩子 实现动画

初始渲染的过渡

列表过渡

列表的排序过渡

Vue定义组件

全局组件定义的三种方式

登录

注册

组件使用

定义私有组件（components属性）

组件中的data（注意）

使用components属性定义局部子组件

这是Account组件{{name}}

这是登录组件

使用flag标识符结合v-if和v-else切换组件

奔波霸

霸波奔

动态组件&异步组件

登录组件

注册组件

在动态组件使用

异步组件

处理加载状态

插槽v-slot

编译作用域

后备内容（slot的默认内容）

具名插槽

作用域插槽

具名插槽的缩写

Prop（父向子传值）

这是子组件 --- {{parentmsg}}

字符串数字写法

对象写法

单向数据流

非 Prop 的特性

替换/合并已有的特性

禁用特性继承

自定义事件（子向父传值）

非父子组件通信

Vue 1.x 版本

Vue 2.x 版本

处理边界情况

访问根实例

访问父级组件实例

访问子组件实例或子元素

依赖注入

混入

基础

选项合并

全局混入(谨慎使用)

你可能感兴趣的:(vue)

JavaScript钩子实现动画

使用`components`属性定义局部子组件

使用`flag`标识符结合`v-if`和`v-else`切换组件

插槽`v-slot`