<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./vuebasic/vue.js"></script>
</head>
<body>
<div id="root">
<!--第三部引入组件标记-->
<old-movie></old-movie>
<hr>
<action></action>
</div>
<script>
Vue.config.productionTip = false;//以阻止 vue 在启动时生成生产提示。
// 第一部:创建组件:包括数据和html显示
// 创建电影组件
const oldMovie = Vue.extend({
template:`
<div>
<h2>电影:{{ movie }}</h2>
<h2>上映时间:{{ showTime }}</h2>
</div>
`,
// 用方法返回值的形式进行书写,防止一个组件更改了值另一个组件的值会更改等问题
data(){
return {
movie:'阿甘正传',
showTime:'1994年'
}
}
})
// 创建演员组件
const action = Vue.extend({
template:`
<div>
<h2>演员:{{ actor }}</h2>
<h2>地址:{{ adress }}</h2>
</div>
`,
data(){
return {
actor:'汤姆·汉克斯',
adress:'美国.旧金山'
}
}
})
new Vue({
el:'#root',
// 第二部:注册组件
components:{
oldMovie,
action
}
})
</script>
</body>
</html>