一、生命周期钩子函数
Vue组件的生命周期一共有8个函数目前只需要掌握2个
1 mounted用的最多：向后端发送请求，定时器初始化
2 destroyed：组件销毁--->给组件写一个定时器-->组件销毁，定时器清除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title>Title</title> </head> <body> <div id="box"> <child v-if="isShow"></child> {{name}} </div> </body> <script> Vue.component('child', { template: ` <div>我是组件的div</div>`, data(){ return { t:null, } }, beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { //用的最多，向后端加载数据，创建定时器等 console.log("页面已被vue实例渲染, data, methods已更新"); console.log('mounted') //起一个定时器，每隔三秒，打印一行 this.t = setInterval(function () { console.log('daada') }, 3000) }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('beforeDestroy') }, destroyed() { //组件销毁，清理定时器 clearInterval(this.t) this.t = null console.log('destroyed') }, }) var vm = new Vue({ el: '#box', data: { name:'lqz', isShow:true }, beforeUpdate() { console.log('根的---beforeUpdate') }, updated() { console.log('根的---updated') }, }) </script> </html>
2 补充延时任务和定时任务
setTimeout(function () { alert(33333) },3000) //延迟3s钟干什么事 setInterval( function () { alert(444) },3000 )//每隔3s钟干什么事
二、自定义指令
1 基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令 基本使用</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <div v-mystyle>我是1个DIV</div> </div> </body> <script> // 自定义指令，使用的时候 v-自定义指令名 Vue.directive('mystyle', { inserted(ev) { // 在标签上使用这个指令，就会触发 inserted console.log('我执行了') } }) let vm = new Vue({ el: '#box' }) </script> </html>
2.让所有使用自定义指令的标签背景都变红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令 基本使用</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <div v-mystyle>我是1个DIV</div> <br> <div v-mystyle>我也是1个DIV</div> </div> </body> <script> // 自定义指令，使用的时候 v-自定义指令名 Vue.directive('mystyle', { inserted(ev) { // 在标签上使用这个指令，就会触发 inserted ev.style.background='red' } }) let vm = new Vue({ el: '#box' }) </script> </html>
3.用户指定自定义指令的背景色,修改变量，背景变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <!-- <div v-mystyle>我是1个DIV</div>--> <div v-mystyle>我是1个DIV</div> <div v-mystyle="'red'">我是1个DIV</div> <div v-mystyle="'green'">我是1个DIV</div> <div v-mystyle="'blue'">我是1个DIV</div> <div v-mystyle="myColor">我是1个DIV</div> </div> </body> <script> Vue.directive('mystyle', { inserted(ev, color) { // 这里的ev就是DOM对象，color是自定义组件对象 console.log(ev) console.log(color) ev.style.backgrond = color.value }, updated(el, color) { el.style.background = color.value } }) let vm = new Vue({ el: '#box', data: { myColor: 'purple' } }) </script> </html>
三：过滤器
json数据：film.json
{ "coming": [ { "id": 1240838, "haspromotionTag": false, "img": "http://p1.meituan.net/w.h/movie/38dd31a0e1b18e1b00aeb2170c5a65b13885486.jpg", "version": "", "nm": "除暴", "preShow": false, "sc": 8.6, "globalReleased": true, "wish": 76513, "star": "王千源,吴彦祖,春夏", "rt": "2020-11-20", "showInfo": "今天50家影院放映79场", "showst": 3, "wishst": 0, "comingTitle": "11月20日 周五" }, { "id": 1228788, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg", "version": "", "nm": "一秒钟", "preShow": false, "sc": 8.6, "globalReleased": true, "wish": 54493, "star": "张译,刘浩存,范伟", "rt": "2020-11-27", "showInfo": "今天11家影院放映12场", "showst": 3, "wishst": 0, "comingTitle": "11月27日 周五" }, { "id": 1358968, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/movie/d33858dbfc207da3b36c0dc7fff7a8bb2028677.jpg", "version": "", "nm": "汪汪队立大功之超能救援", "preShow": false, "sc": 8.3, "globalReleased": true, "wish": 24833, "star": "杨鸥,韩娇娇,李敏妍", "rt": "2020-11-13", "showInfo": "今天5家影院放映7场", "showst": 3, "wishst": 0, "comingTitle": "11月13日 周五" }, { "id": 345809, "haspromotionTag": false, "img": "http://p1.meituan.net/w.h/moviemachine/7c4ba9633635503044a8f8fb6426aa8d416264.jpg", "version": "v2d imax", "nm": "隐形人", "preShow": false, "sc": 8.4, "globalReleased": true, "wish": 9894, "star": "伊丽莎白·莫斯,奥利弗·杰森-科恩,阿尔迪斯·霍吉", "rt": "2020-12-04", "showInfo": "今天21家影院放映30场", "showst": 3, "wishst": 0, "comingTitle": "12月4日 周五" }, { "id": 1330790, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/movie/88e54f3e670789ba1f08e48a5f1170c1188102.jpg", "version": "", "nm": "明天你是否依然爱我", "preShow": false, "sc": 0, "globalReleased": false, "wish": 217699, "star": "杨颖,李鸿其,黄柏钧", "rt": "2020-12-24", "showInfo": "2020-12-24 下周四上映", "showst": 4, "wishst": 0, "comingTitle": "12月24日 周四" }, { "id": 1277751, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/movie/303c2e671cc4df875c151d688ecbd8962085989.jpg", "version": "v2d imax", "nm": "赤狐书生", "preShow": false, "sc": 7.7, "globalReleased": true, "wish": 177525, "star": "陈立农,李现,哈妮克孜", "rt": "2020-12-04", "showInfo": "今天26家影院放映43场", "showst": 3, "wishst": 0, "comingTitle": "12月4日 周五" }, { "id": 1225578, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/moviemachine/cf7d6942f2aa9189cce20519b490b6b1879487.jpg", "version": "", "nm": "野性的呼唤", "preShow": false, "sc": 9.2, "globalReleased": true, "wish": 14703, "star": "哈里森·福特,丹·史蒂文斯,凯伦·吉兰", "rt": "2020-11-13", "showInfo": "今天暂无场次", "showst": 3, "wishst": 0, "comingTitle": "11月13日 周五" }, { "id": 1302281, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/moviemachine/1d2b4985d0187b437d41a73994ba2e191607376.jpg", "version": "", "nm": "奇妙王国之魔法奇缘", "preShow": true, "sc": 0, "globalReleased": false, "wish": 20309, "star": "卢瑶,张洋,陈新玥", "rt": "2020-12-26", "showInfo": "2020-12-26 下周六上映", "showst": 4, "wishst": 0, "comingTitle": "12月26日 周六" }, { "id": 1301902, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/movie/f686425a1ad1f502254abef593d508bf428685.jpg", "version": "", "nm": "沉默东京", "preShow": false, "sc": 5.8, "globalReleased": true, "wish": 52, "star": "佐藤浩市,石田百合子,西岛秀俊", "rt": "2020-12-04", "showInfo": "今天暂无场次", "showst": 3, "wishst": 0, "comingTitle": "" }, { "id": 1286015, "haspromotionTag": false, "img": "http://p0.meituan.net/w.h/moviemachine/a0c6d6e130abe399e4cba58be2b1f871840268.jpg", "version": "", "nm": "宝可梦：超梦的逆袭 进化", "preShow": false, "sc": 8.2, "globalReleased": true, "wish": 53255, "star": "松本梨香,大谷育江,市村正亲", "rt": "2020-12-04", "showInfo": "今天10家影院放映10场", "showst": 3, "wishst": 0, "comingTitle": "12月4日 周五" } ] }
前端：index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤器</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script> </head> <body> <div id="box"> <ul> <li v-for="item in dataList"> <h2>{{item.nm}}</h2> <p>主演：{{item.star}}</p> <img :src="item.img | repUrl" alt=""> </li> </ul> </div> </body> <script> // 过滤器 Vue.filter('repUrl', function (url) { return url.replace('w.h','128.180') }) let vm = new Vue({ el: '#box', data: { dataList: '' }, mounted() { axios.get("http://127.0.0.1:5000/").then(res => { console.log(res.data.coming) this.dataList = res.data.coming }).catch(err => { console.log(err); }) } }) </script> </html>
后端：main.py
import json from flask import Flask, jsonify app = Flask(__name__) @app.route('/') def index(): print('请求来了') with open('film.json', mode='rt', encoding='utf-8') as f: dic = json.load(f) res = jsonify(dic) res.headers['Access-Control-Allow-Origin'] = '*' return res if __name__ == '__main__': app.run()