持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章vue知识点总结（三）—— 组件生命周期中，我们学习了vue相关知识点，包括组件的各个生命周期、ref、动态组件、keep-alive等相关知识点。今天，在这篇文章中，vue其他的相关知识点，包括插槽、v-model语法糖、单页面应用程序等相关知识点。
插槽
插槽用于替换内容 / 发布内容。举个例子，有一辆车子，它存放发动机的位置留着一个空，我们把这个空叫做插槽。这个插槽里面既可以放一个大众发动机，也可以放奥迪发动机。
slot的基本使用
slot的基本使用。
<!-- 第一次 -->
<el-car>
<div>大众发动机</div>
</el-car>
<!-- 第二次使用 -->
<el-car>
<p>奥迪发动机</p>
</el-car>
注册组件。
// 组件结构
<div class="el-car">
<h3>友情提示</h3>
<hr/>
<slot></slot>
<div>
<button>取消</button>
<button>确定</button>
</div>
</div>
具名插槽
具名插槽使用。
<!-- 大众 -->
<el-car>
<template v-slot:n1> // #n1 简写 类似 v-on: => @ v-bind: => :
<h3>大众提示</h3>
</template>
<template v-slot:n2> // #n2
<p>大众发送机</p>
</template>
</el-car>
<!-- 奥迪 -->
<el-car>
<template v-slot:n1> // #n1
<h3>奥迪提示</h3>
</template>
<template v-slot:n2> // #n2
<p>奥迪发送机</p>
</template>
</el-car>
组件内部。
<template>
<div class="el-car">
<slot name='n1'></slot>
<hr />
<slot name='n2'></slot>
<div>
<button>取消</button>
<button>确定</button>
</div>
</div>
</template>
作用域插槽
有一个需求，子节点访问子组件内的数据。
使用。
// 对象
<template #n2='obj'>
<p>大众发动机 : {{ obj.type }} - {{ obj.price }}</p>
</template>
// 解构
<template #n2='{ type, price}'>
<p>大众发动机 : {{ type }} - {{ price }}</p>
</template>
组件内部。
<template>
<div class="el-car">
<slot name="n1" ></slot>
<hr />
<slot name="n2" :type="type" :price="price"></slot>
<div>
<button>取消</button>
<button>确定</button>
</div>
</div>
</template>
// 数据
data() {
return {
type: ' EA888',
price: 200000,
}
},
v-model语法糖
v-model本质上是 value属性和input事件的一层包装。v-model的作用是提供数据的双向绑定。数据发生了改变，页面会自动变v-bind:value。页面输入的时候（改变）数据会自动变化v-on:input。v-model是语法糖， v-model等价于给一个input框提供了:value属性以及@input事件，但是如果每次使用input框，都需要提供value和input事件比较麻烦，所以使用v-model。
<template>
<div>
<input type="text" v-model="msg">
<input type="text" :value="msg" @input="msg = $event.target.value">
<input type="text" :value="car" @input="car = $event.target.value">
<input type="text" v-model="car">
</div>
</template>
v-model给表单元素使用
我们经常遇到一种场景： 父组件提供一个数据给子组件使用（父传子），子组件需要修改父组件的数据，所以需要子传父把值传给父组件。 这种场景可以使用v-model进行简写。
定义组件的时候，注意接收的值叫value，子传父触发的事件叫input。
单页应用程序
页面应用程序分类分为单页面应用程序和多页面应用程序。
- SPA： Single Page Application 单页面应用程序
- MPA : Multiple Page Application 多页面应用程序
单、多页面应用的区别
- 单页web应用 就是只有一个 web 页面的应用, 是只加载单个 HTML 页面。
- 多页面应用 每次请求服务器都是会返回一个完整的页面 它们的区别在于：
- 对于单页应用程序来说,只有第一次会加载页面,以后的每次请求,仅仅是获取必要的数据.然后, 由页面中 js 解析获取的数据,展示在页面中。
- 对于多页面应用 , 一个应用会有多个页面, 每次请求服务器都会返回一个完整的页面。
单页面应用的优势
- 传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面。
- 单页面应用程序只有第一次会加载完整的页面。
- 以后每次请求仅仅获取必要的数据，减少了请求体积，加快页面响应速度，降低了对服务器的压力。
- SPA更好的用户体验，运行更加流畅。
单页面应用的缺点
- 开发成本高 (需要学习路由) ：vue-router、react-router。
- 不利于 SEO 搜索引擎优化。谷歌浏览器在解决这个问题 ssr:服务端渲染 server side rendering
