<!-- 一个组件由三部分组成 -->
<template>
<!-- 页面的结构 -->
<div class="app">
<Vheader class="header">
</Vheader>
<Vcontent></Vcontent>
<Vfooter></Vfooter>
<h3>{{currentMsg}}</h3>
<img :src="imgSrc" alt="">
<ul>
<li v-for="item in getArray">
<a href="javascript">{{item}}</a>
</li>
</ul>
<button @click="clickHandler">修改</button>
</div>
</template>
<script>
//1.先引入组件
//file-loader
import imgSrc from './assets/logo.png'
import Vheader from './components/Vheader.vue'
import Vfooter from './components/Vcontent.vue'
import Vcontent from './components/Vfooter.vue'
//页面的业务逻辑
export default {
name: 'app',
data() { //data必须是一个函数
return { //必须return。
msg: "hello S9!",
starts: [
"邓超", "郑凯", "陈赫"
],
imgSrc: imgSrc, //将图片当成一个模块,引入成为对象。
}
},
methods: {
clickHandler() {
//这里跟msg紧密相关,一旦刷新页面会打印1,点击按钮msg发生
//了变化,那么这个1又打印1遍
console.log(1);
this.msg = "哈哈哈"
this.starts.push("baby")
}
},
computed: {
currentMsg() {
return this.msg
},
getArray() {
return this.starts
}
},
//2.挂载
components: {
Vheader: Vheader,
Vcontent: Vcontent,
Vfooter: Vfooter,
}
}
</script>
<style scoped>
*{
padding: 0;
margin: 0;
}
</style>