位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > JavaScript 钩子
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 自定义过渡的类名 下一篇: Vue.js 响应接口

可以在属性中声明 JavaScript 钩子

HTML 代码:

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

JavaScript 代码:

// ...

methods: {

  // --------

  // 进入中

  // --------

 

  beforeEnter: function (el) {

    // ...

  },

  // 此回调函数是可选项的设置

  // CSS 结合时使用

  enter: function (el, done) {

    // ...

    done()

  },

  afterEnter: function (el) {

    // ...

  },

  enterCancelled: function (el) {

    // ...

  },

 

  // --------

  // 离开时

  // --------

 

  beforeLeave: function (el) {

    // ...

  },

  // 此回调函数是可选项的设置

  // CSS 结合时使用

  leave: function (el, done) {

    // ...

    done()

  },

  afterLeave: function (el) {

    // ...

  },

  // leaveCancelled 只用于 v-show

  leaveCancelled: function (el) {

    // ...

  }

}

 

初始渲染的过渡

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

<transition appear>

  <!-- ... -->

</transition>

这里默认和进入/离开过渡一样,同样也可以自定义 CSS 类名。

<transition

  appear

  appear-class="custom-appear-class"

  appear-to-class="custom-appear-to-class" (2.1.8+)

  appear-active-class="custom-appear-active-class"

  <!-- ... -->

</transition>

自定义 JavaScript 钩子:

<transition

  appear

  v-on:before-appear="customBeforeAppearHook"

  v-on:appear="customAppearHook"

  v-on:after-appear="customAfterAppearHook"

  v-on:appear-cancelled="customAppearCancelledHook"

  <!-- ... -->

</transition>

多个元素的过渡

我们可以设置多个元素的过渡,一般列表与描述:

 

需要注意的是当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。

 

<transition>

  <table v-if="items.length > 0">

    <!-- ... -->

  </table>

  <p v-else>抱歉,没有找到您查找的内容。</p>

</transition>

如下实例:

<transition>

  <button v-if="isEditing" key="save">

    Save

  </button>

  <button v-else key="edit">

    Edit

  </button>

</transition>

在一些场景中,也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if v-else,上面的例子可以重写为:

<transition>

  <button v-bind:key="isEditing">

    {{ isEditing ? 'Save' : 'Edit' }}

  </button>

</transition>

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如:

<transition>

  <button v-if="docState === 'saved'" key="saved">

    Edit

  </button>

  <button v-if="docState === 'edited'" key="edited">

    Save

  </button>

  <button v-if="docState === 'editing'" key="editing">

    Cancel

  </button>

</transition>

可以重写为:

<transition>

  <button v-bind:key="docState">

    {{ buttonMessage }}

  </button>

</transition>

 

// ...

computed: {

  buttonMessage: function () {

    switch (this.docState) {

      case 'saved': return 'Edit'

      case 'edited': return 'Save'

      case 'editing': return 'Cancel'

    }

  }

}


上一篇: 自定义过渡的类名 下一篇: Vue.js 响应接口
毕业设计网             广告联系QQ:45157718(微信同号)