vue小白,请问这个.vue文件中,template标签和导入的样式是如何起作用的?

国家战略忽悠局
  • 373

这个文件在一个用vue-cli生成的项目的组件文件夹下。
template标签没有任何的标识符,比如id,我想请教vue是怎么知道要引用这个template标签里的模板呢?

<template>
  <div class="main">
    <div class="logo">
      <h1>
        <img src="../../static/image/u9.jpg" alt="xxxx" class="logo-bd">
      </h1>
    </div>
    <div class="slogan">
      <img src="../../static/image/u27.png" alt="xxxx">
    </div>
    <p class="version">Ver 1. 0. 20180102.1</p>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {Methods} from '../const/common';

  export default {
    name: "start",
    computed: {
      ...mapState(['moduleState'])
    },
    mounted() {
      setTimeout(function () {
        this.moduleState.start = false
      }.bind(this), 2000);
    },
    beforeCreate() {
      Methods.getStoryList.call(this);
    }
  }
</script>
<style scoped>
  @import "../style/css/start.css";
</style>
评论
阅读 3.2k
3 个回答

.vue文件经过vue-loader的解析

template标签内的内容会经过vue-loader解析成vue的渲染函数(也就是js)然后再给babel然后在后面一堆

script 里面的东西-> vue-loader -> babel —> 其他

style -> vue-loader -> 对应CSS处理器->其他

然后再输出到JS 或者 CSS 最后引入到html

template我的理解它就是一个片段标志,它不参与编译,vue把一整个页面分成几个片段,这几个片段各自编译渲染完之后凑在一起就是我们想要的页面,scoped也是为了防止样式之间相互污染。css就和以前一样正常引入用的。

附上官网template的解释地址
https://cn.vuejs.org/v2/api/#...

楼上正解 .vue文件通过vue-loader进行处理

宣传栏