一、概述
一个vue文件主要由三个部分组成：模板页面、js模块对象、css样式。
组件： 组件是一个局部功能界面，它包含了所有要实现这个功能界面的相关资源，如css、html等.
组件化编码的基本流程
1) 拆分界面, 抽取组件
2) 编写静态组件
3) 编写动态组件
初始化数据, 动态显示初始化界面；
实现与用户交互功能；
二、使用
以下主要演示组件化编码的过程，首先定义一个子组件HelloWorld.vue、然后在在根组件App.vue中引入子组件，
在main.js中将App.vue渲染到主页面index.jsp中去。
1. 组件化编程的步骤
(1) 首先定义一个子组件：HelloWorld.vue
<template>
<div>
<h2 class="title">{{msg}}</h2>
</div>
</template>
<script>
// 自定义一个子组件
// 这是默认的写法
// 向外默认暴露一个配置对象（与vue一直）
export default {
// data : {} // 对象，这里不可以写
data () { // data里面可以写对象，也可以写函数，但是在组件里面必须写函数
return {
msg: '第一个Vue组件'
}
}
}
</script>
<style scoped>
.title {
color: red;
background: yellow;
}
</style>
(2) 根组件App.vue：在根组件里面使用子组件,最终要将改组件渲染到index.html页面上去
<template>
<div>
<img src="./assets/logo.png" alt="logo" class="logo">
<!--3.使用组件标签-->
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue' // 1. 引入自己定义的子组件
export default {
components: { // 2.映射组件标签(通过这个配置，将子组件映射成<HelloWorld>标签，这里的HelloWorld是HelloWorld:HelloWorld的简写)
HelloWorld
}
}
</script>
<style>
.logo {
100px;
height: 100px;
}
</style>
(3) 入口js：main.js
/* 入口JS */ import Vue from 'vue' // 引入vue import App from './App.vue' // 1.引入App组件 // 创建vm实例, 最终的目的是将App组件渲染到index页面中去 /* eslint-disable no-new */ new Vue({ el: '#app', components: {App}, // 2.映射成标签：通过这个配置，将组件映射成指定名称的一个标签(即这里的标签名叫App), 这里{App}可以写成{App:App} template: '<App/>' // 3.使用组件标签：指定需要渲染到页面的模板，这个模板会插入到 '#app'中(el所匹配的页面上的div中) })
标签渲染也可以采用如下的简化写法：
/* 入口JS */ import Vue from 'vue' import App from './App.vue' import store from './store' import './base.css' // 创建vm /* eslint-disable no-new */ // new Vue({ // el: '#app', // components: {App}, // 映射组件标签 // template: '<App/>', // 指定需要渲染到页面的模板 // store // 所有的组件对象都多了一个属性: $store(值就是store对象) // }) // 这是比较简洁的写法 new Vue({ el: '#app', //箭头函数是用来定义匿名函数的，接收一个参数h, 而这个参数是函数类型的，这个是用来创建元素标签的(根据组件来创建)，这里是根据App组件来创建来创建所对应的标签<App/>, //返回的结果最终会插入到el所对应的div中去 render: h => h(App), // 渲染函数, '=>'有两个作用：代表是一个函数;代表return 这个渲染函数代替了components、template的功能 store }) // 原始方式 // new Vue({ // el: '#app', // render: function (createElement) { // return createElement(App) //更具组件创建一个元素标签，相当于返回了<App/>标签，而这个<App/>标签会被插入到'#app'中去 // }, // store // })
(4) index.html: 这个页面基本上没有做任何的配置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue_blank</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>