vue主要内容复习-第二天

vue主要内容复习-第二天

	复习内容如下：

1. MVVN以及它的工作原理
2. vue中事件的对象event
3. 事件修饰符(用来阻止事件的各种状态)
4. v-model指定的修饰符
5. v-if v-else v-else-if的使用
6. 单页面应用的优缺点
7. vite轻量级vue框架
8. 组件化开发(什么是组件化开发、组件化开发的好处)
9. vue组件(重要)
10. 全局注册组件
11. 局部注册组件
12. 全局注册和局部注册的区别
13. 组件注册时名称的大小写
14. 组件之间的样式冲突的问题
15. 组件中的props(重要)
16. 什么是组件中props
17. 三面表达式绑定类名(动态绑定类名)
18. 动态绑定style其中的css :style
19. props验证,验证其中的类型
20. 计算属性
21. 自定义事件(重要主要用来父子组件的之间的调用)
22. 父子组件中的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组件中就会默认全局使用

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

局部组件就是正常的 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>

计算属性

算属性会实时监听data中数据的变化

计算属性侧重于得到一个计算的结果,因此计算属性中必须有return返回值！

计算属性跟方法用来对比,计算属性会有缓存的效果,而方法没有方法会重复调用,计算属性大大优化了性能

自定义事件

生命自定义事件

触发自定义事件

在emits节点下声明的自定义事件,可以通过this.$emit(‘自定义事件的名称’)方式进行触发，代码如下

自定义事件传参数

组件上的V-model

是为了父子组件相互传送数据的互通性,需要用v-model来实现双向绑定数据

抓要是调用自定义事件中写入方法 update:*

vueapp中绑定数据并动态修改