vue主要内容复习-第二天

	复习内容如下：

MVVN以及它的工作原理
vue中事件的对象event
事件修饰符(用来阻止事件的各种状态)
v-model指定的修饰符
v-if v-else v-else-if的使用
单页面应用的优缺点
vite轻量级vue框架
组件化开发(什么是组件化开发、组件化开发的好处)
vue组件(重要)
全局注册组件
局部注册组件
全局注册和局部注册的区别
组件注册时名称的大小写
组件之间的样式冲突的问题
组件中的props(重要)
什么是组件中props
三面表达式绑定类名(动态绑定类名)
动态绑定style其中的css :style
props验证,验证其中的类型
计算属性
自定义事件(重要主要用来父子组件的之间的调用)
父子组件中的v-model

MVVN以及它的工作原理

ViewModel作为MVVM的核心,是把当前页面的数据源(Model)和页面结构(View)连接在了一起。
在这里插入图片描述

vue中事件的对象event

在原生的DOM事件绑定中.可以在事件处理函数的形参处,接受事件对象的event.同理在v-on简写为@所绑定的事件处理函数中,同样可以接受到事件对象的event.在event中可以获得触发当前对象的各种值

<div id="app">
    <button @click="backgroURL">+1</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script !src="">
    new Vue({
        el: "#app",
        methods:{
            backgroURL(e){
            let navbar =  e.target.style.backgroundColor === 'red'?'':'red';
                e.target.style.backgroundColor=navbar;
            }
        }
    })
</script>

事件修饰符(用来阻止事件的各种状态)

在事件处理函数中调用preventDefault()或stopPropagation()是非常常见的需求，因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：
在这里插入图片描述

在这里插入图片描述

v-model指定的修饰符

v-model的基础使用就是可以给我们的表单跟data中的数据实现双向绑定,所以现在我们需要对其中的修饰符作了解
为了方便对用户输入的内容进行处理,vue为v-model指令提供了3个修饰符，分别是：在这里插入图片描述

v-if v-else v-else-if的使用

用法逻辑跟其他编程语言类似,稍微有点不严谨
在这里插入图片描述

单页面应用程序

优点

SPA单页面应用程序最显著的3个优点如下：

良好的交互体验
- 单页面应用的内容的改变不需要重新加载整个页面
- 获取数据也是通过Ajax异步获取
- 没有页面之间的跳转，不会出现"白屏现象"
良好的前后端工作分离模式
- 后端专注于提供API接口，更易实现API接口的复用
- 前端专注于页面的渲染，更利于前端工程化的发展
减轻服务器的压力
- 服务器只提供数据，不负责页面的合成与逻辑的处理,吞吐能力会提高几倍

缺点：
任何一种技术都有自己的局限性,对于SPA单页面应用程序来说,主要的缺点有如下两个：

首屏加载慢
- 路由懒加载
- 代码压缩
- CDN加速
- 网络传输压缩
不利于SEO
- SSR服务器端渲染

Vite

是一个vue中的轻量级框架安装方便,开发测试的时候推荐使用,在企业级开发中不推荐使用：
安装步骤：

在这里插入图片描述
创建流程

项目目录

运行流程

在这里插入图片描述

组件化开发

什么是组件化开发
组件化开发指的是:根据封装的思想，把页面上可重用的部分封装城组件，从而方便项目的开发和维护。
组件化开发的好处
前端组件化开发的好处主要体现在以下俩方面：
提高了前端代码的复用性和灵活性
提升了开发效率和后期可维护性

vue组件

1.vue组件组成机构

每个.vue组件都由3部分构成，分别是:

template->组件的模板结构
script->组件的javaScript行为
style->组件的样式
其中,每个组件中必须包含template模板结构，而script行为和style是可选的组成部分

template节点

该结构包含网页的内容

script节点

export default{}：其中常用的属性是name(代表到处模块的姓名)、data(){return “”}(主要用来绑定页面中的数据),props(可以作为父组件传过来数值)，$emit主要用来绑定自定义事件，methods可以绑定一些方法、computed用来绑定计算属性
在这里插入图片描述

全局注册组件

首先需要在main.js文件中挂载组件
全局组件如果在mainjs中被挂载到APP组件中就会默认全局使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfK7tovI-1648088201118)(D:/截图工具的图片存放/image-20220323144259586.png)]

然后我们就可以在任意组件中使用这两个全局组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OndgDlRC-1648088201120)(D:/截图工具的图片存放/image-20220323144351794.png)]

局部组件就是正常的 import引入然后再 components中挂载

全局注册和局部注册的区别

全局注册的组件,可以在全局任何一个组件内使用
被局部注册的组件，只能在当前注册的范围内使用

组件注册时名称的大小写

在进行组件的注册时，定义组件注册名称的方式有两种：

使用kebab-case命名法（俗称短横线命名法，例如my-swiper 和 my-search）
使用PascalCase命名法（俗称帕斯卡命名法或大驼峰命名法，例如MySwiper和MySearch）

短横线命名法的特点：

必须严格按照短横线名称进行使用

帕斯卡命名法的特点：

既可以严格按照帕斯卡名称进行使用,又可以转化为短横线名称使用

注意：在实际开发中,推荐使用帕斯卡命名法为组件注册名称,因为它的使用像更强

组件之间样式冲突的问题

在这里插入图片描述

如何解决

为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用于，代码如下：
在这里插入图片描述
上面的就是在style标签中写scoper的底层原理,写上标签就是会自动生成上面data-[]-*

组件的props

为了提高组件的复用性,在封装vue组件时需要遵循如下的原则：

组件的DOM结构、style样式要尽量复用
组件中要展示的数据,尽量由组件的使用者提供

什么是组件的props

props是组件的自定义属性，组件的使用者可以通过props把数据传递到子组件内部，供子组件内部进行使用。代码示例如下：
在这里插入图片描述

三元表达式动态绑定类名

1用:class=“flag? ‘三元表达式动态绑定类名’:’’”

:style綁定css

:style的对象语法十分直观------看着非常像css,但其实一个javascript对象。cssproperty可以用驼峰寺命名或者短横线分割(短横线分割需要‘’起来)来命名
在这里插入图片描述

props验证

什么是props验证
指的是：在封装组件时对外界传递过来的props数据进行合法性校验，从而防止数据不合法的问题。
在这里插入图片描述
使用数组类型的props节点的缺点:无法为每个prop指定具体的数据类型
props:{count:number,flag:Boolean}

对象类型的props节点提供了多种数据验证方案，例如：

基础的类型检查
多个可能的类型
必填项校验
属性默认值
自定义验证函数

在这里插入图片描述

required显示必填属性

<template>
  <h1>标题 {{contain}}</h1>
  <h1>测试{{numbaer}}</h1>
</template>

<script>
export default {
  name: "Testvue",
  props:{
    contain: {
      type:String,
      required:true
    },
    numbaer:[Number,String]
  }
}
</script>

<style scoped>

</style>