免费做彩页网站,磁力引擎,网站做的好不好数据,wordpress我爱水煮鱼目录
一、组件的三大组成部分
二、组件的样式冲突scoped
三、scoped原理
编辑
四、data是一个函数
五、组件通信
1.概念#xff1a;是指组件与组件之间的数据传递#xff0c;组件的数据是独立的#xff0c;无法直接访问其他组件的数据#xff0c;想用其他组件的数…目录
一、组件的三大组成部分
二、组件的样式冲突scoped
三、scoped原理
编辑
四、data是一个函数
五、组件通信
1.概念是指组件与组件之间的数据传递组件的数据是独立的无法直接访问其他组件的数据想用其他组件的数据就要用到组件通信。
2.组件关系分类
3.父子通信流程图
六、props详解
七、非父子通信
1.eventbus事件总线(可以一传多)---作用是在非父子组件之间进行简易的消息传递复杂场景---vuex
2.provide和inject
八、v-model原理
1.v-model
2.表单类组件封装和v-model简化代码
2.1表单类组件封装
2.2父组件v-model简化代码实现子组件和父组件数据的双向绑定
九、.sync修饰符
十、ref和refs
十一、vue异步更新和$nextTick
十二、自定义指令
1.自定义指令-注册的语法
2.自定义指令-指令的值
十二、插槽
1.默认插槽组件内定制一处结构
2.具名插槽可以定义多处结构
3.作用域插槽插槽传参的语法 一、组件的三大组成部分
结构template---vue2只能有一个根元素
样式style---默认是全局样式影响所有组件局部样式scoped下的样式只作用于当前组件
逻辑script---el是根实例所独有的data是一个函数其他配置项不变
二、组件的样式冲突scoped
默认情况写在组件中样式会全局生效---因此很容易造成多个组件之间的样式冲突问题
全局样式默认组件中的样式会作用到全局
局部样式可以给组件加上scoped属性可以让样式只作用于当前组件
三、scoped原理
给当前组件模板的所有元素都会添加上一个自定义属性data-v-hash值可以利用hash值区分开不同的组件CSS选择器后面被自动处理添加了属性选择器div[data-v-hash值]必须是当前组件的元素才会有这个自定义属性才会被这个样式作用到---当前组件内的标签都会被添加data-v-hash值的属性 style langless scoped
.footer-container {background-color: white;height: 50px;border-top: 1px solid #f8f8f8;display: flex;justify-content: flex-end;align-items: center;padding: 0 10px;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 999;
}
/style 四、data是一个函数
一个组件的data选项必须是一个函数---保证每个组件实例维护独立的一份数据对象 data(){return{数据对象}
五、组件通信
1.概念是指组件与组件之间的数据传递组件的数据是独立的无法直接访问其他组件的数据想用其他组件的数据就要用到组件通信。
2.组件关系分类
父子关系---props和$emit
非父子关系---provideinject和eventbus
3.父子通信流程图
父组件通过props将数据传递给子组件
子组件利用$emi通知父组件修改更新
父传子---给子组件以添加属性的方式传值----动态属性传值---:属性名 表达式---子组件内部通过props接收---数组接收多个传值----props: [属性名]---模板中直接使用---模板字符串{{}}渲染---{{ 属性名 }}子传父---$emit触发事件给父组件发送消息通知---子组件监听事件---this.$emit(事件名,内容)父组件监听事件---事件名 父级监听事件提供处理函数形参中获取参数---this.属性名 形参
六、props详解
定义子组件上注册的一些自定义属性
作用: 向子组件传递数据
特点 可以传递任意数据任意类型的prop
props校验 为组件中的prop指定严正要求不符合要求控制台会有错误提示 props: {校验的属性名: {type:类型,---Number,String,Object,Array,Function,Boolean,required:true, //是否必填default:默认值, //默认值和是否必填选择其一即可vaildator(value){// 自定义校验逻辑return 是否通过校验}}}
单向数据流
父组件的prop更新会单向的向下流动影响到子组件从而影响到视图
prop和data单向数据流的特点
共同点都可以给组件提供数据区别data的数据是自己的可以随意更改prop的数据是外部的不能直接更改要遵循单向数据流的原则谁的数据谁负责
七、非父子通信
1.eventbus事件总线(可以一传多)---作用是在非父子组件之间进行简易的消息传递复杂场景---vuex
步骤
创建一个都能访问到的事件总线(空vue实例)---作为媒介接收方的组件监听bus实例事件---$on(事件名)发送方的组件触发bus实例事件---$emit(事件名)
2.provide和inject
作用跨层级共享数据
步骤 父组件provide提供数据----provide () { return {数据} }子孙组件inject取值使用----inject []简单类型传递的非响应式复杂类型传递的响应式数据
八、v-model原理
原理v-model本质上是一个语法糖 例如利用在输入框上就是value属性和input事件的合写应用与不同的表单元素设置的dom属性和绑定的事件稍有不同
作用提供数据的双向绑定
1.v-model
数据变视图跟着变--- :value视图变数据跟着变---input 监听事件监听输入框的输入
注意$emit用在模板中的时候获取事件的形参input和click事件的形参是e事件对象
在行内中想要拿到当前事件的形参(事件对象)----$event.target
2.表单类组件封装和v-model简化代码
2.1表单类组件封装
父传子数据应该是父组件props传递过来的v-model拆解绑定数据子传父监听输入子传父传值给父组件修改
e.target触发事件的事件源$emit获取事件的形参下拉菜单的绑定事件是change因为数据不是子组件的所以不能使用v-model直接修改否则会报错
2.2父组件v-model简化代码实现子组件和父组件数据的双向绑定
子组件中props通过value接收事件触发$emitvalue和input事件两者缺一不可父组件中v-model给组件直接绑定数据
九、.sync修饰符
作用可以实现子组件与父组件数据的双向绑定简化代码
特点prop属性名可以自定义非固定为value
本质是 :属性名和事件:属性名合写
:属性.sync :属性事件属性名
十、ref和refs
作用利用ref和refs可以获取dom元素或者组件实例
特点查找范围---当前组件内更加精确稳定
querySelector的查找范围是整个页面容易出现找错的情况
例如获取dom
步骤
目标标签----添加ref属性恰当时机mounted内部操作dom的生命周期函数通过this.ref.ref属性值来获取目标标签
div refchartRef我是渲染图表的容器/div
mounted () { console.log(this.$refs.chartRef)}
十一、vue异步更新和$nextTick
vue是异步更新dom以便于提升性能
$nextTick是等dom更新后才会触发执行此方法里面的函数体
templatediv classappdiv v-ifisShowEditinput typetext v-modeleditValue refinp /button确认/button/divdiv v-elsespan{{ title }}/spanbutton clickeditFn编辑/button/div/div
/templatescript
export default {data() {return {title: 大标题,isShowEdit: false,editValue: ,}},methods: {editFn() {// 显示输入框this.isShowEdit true // 获取焦点this.$refs.inp.focus() } },
}
十二、自定义指令
内置指令v-htmlv-modelv-for...等
每个指令都有自己各自独立的功能自定义指令可以封装一些dom操作扩张额外的功能比如说v-focus自动聚焦v-loading控制加载v-lazy图片懒加载...
1.自定义指令-注册的语法
全局注册的语法 vue.directive(指令名,{inserted(el){//可以对el标签扩展额外的功能el.focus}})
局部注册的语法 directives: {指令名: {inserted(el) {// 可以对el标签扩展额外的功能el.focus}}
}
使用v-指令名
2.自定义指令-指令的值
语法在绑定指令时可以通过等号的形式为指令绑定具体的参数值-----v-指令名 指令值
通过binding、value可以拿到指令值指令值修改会触发update函数
update指令的值修改时触发---提供的值变化后dom更新的逻辑
十二、插槽
作用让组件内部的一些结构支持自定义
1.默认插槽组件内定制一处结构
插槽的基本语法
组件内需要定制的结构部分改用slot/slot占位使用组件时MyDialog在这里传入结构替换slot/MyDialog
div classboxslot 也可以在这里输入默认的内容也称为后备内容 /slot
/div
MyDialog
输入内容在这里输入可以替换slot整体如果不输入内容则默认使用后备内容
/MyDialog
2.具名插槽可以定义多处结构
slot有了name属性之后就是具名插槽通过template将其包裹成一个整体----分发结构
语法
多个slot使用name属性区分名字----slot name 名字 /slot template配合v-slot:名字来分发对应标签可以简写为#名字 //第一种写法
MyDialogtemplate v-slot:名字/template
/MyDialog//简写语法
MyDialogtemplate #名字/template
/MyDialog
3.作用域插槽插槽传参的语法
定义在定义slot插槽的同时是可以传值的给插槽上可以绑定数据将来使用组件时可以用
语法
给slot标签以添加属性的方式传值所有被添加的属性都会被收集到一个对象之中在template中通过 #插槽名obj接收默认插槽名为default具名插槽则为#具名插槽obj--obj是变量名可以自定义也可以对obj进行结构
