一、
#指定组件的样式，只用组件的功能 哪里需要就在哪里放插槽： <slot></slot> 1 插槽 -在组件child中预留插槽 <div> <slot></slot> <hr> 我是首页 <slot></slot> <input type="text"> </div> -父组件中更使用 <child> 标签，数据</child> 2 具名插槽 <div> <slot name='a'></slot> <hr> 我是首页 <slot name='b'></slot> <input type="text"> </div> -父组件中更使用 <child> <div slot='a'>放到a中</div> <div slot='b'>放到b中</div> </child>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <title>Title</title> </head> <body> <div id="box"> //不使用插槽的话，child1里的内容1 2 3 4 显示不出来，哪里写了插槽就在哪里显示 <child1> <ul> <li v-for="i in 4">{{i}}</li> </ul> </child1> <hr> <child2></child2> <hr> <child3></child3> </div> </body> <script> var vm = new Vue({ el: '#box', data: { who: 'child1' }, components: { child1: { template: ` <div> <slot></slot> <hr> 我是首页 <slot></slot> </div> `, }, child2: { template: ` <div>我是商品 </div> `, }, child3: { template: ` <div>我是订单 </div> `, } } }) </script> </html>
1.2插槽小案例（
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <title>Title</title> </head> <body> <div id="box"> <child1> <button @click="isShow=!isShow">点我隐藏child2</button> </child1> <hr> <child2 v-if="isShow"></child2> </div> </body> <script> var vm = new Vue({ el: '#box', data: { isShow: true, }, components: { child1: { template: ` <div> <slot></slot> </div> `, }, child2: { template: ` <div> <ul> <li v-for="i in 4">{{i}}</li> </ul> </div> `, }, } }) </script> </html>
1.3
代码演示： 点击隐藏child2，通过名字来指定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <title>Title</title> </head> <body> <div id="box"> <child1> <button @click="isShow=!isShow" slot="button1">点我隐藏child2</button> <div slot="div1">我是div</div> </child1> <hr> <child2 v-if="isShow"></child2> </div> </body> <script> var vm = new Vue({ el: '#box', data: { isShow: true, }, components: { child1: { template: ` <div> <slot name="button1"></slot> <hr> <slot name="div1"></slot> </div> `, }, child2: { template: ` <div> <ul> <li v-for="i in 4">{{i}}</li> </ul> </div> `, }, } }) </script> </html>
二、自定义指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <title>Title</title> </head> <body> <div id="box"> <!-- <div v-mystyle> 我是div</div>--> <!-- <p v-mystyle> 0pppp</p>--> <!-- <p > sfasfsdafsd </p>--> <div v-mystyle="'green'"> 我是div</div> <div v-mystyle="'red'"> 我是div</div> <div v-mystyle="color"> 我是div</div> </div> </body> <script> //自定义指令,不需要写v使用的时候，加上v-名字 // Vue.directive('mystyle', { // inserted() { //在标签上使用这个指令，就会触发inserted的执行 // console.log('我执行了') // }, // }) //只要使用了我的指令，背景就变红色 // Vue.directive('mystyle', { // inserted(ev) { //ev就是dom对象 // ev.style.background='red' // }, // }) //只要使用了我的指令，背景就变成我传入的颜色 Vue.directive('mystyle', { inserted(ev, color) { //ev就是dom对象 console.log(ev) console.log(color.value) ev.style.background = color.value }, update(el, input) { el.style.background = input.value } }) var vm = new Vue({ el: '#box', data: { color: 'red' }, }) </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()