vue 代码格式解析（初学者必备）

这里写自定义目录标题Vue单页面与多页面的区别定义vue普遍代码格式（ts页面除外）template组件script js交互Vue单页面与多页面的区别定义SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用（一个html页面），一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅

金光乍现

5625人浏览 · 2022-04-21 16:47:27

金光乍现 · 2022-04-21 16:47:27 发布

这里写自定义目录标题

Vue单页面与多页面的区别
- 定义
vue普遍代码格式（ts页面除外）

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文件所指定的#app将vue所加载的文件挂载到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交互

.vue文件就是一个（或局部）组件，又或者说是一个对象在导出时.
export default 其实就是一个导出一个对象函数的过程，先是到main.js，最后会到index.html（script和style都是一样，会挂载到main，.vue都会进行一定意义上的转换）

style css样式

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^