目录
四 在vue 组件中使用多个 vue 组件搭建一个页面——全局注册
五 在vue 组件中使用多个 vue 组件搭建一个页面——本地注册
1 Header.vue、content.vue和bottom.vue文件内容不变
一 项目内结构
1 index.html
无论前端页面内容多复杂,index.html都只有11行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>myvuedemo</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
实际的内容已经被打包进了 /dist/build.js。
2 main.js文件是整个 vue 项目的入口 js
import Vue from 'vue'
// 导入了 APP.vue 组件
import App from './App.vue'
new Vue({
// 让当前 vue 对象绑定页面上的id是app的那个div
el: '#app',
// 让 App.vue 的内容展现在该 div 中
render: h => h(App)
})
3 App.vue
App.vue 这种以“.vue”为扩展名的文件,实际上就是一个 Vue 对象,这种文件,也称为 Vue 组件。
二 Vue文件的组成部分
<!-- 表示HTML :template 必须有一个根节点。-->
<template>
<div>
</div>
</template>
<!-- 表示JS -->
<script>
<!-- 暴露一个默认 Vue 对象 -->
export default {
// 对象名
name: 'app',
// 数据部分
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
// 方法部分
methods:{},
// 计算属性部分
computed:{},
// 监听部分
watch:{}
}
</script>
<!-- 表示CSS -->
<style scoped>
</style>