vue学习笔记二
vue 组件化的开发体验
组件的创建和注册
- 什么是组件
组件是页面中的一个可复用的功能单元
- vue中的组件
组件的创建：组件对于开发者，是一个普通的配置对象，该配置对象几乎和之前学习的vue配置一致。
组件的注册：
- 全局注册
- 局部注册: 在使用的组件会vue实例配置中通过components注册
原则：除了全局通用的组件，并且经常用到的组件使用全局注册，否则尽量局部注册
组件名称的规范，以下命名方式任选其一：
- 使用短横线命名
- 大驼峰命名法
组件的使用：把组件当作标签使用即可，标签名任选其一
- 短横线命名法
- 大驼峰命名法
组件可以嵌套重复使用，因此，会形成一个组件树，树的根叫做根组件
例如下面的例子的组件关系如下：
vue 组件间的数据通信
prevent修饰符用于v-on指令，表示阻止默认行为
stop修饰符用于v-on指令，表示阻止事件冒泡
组件的状态和属性
通常讲组件中需要自身管理的数据（组件配置中的data），叫做组件状态（component state）
组件状态只能在组件内部使用，外部原则上不可以使用
- data（state 状态）在组件中的配置和在vue实例中的配置的区别：
在组件中data必须是一个函数，而vue实例中必须是一个对象
- 组件中可以有属性（component props），而vue实例中没有
声明组件属性时，使用短横线或小驼峰命名法
传递组件属性时，使用短横线或小驼峰命名法
属性会被提升到vue组件实例中
组件的属性是只读的，不允许更改，根本原因是要保证单向数据流
key是内置属性，当循环渲染自定义组件时，建议使用该属性，并且提供给唯一的值，通常是id，以便vue提高渲染效率
自定义事件
在组件中触发事件：this.$emit("事件名", 事件参数...)
当一个组件状态发生变化时，该组件会重新渲染，在渲染的过程中，可能会导致其子组件的属性发生变化，而属性的变化会导致组件重新渲染。但根本原因，是状态的变化。
v-model的本质是一个语法糖，实际上，是绑定value属性，同时监听input事件
coding example：
效果图：
code：
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./assets/index.css">
</head>
<body>
<div id="app"></div>
<script src="./assets/vue.js"></script>
<script src="./test/index.js" type="module"></script>
</body>
</html>
- index.css
.pager {
text-align: center;
margin-bottom: 100px;
}
.pager .pager-item {
display: inline-block;
padding: 5px 7px;
border: 1px solid #ccc;
margin: 8px;
cursor: pointer;
color: rgb(96, 96, 224);
}
.pager .pager-item.disabled {
color: #ccc;
cursor: not-allowed;
}
.pager .pager-item.active {
color: #f40;
border: none;
cursor: auto;
}
.data-container {
width: 1000px;
margin: 30px auto;
}
.data-container .data{
overflow: hidden;
border-bottom: 1px dashed #ccc;
padding: 30px 0;
}
.data-container .poster{
width: 150px;
height: 200px;
float: left;
margin-right: 20px;
}
.data-container .poster img{
width: 100%;
height: 100%;
}
.data-container .words{
overflow: hidden;
line-height: 1.5;
}
.data-container .words .title{
margin: 0;
margin-bottom: 10px;
}
.data-container .words .attach{
color: #888;
font-size: 14px;
line-height: 1.5;
margin-bottom: 10px;
}
.data-container .words .attach span{
margin-right: 20px;
}
.data-container .words .desc{
color: #666;
}
- index.js
import App from "./app.js"
new Vue({
template: '<App />',
components:{
App
},
el:"#app"
})
- app.js
import Pager from "./Pager.js"
import MovieList from "./movieList.js"
import Movies from "./mockDatas.js"
//跟组件，整个页面的内容靠该组件完成
const template = `
<div>
<MovieList :movies="pageMovies" />
<Pager
v-model="current"
:total="total"
:pageSize="pageSize"
:panelNumber="5"
/>
</div>
`
export default {
template,
data(){
return{
current:1,
total:Movies.length,
pageSize: 2,
allMovies: Movies
}
},
computed:{
pageMovies () {
return this.allMovies.slice(
(this.current - 1) * this.pageSize,
this.current * this.pageSize);
}
},
components:{
MovieList,
Pager
}
}
- pager.js
const template = `
<div class="pager">
<a @click="changePage(1)" class="pager-item" :class="value===1 ? 'disabled': ''">首页</a>
<a @click="changePage(value-1)" class="pager-item" :class="{disabled:value===1}">上一页 </a>
<a class="pager-item" @click="changePage(item)" :class="{active: item=== value}" v-for="item in numbers">
{{item}}
</a>
<a href="" @click.prevent="changePage(value+1)" class="pager-item" :class="value===pageNumber ? 'disabled': ''">下一页</a>
<a @click="changePage(pageNumber)" class="pager-item" :class="{disabled:value===pageNumber}">尾页 </a>
<span class="pager-text">
<i>{{value}}</i>
/
<i>{{pageNumber}}</i>
</span>
</div>
`
export default {
template,
props:{
value: {
type: Number,
default: 1
}, //当前页码
total: {
type: Number,
required: true
}, //总数据量
pageSize:{
type: Number,
default: 10
},//页容量
panelNumber: {
type: Number,
default:5
}
},
computed:{
pageNumber(){
return Math.ceil(this.total/this.pageSize);
},
numbers(){
//用于得到显示在页面页数的数组
var min = this.value-Math.floor(this.panelNumber/2);
if(min<1){
min=1;
}
var max = min +this.panelNumber;
if(max>10){
max = 10;
}
const arr =[];
for(let i =min;i<=max; i++) {
arr.push(i);
}
return arr;
}
},
methods:{
changePage(newPage){
if(newPage<1){
newPage = 1;
}
if(newPage>this.pageNumber){
newPage =this.pageNumber;
}
//this.value = newPage; //不可以更改属性
//应该变页码了，但由于数据不是我的，我不能改，所以，只触发事件，让父组件(使用这个组件)收到
this.$emit("input",newPage)
}
}
}
- movieList.js
import Movie from "./movie.js"
const template = `
<div>
<Movie v-for="item in movies" :key="item._id" :data="item" />
</div>
`
export default{
template,
components:{
Movie
},
props: {
movies:{
type: Array,
default:() => []
}
},
}
- movie.js
const template = `
<div class="data">
<div class="poster">
<img :src="data.poster" alt=""></div>
<div class="words">
<h2 class="title" >{{data.name}}</h2>
<div class="attach">
<span @click="con()">英文名：{{data.ename}}</span>
<span>类型：{{data.type}}</span> <br>
<span>上映地区：{{data.area}}</span>
<span>上映时间：{{data.upDate}}</span>
<span>时长：{{data.time}}</span>
</div>
<div class="desc">
{{data.intro}}
</div></div>
</div>
`;
export default {
template,
props: ["data"],
methods:{
con(){
console.log(this.data.name)
}
}
}
- mockDatas.js
export default [
{ "_id": "5c25ddba5a165113265510ef",
"name": "午夜整容室",
"ename": "PaintedSkin: The Double Mask",
"type": "恐怖,惊悚",
"area": "中国大陆",
"time": "85分钟",
"poster": "https://p0.meituan.net/movie/5581cf675d3d623685328facc05abd933568286.jpg@464w_644h_1e_1c",
"upDate": "2018-12-14",
"score": 8.2,
"count": "15亿",
"intro": "最近龙泉的一所“废弃整容医院”，突然变成网红，只因前几年这家整形医院因为整容事故造成一个女孩离奇死亡，随后这家医院的工作人员频繁失踪等灵异事件，不久医院废弃了，在这之后经常有人听到里面有女孩声嘶力竭的哭叫声……", "createTime": "2018-12-28T08:24:26.662Z", "updateTime": "2019-01-09T10:40:32.954Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510e3", "name": "命运之夜——天之杯：恶兆之花", "ename": "Fate/stay night [Heaven’s Feel]i.presage flower", "type": "剧情,动画,悬疑", "area": "日本", "time": "119分钟", "poster": "https://p0.meituan.net/movie/9ef2613395eed698322cdc46ca3f34072433474.jpg@464w_644h_1e_1c", "upDate": "2019-01-11", "score": 9, "count": "8亿", "intro": "圣杯是传说中可实现持有者一切愿望的宝物，7位Master和7位Servant为了得到圣杯而相互厮杀的仪式被称为圣杯战争。第五次圣杯战争中最关键的人物——间桐樱，父亲时臣为不浪费她的魔术回路将她过继给间桐家。她被间桐脏砚植入了数百的刻印虫，忍受着从肉体到精神上的巨大痛苦。 对间桐樱所隐瞒的状况一无所知的卫宫士郎和间桐樱终于确定了恋爱的关系，然而间桐樱却依然要忍受体内的腐蚀以及间桐慎二残忍的虐待；另一方面，间桐樱的姐姐远坂凛却展现着她在方方面面超越樱的优秀，甚至对卫宫士郎的态度也逐渐暧昧，在这基础之上，间桐樱的自卑与痛苦终于变成了仇恨，孕育在魔力源之中的恶魔瞬间控制了她的内心。", "createTime": "2018-12-28T08:24:26.662Z", "updateTime": "2019-01-09T10:40:31.793Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510f5", "name": "断片之险途夺宝", "ename": "The Morning After", "type": "喜剧,冒险", "area": "中国大陆", "time": "95分钟", "poster": "https://p1.meituan.net/movie/39d9a68afcf3499dc142dc10ac4aaa291548254.jpg@464w_644h_1e_1c", "upDate": "2018-12-29 08:00", "score": 6.7, "count": "22亿", "intro": "卖鱼大叔牙叔（葛优 饰）、海豚训练员阿乐（岳云鹏 饰）和海洋馆保安治国（杜淳 饰）在一场大醉之后的荒诞冒险。牙叔、阿乐、治国因生活中的不顺聚在海洋馆喝酒，大醉之后竟然把海洋馆大明星海豚“宝宝”卖到了国外。为了将海豚宝宝找回来，挽回他们在断片之后的“冲动之举”，三人一起踏上“奇葩冒险之旅”，辗转多地，遇到了各种奇人怪事，发生了许多令人啼笑皆非的故事。", "createTime": "2018-12-28T08:24:26.662Z", "updateTime": "2019-01-09T10:40:31.354Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510dd", "name": "蜘蛛侠：平行宇宙", "ename": "Spider-Man: Into the Spider-Verse", "type": "动画,动作,科幻", "area": "美国", "time": "116分钟", "poster": "https://p1.meituan.net/movie/bb84bede1711265dab1136f7a3dddc782801232.jpg@464w_644h_1e_1c", "upDate": "2018-12-21", "score": 8.2, "count": "20亿", "intro": "蜘蛛侠不止一个！漫威首部超英动画巨制《蜘蛛侠：平行宇宙》将经典漫画与CGI技术完美呈现，讲述了普通高中生迈尔斯·莫拉斯如何师从蜘蛛侠彼得·帕克，成长为新一代超级英雄的故事。影片中迈尔斯和从其它平行宇宙中穿越而来的彼得、女蜘蛛侠格温、暗影蜘蛛侠、潘妮·帕克和蜘猪侠集结成团，六位蜘蛛侠首次同框大银幕，对抗蜘蛛侠宇宙最强反派。", "createTime": "2018-12-28T08:24:26.632Z", "updateTime": "2019-01-10T01:13:05.136Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510cb", "name": "海王", "ename": "Aquaman", "type": "动作,冒险,奇幻", "area": "美国", "time": "143分钟", "poster": "https://p0.meituan.net/movie/c106904da68edd848afd4a320976d051346321.jpg@464w_644h_1e_1c", "upDate": "2018-12-07", "score": 8.7, "count": "29亿", "intro": "海王（杰森·莫玛 饰）是美国DC漫画旗下超级英雄，本名亚瑟·库瑞，是海底之国亚特兰蒂斯的皇后和美国海边一个灯塔看守人的私生子，拥有半人类、半亚特兰蒂斯人的血统，从小就展现出了远超常人的各项体能，以及能在水下自由活动与呼吸，并和海洋生物沟通等异于他人的能力，在前任亚特兰蒂斯国王死后，王位空缺，其母派人找到他，加冕其为亚特兰蒂斯国王、掌管七海，并被赋予了亚特兰蒂斯王权的象征，能操控大海力量，掀起风浪的三叉戟，后与超人、蝙蝠侠等人创立正义联盟，成为正义联盟七大创始人之一。", "createTime": "2018-12-28T08:24:26.582Z", "updateTime": "2019-01-09T10:40:30.534Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510bf", "name": "地球最后的夜晚", "ename": "Long Day's Journey Into Night", "type": "剧情,爱情,悬疑", "area": "中国大陆", "time": "140分钟", "poster": "https://p0.meituan.net/movie/147d6b456b1b62a0507288c5f7369772929342.jpg@464w_644h_1e_1c", "upDate": "2018-12-31", "score": 8.2, "count": "4亿", "intro": "罗紘武（黄觉 饰）因父亲离世再次回到贵州。12年前，好友白猫（李鸿其 饰）被杀，罗紘武在追查凶手左宏元（陈永忠 饰）的过程中，被凶手的情人万绮雯（汤唯 饰）所利用。从此以后，这个神秘的女人构成了他所有的记忆、欲望、信念和梦魇，一段追寻之旅让他发现了被隐藏多年的秘密……", "createTime": "2018-12-28T08:24:26.582Z", "updateTime": "2019-01-09T10:40:30.100Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510d1", "name": "武林怪兽", "ename": "Kung Fu Monster", "type": "喜剧,动作,武侠", "area": "中国大陆,中国香港", "time": "104分钟", "poster": "https://p0.meituan.net/movie/9b3c1b3a7729058950d08be30e9fffe0611181.jpg@464w_644h_1e_1c", "upDate": "2018-12-21 08:00", "score": 6.1, "count": "19亿", "intro": "明朝万历年间，东厂督主孙玉鹤（方中信 饰）奉命前往仙霞山捉拿宫中逃走的怪兽；与此同时，义军少侠甄剑（陈学冬 饰）和师妹熊娇娇（周冬雨 饰）、侠女冷冰冰（郭碧婷 饰）合谋聚集了一帮绿林好汉在花田驿准备劫取一笔价值不菲的官银。未曾想，官银不翼而飞，却迎来了朝廷钦犯封四海（古天乐 饰）、江湖浪子武柏（包贝尔 饰）……更大的危机在于，怪兽就在附近窥视着这一切……", "createTime": "2018-12-28T08:24:26.582Z", "updateTime": "2019-01-09T10:40:29.734Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510c5", "name": "印度暴徒", "ename": "Thugs Of Hindostan", "type": "喜剧,动作,冒险", "area": "印度", "time": "121分钟", "poster": "https://p0.meituan.net/movie/84f5bb5f7fb0191298d0e3e734b0fde64754356.jpg@464w_644h_1e_1c", "upDate": "2018-12-28 19:00", "score": 7.8, "count": "5亿", "intro": "故事的背景是在1795年东印度公司殖民统治印度期间，殖民统治者想要抓住反抗组织”阿扎德“的领袖（阿米特巴·巴强 饰）于是找来了混混弗朗基（阿米尔·汗 饰）充当间谍，但弗朗基在潜伏过程中却有了另外的想法，一段充满了意料之外的动作冒险故事由此展开.....", "createTime": "2018-12-28T08:24:26.582Z", "updateTime": "2019-01-09T10:40:28.868Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510d7", "name": "中国合伙人2", "ename": "Fighting Men of China", "type": "剧情", "area": "中国大陆", "time": "123分钟", "poster": "https://p1.meituan.net/movie/4271d335b8d85325345b2e8cb1bc6ba22020157.jpg@464w_644h_1e_1c", "upDate": "2018-12-18", "score": 8, "count": "26亿", "intro": "影片讲述了从九十年代末到当下的近二十年期间，互联网行业在中国从发轫、发展到行业泡沫再到高速爆发行业成熟的过程。影片选取了三位有代表的行业人物，程序员楚振辉（赵立新 饰）、秦磊（凌潇肃 饰）和投资人徐顺之（王嘉 饰）。影片围绕楚振辉、秦磊，并以徐顺之的视角展现了一个程序员向创业者的蜕变，讲述他们三人在互联网大潮中创业、守业以及行业升级的故事，表现了中国互联网人的中国精神和民族情怀。他们将成为新时代的中国合伙人，而中国互联网行业的创业热血正在继续生生不息。", "createTime": "2018-12-28T08:24:26.582Z", "updateTime": "2019-01-09T10:40:27.874Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510b9", "name": "你好，之华", "ename": "Last Letter", "type": "剧情,爱情", "area": "中国大陆", "time": "114分钟", "poster": "https://p1.meituan.net/movie/4765ab3397f42fd7f26b30c845bb2a2e7592633.jpg@464w_644h_1e_1c", "upDate": "2018-11-09", "score": 7.3, "count": "20亿", "intro": "有人慌张得见面，有人简单地告别。姐姐袁之南离世的那个清晨，只匆匆留下一封信和一张同学会邀请函。妹妹之华(周迅 饰)代替姐姐参加，却意外遇见年少时的倾慕对象尹川（秦昊 饰）。往日的记忆在苏醒，但再次相见，已物是人非。", "createTime": "2018-12-28T08:24:26.556Z", "updateTime": "2019-01-10T08:36:32.623Z", "isHot": false, "isComing": false, "isClassic": true },
{ "_id": "5c25ddba5a1651132655113e", "name": "来电狂响", "ename": "Kill Mobile", "type": "恐怖,惊悚,战争", "area": "中国大陆", "time": "103", "poster": "https://p1.meituan.net/movie/a596474c1c29118d908d1eff0fd4293f1017066.jpg@464w_644h_1e_1c", "upDate": "2019-01-10", "score": 8.9, "count": "21亿", "intro": "七位好友在聚会中玩了一个游戏，将手机交出，分享所有来电、短信、微信、甚至广告弹窗，掀开了一场啼笑皆非的情感风暴。", "createTime": "2018-12-28T08:24:26.974Z", "updateTime": "2019-03-15T05:55:23.292Z", "isHot": false, "isComing": false, "isClassic": true }, { "_id": "5c25ddba5a1651132655112c", "name": "大黄蜂", "ename": "BUMBLEBEE", "type": "动作,冒险,科幻", "area": "美国", "time": "114分钟", "poster": "https://p1.meituan.net/movie/426f1f3f1b145f763b75a60c7c39c44a535093.jpg@464w_644h_1e_1c", "upDate": "2019-01-04", "score": 7.9, "count": "18亿", "intro": "故事回到1987年，疲于奔命的大黄蜂在一个加州海岸小镇的废弃场找到避难所，一位女孩查莉（海莉·斯坦菲尔德 饰）即将届满18岁，对未来毫无头绪，却无意间发现了伤痕累累、濒临死亡的大黄蜂，查莉救活了他，但她很快就发现他并不只是一台普通的黄色福斯金龟车。", "createTime": "2018-12-28T08:24:26.974Z", "updateTime": "2019-03-15T05:55:24.061Z", "isHot": false, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a16511326551117", "name": "绿毛怪格林奇", "ename": "The Grinch", "type": "喜剧,动画,家庭", "area": "美国", "time": "90分钟", "poster": "https://p0.meituan.net/movie/3e073bbe2abbdad57f6768270acbb6d85873182.jpg@464w_644h_1e_1c", "upDate": "2018-12-14", "score": 7.7, "count": "19亿", "intro": "在遥远的松饼山上，有一个胡谷镇，镇民们最爱的圣诞节眼看就要到了，镇上张灯结彩，喜气洋洋。然而，在胡谷镇以北的一个垃圾山上，住着一个人人都害怕的“怪物”——格林奇（本尼迪克特·康伯巴奇 配音）。他决定要报复镇民，在圣诞节那天，他带上他的狗麦克斯，乔装成圣诞老人和驯鹿的样子，悄悄地潜入胡谷镇……", "createTime": "2018-12-28T08:24:26.937Z", "updateTime": "2019-03-15T05:55:25.231Z", "isHot": true, "isComing": false, "isClassic": false }, { "_id": "5c25ddba5a1651132655111d", "name": "网络谜踪", "ename": "Searching", "type": "剧情,悬疑,犯罪", "area": "美国,俄罗斯", "time": "103分钟", "poster": "https://p0.meituan.net/movie/da4eb7b46debc0ee54ec7b5ff371198c944440.jpg@464w_644h_1e_1c", "upDate": "2018-12-14", "score": 6, "count": "6亿", "intro": "工程师大卫·金（约翰·赵 饰）一直引以为傲的16岁乖女玛戈特（米切尔·拉 饰）突然失踪。前来调查此案的警探怀疑女儿离家出走。不满这一结论的父亲为了寻找真相，独自展开调查。他打开了女儿的笔记本电脑，用社交软件开始寻找破案线索。大卫必须在女儿消失之前，沿着她在虚拟世界的足迹找到她……", "createTime": "2018-12-28T08:24:26.937Z", "updateTime": "2019-03-15T05:55:26.256Z", "isHot": true, "isClassic": false, "isComing": false }, { "_id": "5c25ddba5a16511326551123", "name": "叶问外传：张天志", "ename": "MASTER Z:THE IP MAN LEGACY", "type": "动作", "area": "中国大陆,中国香港", "time": "107分钟", "poster": "https://p1.meituan.net/movie/4eb3bb083ccedc99fe2dd5febffe1ded1418012.jpg@464w_644h_1e_1c", "upDate": "2018-12-21 08:00", "score": 7.7, "count": "11亿", "intro": "作为《叶问》系列影片，电影《叶问外传：张天志》延续了《叶问3》的故事，讲述了同为咏春传人的张天志在比武惜败叶问后，决意放下功夫、远离江湖纷争，但面对接踵而至的连番挑衅，面对家国大义遭受的恶意侵犯，决定重拾咏春惩戒毒贩、“以武之道”捍卫民族道义尊严的故事。张晋联合杨紫琼、托尼·贾、戴夫·巴蒂斯塔、郑嘉颖等中外最强功夫打星阵容，为观众呈现咏春、泰拳、西洋拳、洪拳、少林等中外功夫的“硬杠”对抗。影片突破银幕上常见的英雄形象，不仅让观众看到一名“失意英雄”的重新崛起，更能在一场场精心设计的打戏中体会高手间的彼此试探、挚友间的切磋较量、正义中的胜负抗衡……作为2018年圣诞元旦档唯一一部武打动作片，《叶问外传：张天志》势必为观众奉上2018最硬的一场功夫盛宴。", "createTime": "2018-12-28T08:24:26.937Z", "updateTime": "2019-01-16T09:44:21.877Z", "isHot": false, "isComing": false, "isClassic": false }, { "_id": "5c25ddba5a165113265510fb", "name": "无名之辈", "ename": "A Cool Fish", "type": "剧情,喜剧,犯罪", "area": "中国大陆", "time": "108分钟", "poster": "https://p0.meituan.net/movie/3e7696319c840d4890e947b926259d532809641.jpg@464w_644h_1e_1c", "upDate": "2018-11-16", "score": 8.8, "count": "30亿", "intro": "在一座山间小城中，一对低配劫匪、一个落魄的泼皮保安、一个身体残疾却性格彪悍的残毒舌女以及一系列生活在社会不同轨迹上的小人物，在一个貌似平常的日子里，因为一把丢失的老枪和一桩当天发生在城中的乌龙劫案，从而被阴差阳错地拧到一起，发生的一幕幕令人啼笑皆非的荒诞喜剧。", "createTime": "2018-12-28T08:24:26.889Z", "updateTime": "2019-01-16T09:44:23.626Z", "isHot": false, "isClassic": false, "isComing": false }, { "_id": "5c25ddba5a16511326551101", "name": "龙猫", "ename": "となりのトトロ", "type": "动画,冒险,奇幻,家庭", "area": "日本", "time": "86分钟", "poster": "https://p0.meituan.net/movie/c304c687e287c7c2f9e22cf78257872d277201.jpg@464w_644h_1e_1c", "upDate": "2018-12-14", "score": 7.2, "count": "13亿", "intro": "小月（日高法子 配音）的母亲（岛本须美 配音）生病住院了，父亲（糸井重里 配音）带着她与四岁的妹妹小梅（坂本千夏 配音）到乡间居住。她们对那里的环境都感到十分新奇，也发现了很多有趣的事情。她们遇到了很多小精灵，她们来到属于她们的环境中，看到了她们世界中很多的奇怪事物，更与一只大大胖胖的龙猫（高木均 配音）成为了朋友。龙猫与小精灵们利用他们的神奇力量，为小月与妹妹带来了很多神奇的景观，令她们大开眼界。妹妹小梅常常挂念生病中的母亲，嚷着要姐姐带着她去看母亲，但小月拒绝了。小梅竟然自己前往，不料途中迷路了，小月只好寻找她的龙猫及小精灵朋友们的帮助。", "createTime": "2018-12-28T08:24:26.889Z", "updateTime": "2019-01-16T09:44:22.757Z", "isHot": false, "isComing": false, "isClassic": false }, { "_id": "5c25ddba5a1651132655110d", "name": "奎迪：英雄再起", "ename": "Creed II", "type": "剧情,动作", "area": "美国", "time": "130分钟", "poster": "https://p0.meituan.net/movie/c02cf9ad1f2ddfd128069738f341de53882285.jpg@464w_644h_1e_1c", "upDate": "2019-01-04", "score": 6.5, "count": "4亿", "intro": "迈克尔·B·乔丹、史泰龙、泰莎·汤普森等主演，依旧有激烈的拳赛，及水下等更繁多的训练形式。Adonis和Bianca有了孩子，年轻的拳王也逐渐感受到生活的沉重责任，洛奇越发苍老却仍谆谆善诱：“你可能输掉一切，而对手无所失去。”他的对手在最后亮相——苏联拳王德拉戈的儿子Munteanu，《洛奇4》中正是德拉戈打死了Adonis的父亲、老拳王阿波罗，又是上一代的恩怨。 《奎迪》是2015年的票房大黑马，并帮助史泰龙入围奥斯卡最佳男配，职业生涯回春。", "createTime": "2018-12-28T08:24:26.889Z", "updateTime": "2019-01-16T09:44:23.187Z", "isHot": true, "isComing": false, "isClassic": true }, { "_id": "5c25ddba5a16511326551113", "name": "四个春天", "ename": "Four Springs", "type": "爱情,家庭,纪录片", "area": "中国大陆", "time": "105", "poster": "https://p1.meituan.net/movie/5e8ddac4b2fc796cc3037d66d6e709ad395098.jpg@464w_644h_1e_1c", "upDate": "2019-01-04", "score": 9.5, "count": "25亿", "intro": "《四个春天》是一部以真实家庭生活为背景的纪录片。15岁离家，在异乡漂泊多年的导演以自己南方小城里的父母为主角，在四年光阴里，以一己之力记录了他们的美丽日常。在如诗的乐活慢生活图景中，影像缓缓雕刻出一个幸福家庭近二十年的温柔变迁，以及他们如何以自己的方式面对流转的时间、人生的得失起落。", "createTime": "2018-12-28T08:24:26.889Z", "updateTime": "2019-01-10T07:35:49.635Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510e9", "name": "毒液：致命守护者", "ename": "Venom", "type": "动作,惊悚,科幻", "area": "美国", "time": "107分钟", "poster": "https://p0.meituan.net/movie/363e3a7e614d29b2847ff4e62afcd3f42168651.jpg@464w_644h_1e_1c", "upDate": "2018-11-09", "score": 7.1, "count": "7亿", "intro": "记者埃迪·布洛克（汤姆·哈迪 饰）在调查生命基金会的最新科学实验过程中，受到不明外星物质共生体的入侵与控制，历经挣扎成为亦正亦邪的超级英雄——毒液。他将以毒攻毒，破解生命基金会的惊天阴谋，拯救世界。", "createTime": "2018-12-28T08:24:26.662Z", "updateTime": "2019-01-09T10:40:33.353Z", "isHot": true, "isComing": true, "isClassic": true },
{ "_id": "5c25ddba5a165113265510b3", "name": "印度合伙人", "ename": "Pad Man", "type": "爱情,喜剧,剧情", "area": "中国大陆,印度", "time": "134", "poster": "https://p0.meituan.net/movie/2205b5298f91edc2b072f1dbc8d4e46e5518392.jpg@464w_644h_1e_1c", "upDate": "2018-12-14", "score": 6.7, "count": "20亿", "intro": "原译名《护垫侠》，影片主人公原型是印度企业家Arunachalam Muruganantham，他发明了低成本的卫生护垫制造机，为偏远地区的贫穷家庭带去了有成本效益的女性卫生保障，给印度众多没有受过教育的女性提供了就业机会。故事讲述了印度传统风俗中，女性月事期间会被禁足，而当时卫生护垫的消费颇高不是普通家庭可以承受，为了爱妻可以获得人权自由，主人公（ 阿克谢·库玛尔 饰）顶着“变态”的舆论开始了制造卫生护垫的创业，最终成为印度当地家喻户晓的知名企业家。但是在他事业爱情双丰收时，却不忘初心回到曾经嫌弃和抛弃他的妻子身边，回到了他故乡的小村庄。", "createTime": "2018-12-28T08:24:26.546Z", "updateTime": "2019-01-10T08:37:55.872Z", "isHot": false, "isComing": false, "isClassic": true }, { "_id": "5c25ddba5a165113265510ad", "name": "生活万岁", "ename": "Hello LIfe", "type": "纪录片", "area": "中国大陆", "time": "94分钟", "poster": "https://p1.meituan.net/movie/f18a1a371e38920840b315f51e846e271016796.jpg@464w_644h_1e_1c", "upDate": "2018-11-27", "score": 7, "count": "14亿", "intro": "这是一部由程工、任长箴共同执导的现实题材电影，该电影讲述了15名普通中国人最真实的生活状态，这并无交集的十四段故事谱写着同一个世界角落的生活，它或许艰辛，或许无奈，或许也带着些许苦涩，但每个人都在默默坚持着、爱着这样的生活。", "createTime": "2018-12-28T08:24:26.541Z", "updateTime": "2019-01-10T07:35:13.022Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510a7", "name": "云南虫谷", "ename": "Mo Jin：the Worm Valley", "type": "动作,冒险", "area": "中国大陆", "time": "110分钟", "poster": "https://p1.meituan.net/movie/622e9f9a8b96ab69c02b351f48d147fd1188553.jpg@464w_644h_1e_1c", "upDate": "2018-12-29", "score": 7, "count": "3亿", "intro": "胡八一等人由于之前探险，身上出现了眼球印记，这印记带着诅咒，会危及众人性命，传闻雮尘珠能解开诅咒，而它曾经作为陪葬品安放在古滇国献王的陵墓中，胡八一等人只能深入瘴疠之地，再探古墓奇险。胡八一、王胖子、Shirley杨等人穿过遮龙山下古滇国秘密地下水道，不料遭遇千年痋术机关，成千上万个奴隶制成的“痋俑”像炸弹一样倒悬在洞顶。深入丛林之中，更是不断遭遇重重考验，但唯有冲破障碍取得雮尘珠，才能破解众人身上的诅咒…… 终于，在历经层层凶险，众人终于来到献王墓入口，然而更大的挑战也接踵而至……", "createTime": "2018-12-28T08:24:26.537Z", "updateTime": "2019-01-10T08:29:45.299Z", "isComing": false, "isHot": true, "isClassic": true }, { "_id": "5c25ddba5a165113265510a1", "name": "照相师", "ename": "The Photographer", "type": "剧情", "area": "中国大陆", "time": "112分钟", "poster": "https://p1.meituan.net/movie/03b64c266a863c74d547feaef1859eab3294680.jpg@464w_644h_1e_1c", "upDate": "2018-12-12", "score": 8.1, "count": "7亿", "intro": "中国改革开放的风雨过程令每一个家庭的经历都足以写一部长篇小说。在深圳有这样一个家庭，富有才气的年轻丈夫摄影师在商品大潮中热衷“人体艺术”，美丽而娴于世故的湖南妹妻子则无日无夜在金融圈沉迷拼搏，小儿子长大成人，带领团队痴情于他的照相软件开发，和投资欲超强的母亲强烈冲突，一个小小家庭此起彼伏发生着亲情危机，最终引出了老父亲隐藏数十年的秘密故事…… 《照相师》选取了深圳摄影世家，三代人的婚姻爱情和事业传奇，带我们第一次回到了上个世纪广东大逃港的悲惨岁月，第一次重温数万工程兵指战员就地复员建设深圳的壮丽史诗，第一次描述四百万湖南人闯荡深圳开始新生活的历史场景，第一次全景式纪念中国改革开放四十周年，长篇记载社会、家庭、夫妻、个人的创业风云，曲折跌宕，深情委婉，可歌可泣。", "createTime": "2018-12-28T08:24:26.532Z", "updateTime": "2019-01-10T01:13:10.302Z", "isHot": true, "isComing": true, "isClassic": true }, { "_id": "5c25ddba5a1651132655109b", "name": "狗十三", "ename": "Einstein & Einstein", "type": "剧情", "area": "中国大陆", "time": "121分钟", "poster": "https://p0.meituan.net/movie/feb4cd6eb054232b4851a97bbc2a66d51198036.jpg@464w_644h_1e_1c", "upDate": "2018-12-07", "score": 6.7, "count": "16亿", "intro": "13岁的少女李玩（张雪迎 饰），由于父母离异，与爷爷（智一桐 饰）奶奶（周珍 饰）生活在一起。正处于青春期的她渴望了解、陪伴和爱。在“要听话”的中国式教育里，李玩也完成了属于她的“成人礼”。电影中，父亲（果靖霖 饰）希望通过一条宠物小狗完成与女儿的和解与沟通，李玩为狗取名“爱因斯坦”，暗潮涌动的青春因“爱因斯坦”意外走失，开启了它汹涌又无奈的成长之路。", "createTime": "2018-12-28T08:24:26.527Z", "updateTime": "2019-01-10T01:13:12.296Z", "isHot": true, "isClassic": true, "isComing": true }, { "_id": "5c25ddba5a16511326551095", "name": "大路朝天", "ename": "The Connection", "type": "剧情", "area": "中国大陆", "time": "120分钟", "poster": "https://p1.meituan.net/movie/8864a146282daec99a688e5695bd4851986043.jpg@464w_644h_1e_1c", "upDate": "2018-12-22", "score": 6.8, "count": "22亿", "intro": "每一个人的生活都离不开路桥。筑路架桥的路桥工，对很多人来说却是陌生的。老路桥唐金全和江雪花如今平静地生活在雅西高速公路的两头，因为历史的原因，两个人有着难忘的过往，但是几十年不再来往。他们不是一家人，却有着一个共同牵挂的儿子唐真红。唐真红是路桥建设的指挥者，此刻，唐真红遇到了一次人生的大危机，唐金全和江雪花，这两位老路桥的生活也因此重新链接了起来。唐真红是改革开放四十年的亲历者，他到底是一个怎样的人，他自己以及故事中的每一个人都在讲述和证明这个问题。年轻的大桥分项目部经理卢桥亮出身于路桥工人家庭，1978年改革开放元年，卢桥亮出生在大桥建设工地，他的祖父与父亲都是普普通通的路桥工人。从祖辈修建石桥的历史开始，如今卢桥亮修建的是超级特大桥，这是新时代的骄傲，这是卢桥亮的骄傲。交通大学土木工程系毕业生张弛向往路桥建设者的生活，去路桥公司应聘，签定了一年工作合同，来到大渡河特大桥项目工地，成为一名年轻的技术员。但是要成为一名真正的路桥人，张驰自知要走的路很长，一年的工作合同是远远不够的！卢桥亮向张弛讲述了唐金全、江雪花、唐真红以及自己父亲路桥三代人的故事。老路桥工几十年风风雨雨的人生之路，有艰辛，有奋斗，有泪水，有温暖，从褴褛开疆到超级大工程的建设，普普通通的路桥工人，一代接一代为国家筑路架桥，创造出一个又一个奇迹，也完成了自己的人生修行。张弛一年的工作合同有了满满的收获，大桥的建设一天天接近完工，年轻的张弛也在工作中一天天地成长起来，老路桥工的故事让他感动，参与大桥建设的经历也让他确定了自己的人生之路，他要成为真正的路桥人，与路桥建设事业签一份永远的工作合同。唐真红经历了一次人生危机，继续努力向前行走。道行天下。路桥人一代接着一代，逢山开路，遇水架桥，继续创造和见证中国奇迹！", "createTime": "2018-12-28T08:24:26.518Z", "updateTime": "2019-01-10T01:14:14.846Z", "isHot": true, "isComing": true, "isClassic": true }
];
实例生命周期
-
beforeCreate：组件实例刚刚创建好之后，此时，组件实例中还没有提升任何的成员
-
created：组件实例中已经提升了该有成员，但是，此时还没有渲染页面的任何内容
-
beforeMount: 组件即将进行渲染，但是还没有进行渲染，此时，已经编译好模板，渲染的所有条件已经满足
-
mounted：【重要！！！】，组件已经完成了渲染(页面可见)
-
此时，等待组件更新（当一个组件的属性或状态发生变化的时候，会自动重新渲染）
-
beforeUpdate：组件即将更新，还没有更新，此时，得到的数据是新的，但是界面是旧的
-
updated：组件已经完成更新，此时数据和界面都是新的
-
beforeDestroy: 当组件即将被销毁时
-
destroyed：当组件已经被销毁后
coding example
在学习笔记三中的app.js 测试了这几个函数(beforeCreate、created、beforeMount、mounted)，代码如下：
import pager from "./components/pager.js"
import movies from "./components/movieList.js"
import movieService from "./services/movieService.js"
import loading from "./components/loading.js"
const template = `
<div id="test">
<movie-list :datas="datas"></movie-list>
<pager
:value="page"
@input="handlePageChange"
:total="total"
:page-size="pageSize"
:panelNumber="5"
></pager>
<loading :show="isLoading"/>
</div>
`;
export default {
data() {
return {
page: 1,
total: 0,
pageSize: 3,
isLoading: false,
datas: []
}
},
beforeCreate(){
console.log(this.page);
},
created(){
console.log(this.page);
console.log(document.getElementById("test"));
},
beforeMount(){
console.log(document.getElementById("test"));
},
mounted() {
console.log(document.getElementById("test"));
this.setMovies();
},
methods: {
async setMovies() {
this.isLoading = true;
window.onscroll = (e) => e.preventDefault();
let datas = await movieService.getMovies(this.page, this.pageSize);
this.total = datas.total;
this.datas = datas.datas;
this.isLoading = false;
},
handlePageChange(newPage) {
this.page = newPage;
this.setMovies();
}
},
components: {
pager,
movieList: movies,
loading
},
template
}
四个函数分别打印出来的内容如下：
插槽
插槽（slot）位置放置的是：使用组件时传递的元素内容
例如在制作蒙层时所用(app.js <--- loading.js <--- modal.js)
loading.js
import modal from "./modal.js"
const template = `
<modal v-if="show">
<div class="loading">
加载中...
</div>
</modal>
`;
export default {
template,
props: {
show: {
default: false
}
},
components: {
modal
}
}
modal.js
const template = `
<div class="modal">
<div class="center">
<slot></slot>
</div>
</div>
`;
export default {
template
}
其中在modal.js中有slot，所以在其父组件loading.js中的
浙公网安备 33010602011771号