相关文章推荐

睿智的玉米 · c++ - Unable to write ...· 1 年前 ·

有胆有识的雪糕 · Go 语言快速入门指南：Go 转 JSON ...· 1 年前 ·

最近在学习vue.js发现钩子函数这一块，有一个done函数，莫名奇妙难懂，网上翻遍了，整了3个多小时，才弄明白怎么回事。

所以特地写下一个超简单的示例供学习者理解参考。不多说，上代码： 后面有图解

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>vue done</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="test">
<button @click="show=!show">点我有讲解</button>
<transition v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterXianshi"

v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterXiaoshi"
v-bind:css="false">
<p v-if="show">
VUE菜鸟教程 - done函数作用讲解-作者QQ 4-9-8-3-5-777-9
</p>
</transition>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
show: false
},
methods: {
beforeEnter: function(el) {
console.log("显示之前 beforeEnter 函数被调用");
alert("显示之前 beforeEnter函数被调用");
},
enter: function(el, done) {
console.log("enter");
alert("现在正在执行enter函数代码，你可以在这里写各种动画实现显示效果……");
// 显示过程的动画运行结束了，可以使用done()通知VUE去执行after-Leave函数了(假如有)
done(); // 调用这个系统函数，就是告诉vue，动画结束了，如果注释，就不会调afterXianshi
},
afterXianshi: function(el) { //这里我们把钩子函数enter后的afterenter函数写上
console.log("after-enter");
console.log("----------");
alert("这是 afterXianshi(显示) 函数弹出来的框");
},
beforeLeave: function(el, done) {
console.log("消失之前 beforeLeave 函数被调用");
alert("显示之前 beforeEnter函数被调用");
},
leave: function(el, done) {
console.log("leave");
alert("现在正在执行leave函数代码，你可以在这里写各种动画实现消失效果……");
// 消失的动画运行结束了，可以使用done()通知VUE去执行after-Leave函数了(假如有)
done(); // 调用这个系统函数，就是告诉vue，动画结束了，如果注释，就不会调afterXiaoshi
},
afterXiaoshi(el){
console.log("after-leave");
alert("这是 afterXiaoshi(消失) 函数弹出来的框");
console.log("");
}
}
})
</script>
</body>

</html>

以下为运行效果：

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调 。否则，它们将被同步调用，过渡会立即完成。

如果形参不指定 done ，则表明用户不手动控制动画的结束，而转由节点的transition或者animationEnd 来标识动画结束，开始回调 afterEnter。

钩子函数的形参的个数大于1，表示形参中有done, 也就是说用户必须手动控制动画何时结束。 所以一旦你配置了 done 形参，则转由你告诉框架，动画何时结束。需要在合适的时机调用 done ，否则 afterEnter 接口就没法被调用了。

最近在学习vue.js发现钩子函数这一块，有一个done函数，莫名奇妙难懂，网上翻遍了，整了3个多小时，才弄明白怎么回事。所以特地写下一个超简单的示例供学习者理解参考。不多说，上代码：后面有图解<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">... 众所周知 vue 中使用路由的方式设置url 参数，但是这种方式必须要在路径中附带参数，而且这个参数是需要在 vue 的路由中提前设置好的。相对来说，在某些情况下直接在url后面拼接？mid=100的方式传递参数更灵活，你不需要设置路由，只需要在url后拼接参数即可，但是这种方式就需要通过javascript获取并提取url 中的参数，通过传统的方式直接在页面中获取是行不通的了，因为 vue 中是无法通过location.search()来获取url问号之后的内容的。当然，这个问题也有解决方法，就是把获取参数的脚本代码注册成全局方法就可以了。下面话不多说了，来一看看详细的方法示例吧。

##发现当你使用js的定时器设置样式的时候，必须传入done方法，（可以不使用，也能达到目的，但是必须传）代码如下：直接粘贴可用； ##注：里面声明了timer定时器属性，目的是为了防止快速点击button按钮定时器无法清除的问题，大家可以了解一下； &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&a

render 函数 vue 通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。什么情况下适合使用render 函数在一次封装一套通用按钮组件的工作中，按钮有四个样式(default success error )。首先，你可能会想到如下实现 <div v-if=type>success</div> <div v-else-if=type>error</div> <div v-else-if=type === 'war

1.c++虚函数原理作用：C++ 中的虚函数的作用主要时实现了多态的机制。当基类中的成员函数定义了虚函数，其子类可以重新改写该函数。也即是允许派生类调用父类的同名函数而实现不同的功能，也叫动态联编。在主函数调用时，只需要定义一个基类指针就可以进行派生类的分别操作。底层原理：虚函数表+虚函数表指针。每一个类都会对应一个虚函数表，一个存放虚函数地址的虚函数表，并创建虚函数指针（vptr）来指向表。 2.虚函数指针的初始化过程虚函数表的创建和虚函数指针的初始化都是在构造函数中进行的。当编译器发现基类当中有

#设置画布大小 # turtle.screensize(canvwidth=None, canvheight=None, bg=None) 画布的宽, 高, 背景颜色。 # turtle.screensize();默认状态，宽400，高300 # turtle.setup(width=0.5, height=0.75, startx=None, starty=None) # width, height: 输入宽和高为整数时, 表示像素;

今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。节流函数浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的 回调函数 会不停的被调用，加重浏览器的负担，导致用户体验非常糟糕。所以先贤们发明了节流函数，简单版本如下： function throttle (f, wait = 200) { let last = 0 return function (...args) { let now = Date.now() if (now - last > wait) { last = now

let self = this //使用新变量替换this，以免this无效 //updateStudentInfoToServer是一个将本身部分数据异步上传的接口，接收三个参数，其中第一个是数据，第二、三个是函数，第二、三个函数使用function(){}形式书写 updateStudentInfoToServer:function(data, networkOk, networkError){ let postData = this.$qs.stringify({ data:data this.axios.post('/api/update/updateStudent

用 vue 蛮久了才发现自己有很多比较方便的用法都没有用过，还是自己当初在开始学的时候掌握的，是在惭愧。这些在各种组件源码中经常看到，以为都是很高级很高级的用法，其实你会发现这些都是在 Vue 官方文档中写的很仔细很仔细的，但是我自己从来没有看过。这次算给自己上了一节课了，在刚开始学习的时候可以粗略的过，但是用了一段时间之后，一定要回过来在仔细的阅读官方文档。组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事： // 一遍编写复杂组件的时候可能会用到

包括以下工具：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡 钩子函数 中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js 在这里，我们只会讲到进入、离开和列表的

Vue .js无疑是最近最火的一套 前端框架 ，被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。其轻量级，渐进式的优点对开发者的吸引力毋庸置疑。本人玩过两年的Angular，对 Vue 也充满了好奇，于是也想认识一下 Vue 。 Vue .js安装主流的安装方式当然是使用 vue -cli工具，这跟angular挺像的。但是作为刚入门的开发者，官方比较推荐...