Vue单页面与多页面的区别

定义

SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用(一个html页面),一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源,vue存在一个index.html,其中类容通过,路由进行局部刷新,更新页面。

MPA多页面应用(MultiPage Application),指有多个独立页面的应用(多个html页面),每个页面必须重复加载js、css等相关资源。多页应用跳转,需要整页资源刷新,多个html页面,每次加载都会多次重复加载功能的数据。

vue普遍代码格式(ts页面除外)

然后再对比下面图片,是不是很像,下面一个注册一个组件需要 template js,所以说,.vue文件就是一个组件,或者一个对象

页面结构大致分为:

  • template
  • script
  • style

.vue文件就是一个(或局部)组件,又或者说是一个对象在导出时

Vue.createApp({ app }) app是一个.vue文件,里面包括 三个部分template 和 js css

就如下代码,export default最终会挂载到main.js

// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

template组件

vue属于SPA单页面应用 采取的是一个html,局部刷新组件的方法进行开发,可以有多个vue文件,根据引入的不同的vue文件进行局部加载刷新页面

  • 正常书写一个html页面,按照html页面规范,分为body、script、style,引入页面插入body中的div组件
    在这里插入图片描述

  • 指定html中所定义的组件id进行局部加载的引入,main.js属于vue整体文件的汇总,通过vue文件所指定的#appvue所加载的文件挂载到index.html
    在这里插入图片描述

  • template 属于vue自定义的模板引擎,可以自定义书写html代码

  • template标签:其内容隐藏在客户端之外

  • 该内容在加载页面是不会呈现,不会渲染出任何信息

  • 相当于自带属性:template {display: none;}

<style>
    template{
        display: block;
        width: 100px;
        height: 100px;
        background: antiquewhite;
    }
</style>
<body>
    <template>
    <!-- 该标签内容依旧是不可见的 -->
        内容模板元素
    </template>
</body>

可以看做在js中书写dom,在通过vue转置为template,挂载到dom上进行展示,只是当项目越来越大,里面的变化也会越来越多

<body>
    <div id="app">

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="x-template" id="tem">
    <h1>我是模板</h1>
</script>
<script>
    var app = new Vue({
        el:"#app",
        template:"#tem"
    })
</script>

在这里插入图片描述

script js交互

  1. .vue文件就是一个(或局部)组件,又或者说是一个对象在导出时.
  2. export default 其实就是一个导出一个对象函数的过程,先是到main.js,最后会到index.html(script和style都是一样,会挂载到main,.vue都会进行一定意义上的转换)
    在这里插入图片描述

style css样式

  1. .vue文件引入style标签,和html里面的style是一样的属性,只是里面加入了一些特定的属性。
  2. scoped.vue文件本身的存在组件的属性,当挂载到main.js的时候,所有css样式都是共享的,所以添加了scoped属性,表示这个style标签里面的css只会应用到当前的组件
  3. lang属性 lang是language语言的简写,可以用来指定style里用哪种css语言,如果没有这个属性,那么style里就是普通的css,如果我们使用css预编译语言,比如scss或者less,或者stylus,可以指定
  4. 在一个.vue单文件组件中,可以写多个style标签
Logo

前往低代码交流专区

更多推荐