vue文件结构

偏执的太偏执、 2023-02-21 14:26 74阅读 0赞

.vue 文件的基本结构是：

<template>
           ........
    </template>
    
    <script>
        export default {
            name: "demo"
    
        }
    </script>
    
    <style scoped>
    
        .demo {
              font-size: 28px;
        }
    
    </style>

上面template标签，我们都知道是用来写 html 模板的，且内部必须只有一个根元素，像这样（不然报错）

但有时候我们也会看到，这样的写法，在template上使用for循环：

<template>
        <div class="root">
            
            <template v-for="item,index in 5">
                <div>{
       {index}}---{
       {item}}</div>
            </template>
        </div>
    </template>

下面我们来看一下template是什么:

<template>
        <div class="root">
            <template>看看外面的标签是什么</template>
        </div>
    </template>

在浏览器中解析完的结果：

![format_png][]

可以看到文字外面是 div.root  ，所以本质上的标签并没有什么意义。

所以我们再来看一下刚才的循环：

<template>
        <div class="root">
    
            <template v-for="item,index in 5">
                <div>测试{
       {index}}</div>
            </template>
    
        </div>
    </template>

浏览器解析后的效果：

![format_png 1][]

可以看出这样写,类似平常这样写：

<template>
        <div class="root">
    
            <div v-for="item,index in 5">
                <div>测试{
       {index}}</div>
            </div>
    
        </div>
    </template>

但是这样循环出来会多出一层div来

![format_png 2][]

所以我们有时候,不需要这外层的 div  所以我们可以采用上面 的方法，在 标签上使用 v-for来循环。或者这样写：

<template>
        <div class="root">
    
            <div v-for="item,index in 5" :key="index">测试{
       {index}}</div>
    
        </div>
    </template>

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTI0OTAwNi8yMDE5MDQvMTI0OTAwNi0yMDE5MDQxMDIxMzQ0Mjc1OC0xMjA5ODYwMS5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTI0OTAwNi8yMDE5MDQvMTI0OTAwNi0yMDE5MDQxMDIxMzkxMTc3My0xNDM1MTYyNzc1LnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTI0OTAwNi8yMDE5MDQvMTI0OTAwNi0yMDE5MDQxMDIxNDUwNzMwMC01OTk2MTU5MDUucG5n?x-oss-process=image/format,png