Vue第三天
1、什么是生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
2、vue生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期函数=生命周期事件=生命周期钩子
3、vue生命周期
beforeCreat：刚初始化一个空的实例对象，在其生命周期执行时data和methods中的数据还没有初始化
created：data和methods已经初始化完成
beforeMount：此函数执行时，模板已经在内存中编译好了，但尚未挂载到页面中去，但是此时页面还是旧的
mounted：只要执行完了mounted，就表示整个Vue实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入到了运行阶段
beforeUpdate：当执行时，页面中显示的数据还是旧的，页面尚未和最新的数据保持同步
update：当执行时，页面已经和数据保持同步
beforeDestroy：当执行beforeDestroy钩子函数时Vue实例就已经从运行阶段进入到销毁阶段，但当执行此阶段时，还没有真正进行销毁的过程
destroyed：组件已经完全被销毁了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="修改msg" @click="msg='No'"> <h3 id="h3">{{ msg }}</h3> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('执行了show方法') } }, beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它 // console.log(this.msg) // this.show() // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化 }, created() { // 这是遇到的第二个生命周期函数 // console.log(this.msg) // this.show() // 在 created 中，data 和 methods 都已经被初始化好了！ // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作 }, beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中 // console.log(document.getElementById('h3').innerText) // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串 }, mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 // console.log(document.getElementById('h3').innerText) // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动 }, // 接下来的是运行中的两个事件 beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】 /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText) console.log('data 中的 msg 数据是：' + this.msg) */ // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步 }, updated() { console.log('界面上元素的内容：' + document.getElementById('h3').innerText) console.log('data 中的 msg 数据是：' + this.msg) // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的 } }); </script> </body> </html>
5. axios的使用
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
GET请求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app"> {{ info }} </div> <script type = "text/javascript"> new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://www.runoob.com/try/ajax/json_demo.json') .then(response => (this.info = response)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) </script> </body> </html>
POST请求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app"> {{ info }} </div> <script type = "text/javascript"> new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .post('https://www.runoob.com/try/ajax/demo_axios_post.php') .then(response => (this.info = response)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) </script> </body> </html>
6、使用过度类名
<div id="app"> <input type="button" value="动起来" @click="myAnimate"> <!-- 使用 transition 将需要过渡的元素包裹起来 --> <transition name="fade"> <div v-show="isshow">动画哦</div> </transition> </div>
vm实例
// 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { isshow: false }, methods: { myAnimate() { this.isshow = !this.isshow; } } });
定义两种类样式
/* 定义进入和离开时候的过渡状态 */ .fade-enter-active, .fade-leave-active { transition: all 0.2s ease; position: absolute; } /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */ .fade-enter, .fade-leave-to { opacity: 0; transform: translateX(100px); }
使用动画钩子函数
定义transition组件及三个钩子函数
<div id="app"> <input type="button" value="切换动画" @click="isshow = !isshow"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div v-if="isshow" class="show">OK</div> </transition> </div> 实例化Vue方法 methods: { beforeEnter(el) { // 动画进入之前的回调 el.style.transform = 'translateX(500px)'; }, enter(el, done) { // 动画进入完成时候的回调 el.offsetWidth; el.style.transform = 'translateX(0px)'; done(); }, afterEnter(el) { // 动画进入完成之后的回调 this.isshow = !this.isshow; } } 样式 .show{ transition: all 0.4s ease; }
