vue文件基本结构详解

1.vue简介## 标题
vue是前端的一个框架，简化了开发，在HTML时，每个页面都需要编写，vue简单来说就是一个单独的零件，准确的来说就是一个组件，需要使用它，就把它引进来用。
2.vue文件页面基本结构##

<template>
  <div>
    <div>
      <WxIndex></WxIndex>
    </div>
    <div>
      <wxc-tab-bar :tab-titles="tabTitles"
                   :tab-styles="tabStyles"
                   title-type="icon"
                   @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
      </wxc-tab-bar>
    </div>
  </div>
</template>

<style scoped>
.item-container {
  width: 750px;
  background-color: #f2f3f4;
  align-items: center;
  justify-content: center;
}
</style>
<script>
import {WxcTabBar, Utils} from 'weex-ui';
// https://github.com/apache/incubator-weex-ui/blob/master/example/tab-bar/config.js
import Config from './config'
import WxIndex from '@/pages/home/index.vue'
export default {
  components: {WxcTabBar, WxIndex},
  data: () => ({
    tabTitles: Config.tabTitles,
    tabStyles: Config.tabStyles
  }),
  created() {
    const tabPageHeight = Utils.env.getPageHeight();
    // 如果页面没有导航栏，可以用下面这个计算高度的方法
    // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
    const {tabStyles} = this;
    this.contentStyle = {height: (tabPageHeight - tabStyles.height) + 'px'};
  },
  methods: {
    wxcTabBarCurrentTabSelected(e) {
      const index = e.page;
      // console.log(index);
    }
  }
};
</script>

3.vue页面结构详解##
标签是页面的基本结构，类似于HTML页面的head里的内容，是页面所需要的标签，

本人只是对vue的简单见解，如有错误，还请大家提出来，谢谢大家