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组件中就会默认全局使用
然后我们就可以在任意组件中使用这两个全局组件
局部组件就是正常的 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中绑定数据并动态修改