规划网站站点需要遵循哪些原则,景德镇seo,长沙柒零叁网站建设,北京网站开发培训班文章目录 1.组件的三大组成部分 - 注意点说明2.组件的样式冲突#xff08;用 scoped 解决#xff09;3.data是一个函数4.组件通信1.什么是组件通信#xff1f;2.不同的组件关系 和 组件通信方案分类 5.prop详解prop 校验①类型校验②完整写法#xff08;类型#xff0c;非… 文章目录 1.组件的三大组成部分 - 注意点说明2.组件的样式冲突用 scoped 解决3.data是一个函数4.组件通信1.什么是组件通信2.不同的组件关系 和 组件通信方案分类 5.prop详解prop 校验①类型校验②完整写法类型非空默认自定义 prop data 单项数据流 6.非父子通信拓展- event bus 事件总线7.非父子通信-provide-inject拓展8.v-model详解帮助更好的理解v-model应用与组件进行组件通信v-model原理表单类组件封装 $ v-model 简化代码 9.sync修饰符10.ref 和$refs获取dom元素获取组件元素 11.Vue异步更新$nextTick 1.组件的三大组成部分 - 注意点说明
组件的三大组成部分 - 注意点说明 ①结构 template 只能有一个根元素 ②样式 style 全局样式(默认):影响所有组件 局部样式scoped样式下只作用于当前组件 ③逻辑 script el根实例独有data是一个函数其他配置项一致 下面将详细的逐一地学一下②③部分 2.组件的样式冲突用 scoped 解决
默认情况写在组件中的样式会 全局生效→ 因此很容易造成多个组件之间的样式冲突问题。 scoped原理 1.给当前组件模板的所有元素都会被添加上一个自定义属性data-v-hash值且同一个组件中的hash值是一样的所以它就可以用不同的hash值区分不同的组件 2.css选择器的后面被自动处理添加上了属性选择器 最终效果必须是当前组件的元素才会有这个自定义属性才会被这个样式作用到 //BaseOne.vue
templatedivBaseOne/div
/templatescript
export default{
}
/script
style
/* 默认的style样式会作用于全局 */div {border: 3px solid blue;margin: 30px;}
/style//BaseTwo.vue
templatedivBaseTwo/div
/template
script
export default{
}
/script
style
/style//App.vue
templatediv idappBaseOne/BaseOneBaseTwo/BaseTwo/div
/templatescript
import BaseOne from ./components/BaseOne.vue;
import BaseTwo from ./components/BaseTwo.vue
export default{name:App,components:{BaseOne:BaseOne,BaseTwo:BaseTwo}}
/scriptstyle/style
效果图如下加上scoped进行修改 style scoped
/* 1.默认的style样式会作用于全局2.加上scoped属性的style样式只会作用于当前组件局部样式
组件应该有着自己独立的样式推荐加上scoped*/div {border: 3px solid blue;margin: 30px;}
/style
效果图如下3.data是一个函数
①一个组件如果要提供数据也是通过data ②一个组件的data选项必须是一个函数。 保证每一个组件实例维护独立的一份数据对象。 每次创建新的组件实例都会新执行一次data函数得到一个新的对象
templatediv classbase-countbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div
/templatescript
export default{// data必须是一个函数 → 保证每个组件实例data (){return{count: 999}}
}
/script
style scoped
.base-count{margin: 20px;
}
/style图文总结 4.组件通信
1.什么是组件通信
组件通信就是指组件与组件之间的数据传递
组件的数据是独立的无法直接访问其他组件的数据。想用其他组件的数据 → 组件通信 思考1.组件之间有哪些关系 2.对应的组件通信方案有哪几类? 2.不同的组件关系 和 组件通信方案分类
组件关系分类: 1.父子关系:组件A包裹组件B.那AB就是父子关系 2.非父子关系:A包裹B和C,所以BC是非父子关系
!-- App.vue --
templatediv styleborder:3px solid #000;margin: 10px;我是App组件!-- 老爹的这个组件儿子要用 --!-- 1. 给组件标签添加属性的方式传值--Son :titlemyTitle/Son/div
/templatescriptimport BaseSon from ./components/BaseSon.vue
export default{data () {return {myTitle:黑马程序员}},components:{BaseSon:BaseSon,}
}
/script
style
/style!-- BaseSon.vue --
templatediv styleborder:3px solid #000;margin: 10px;!-- 3.渲染使用 --我是组件Son {{ title }}/div
/templatescript
export default{// 2.通过props进行接受且props里面的名字要和老爹里面要传过来的东西同名props:[title]//3.这边接收完毕页面中就可以直接渲染使用了
}
/script
style
/style!-- App.vue --
templatediv styleborder:3px solid #000;margin: 10px;我是App组件!-- 老爹的这个组件儿子要用 --!-- 1. 给组件标签添加属性的方式传值--Son :titlemyTitle changeTitlehandelChange/Son/div
/templatescriptimport BaseSon from ./components/BaseSon.vue
export default{data () {return {myTitle:黑马程序员}},components:{BaseSon:BaseSon,},methods:{//3.提供处理函数提供逻辑handelChange (newTitle) {this.myTitle newTitle}}
}
/script
style
/style!-- BaseSon.vue --
templatediv styleborder:3px solid #000;margin: 10px;我是组件Son {{ title }}button clickchangeFn修改titile/button/div
/templatescript
export default{props:[title],methods:{changeFn () {//1.通过$emit向父组件发送消息通知this.$emit(changeTitle,传智教育)}}
}
/script
style
/style图文总结 5.prop详解
什么是prop Prop定义组件上注册一些自定义属性 prop作用向子组件传递数据 特点 可以传递任意数量的prop可以传递任意类型的prop 写法1.在父组件中提供一些数据字符串对象布尔值等 2.然后通过给当前这个组件以添加属性的方式传值 3.传了之后,在子组件内部就可以通过props接收 4.最终一面当中就可以做渲染了
App.vuetemplatediv classapp!-- 父传子 --UserInfo:usernameusername:ageage:isSingleisSingle:carcar:hobbyhobby/UserInfo/div
/templatescript
import UserInfo from ./components/UserInfo.vue
export default {data() {return {username: 小帅,age: 28,isSingle: true,car: {brand: 宝马,},hobby: [篮球, 足球, 羽毛球],}},components: {UserInfo,},
}
/scriptstyle
/styleUserInfo.vuetemplatediv classuserinfoh3我是个人信息组件/h3div姓名{{ username }}/divdiv年龄{{ age }}/divdiv是否单身{{ isSingle ? yes : no }}/divdiv座驾{{ car.brand }}/divdiv兴趣爱好:{{ hobby.join(、) }}/div !-- 加上 .join(、) 就可以给三个爱好的文字之间加上顿号 --/div
/templatescript
export default {props:[username,age,isSingle,car,hobby]
}
/scriptstyle
.userinfo {width: 300px;border: 3px solid #000;padding: 20px;
}
.userinfo div {margin: 20px 10px;
}
/styleprop 校验
思考组件的prop可以乱传吗不可以比如一个百分比数字不可以给它传布尔值 作用为组件的prop指定验证要求不符合要求控制台就会有错误提示 → 帮助开发者快速发现错误 语法 ①类型校验 ②非空校验 ③默认值 ④自定义校验
①类型校验
需要将原来props接收数据的写法改成对象对象里面就可以写键值对了。值就是对应的类型要求比如传进来的是Number类型就写number
App.vue
templatediv classappBaseProgress :wwidth/BaseProgress/div
/templatescript
import BaseProgress from ./components/BaseProgress.vue
export default {data() {return {width: abc,}},components: {BaseProgress,},
}
/scriptstyle
/styleBaseProgress.vue
templatediv classbase-progressdiv classinner :style{ width: w % }span{{ w }}%/span/div/div
/templatescript
export default {// props: [w],props:{w:Number//Number String Boolean Array Object Function}// 1.基础写法类型校验// 2.完整写法类型、是否必填、默认值、自定义校验
}
/scriptstyle scoped
省略
/style ②完整写法类型非空默认自定义 script
export default {// props: [w]//1.基础校验类型校验// props:{// w:Number//Number String Boolean Array Object Function// }// 2.完整写法类型、是否必填、默认值、自定义校验props:{w:{//对类型有要求type:Number,required:true,//需要非空default:0,//如果希望有一个默认值。而不是必填validator (value){//写这样一个方法这个方法的形参是可以拿到//你传递过来的prop传值的拿到传值就可以对他进行判断if (value 0 value 100) {return true}return false}}}
}
/scriptprop data 单项数据流
共同点都可以给组件提供数据 区别
data的数据是自己的 → 随便改prop的数据是外部的 → 不能直接改 要循环单向数据流
App.vue
templatediv classappBaseCount/BaseCount/div
/templatescript
import BaseCount from ./components/BaseCount.vue
export default {components:{BaseCount},data(){return {count:100}},methods:{}
}
/scriptstyle/styleerzi
templatediv classbase-countbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div
/templatescript
export default {// 1.自己的数据随便修改 谁的数据 谁负责// 意思就是打开网页想加就加想减就减// data () {// return {// count: 100,// }// },// 2.外部传过来的数据由父组件提供 不能随便修改props:{count:Number}
}
/scriptstyle
.base-count {margin: 20px;
}
/style上面的代码数据由父组件提供一保存会直接报错外部数据不能直接改 需要提供对应的函数
app.vue
templatediv classapp、!-- 老爹监听 --BaseCountchangeCounthandleChange/BaseCount/div
/templatescript
import BaseCount from ./components/BaseCount.vue
export default {components:{BaseCount},data(){return {count:666}},methods:{handleChange (newCount) {this.count newCount}}
}
/scriptstyle/style~.vue
templatediv classbase-countbutton clickhandleSub-/buttonspan{{ count }}/spanbutton clickhandleAdd/button/div
/templatescript
export default {// 1.自己的数据随便修改 谁的数据 谁负责// 意思就是打开网页想加就加想减就减// data () {// return {// count: 100,// }// },// 2.外部传过来的数据由父组件提供 不能随便修改//单项数据流父组件的prop更新会单向的向下流动影响到子组件props:{count:Number},methods:{handleAdd(){//通过子传父 this.$emit(事件名参数)//告诉老爹改数字然后在老爹里面需要监听一下this.$emit(changeCount,this.count 1)},handleSub(){this.$emit(changeCount,this.count - 1)}}
}
/scriptstyle
.base-count {margin: 20px;
}
/style
6.非父子通信拓展- event bus 事件总线
作用:非父子组件之间进行简易消息传递。复杂场景 → Vuex 1.创建一个都能访问到的事件总线空 Vue实例→ utils/EventBus.js
impprt Vue for vue
const Bus new Vue()
export default Bus2.A组件接收方监听Bus实例的事件监听事件订阅消息
created () {Bus.$on(sendMsg,(msg) {this.msg msg})3.B组件发送方触发Bus实例的事件
Bus.$emit(sendMsg,这是一个消息)7.非父子通信-provide-inject拓展
provide inject 作用跨层级共享数据 1.父组件provide提供数据 provide写成一个函数在里面returnreturn就是共享的数据里面可以写多个数据【简单string/复杂对象类型】 2.你在父组件中共享了数据在孙组件中想要接收直接写inject想接收谁就写谁的名字一旦接收好了就可以在孙组件的上方直接渲染 3.共享数据的时候通常会把它包成的一个对象一复杂类型响应式的方式向下共享 export default {provide () {return {//普通类型【非响应式】colour:this.color,//复杂类型【响应式】userInfo:this.userInto,}}
}子/孙组件无论多少层 inject取值使用直接写你要接收的属性名就可以了将来也可以通过this直接访问 export default {inject: [color,userInfo],created () {console,log(this.color,this.userInfo)}
}注也可以接收多个数据 {{ xxx }} {{ xxx }} {{ xxx }}
App.vue
templatediv classapp我是APP组件button clickchange修改数据/buttonSonA/SonASonB/SonB/div
/template
script
import SonA from ./components/SonA.vue
import SonB from ./components/SonB.vue
export default {provide() {return {// 简单类型 是非响应式的color: this.color,// 复杂类型 是响应式的userInfo: this.userInfo,}},data() {return {color: pink,userInfo: {name: zs,age: 18,},}},methods: {change() {this.color redthis.userInfo.name ls},},components: {SonA,SonB,},
}
/script
style
lue
/style~.vue
templatediv classgrandSon我是GrandSon{{ color }} -{{ userInfo.name }} -{{ userInfo.age }}/div
/templatescript
export default {inject: [color, userInfo],
}
/scriptstyle
lue
/style8.v-model详解帮助更好的理解v-model应用与组件进行组件通信
v-model原理
原理v-model本质上是一个语法糖。例如应用在输入框上就是value属性和input事件的合写 作用提供数据的双向绑定 ①数据变视图跟着变:value ②视图变数据跟着变input 注意$event用于在模板中获取事件的形参 input v-modelmsg typetext input :valuemsg inputmsg $event.target.value type“text”
templatediv classappinput v-modelmsg1 typetext /br /input :valuemsg2 inputmsg2 $event.target.value typetext brbr/div
/templatescript
export default {data() {return {msg1: ,msg2:}},
}
/script表单类组件封装 $ v-model 简化代码
1.表单类组件封装 → 实现 子组件 和 父组件数据的 双向绑定 ①父传子数据应该是父组件props传递过来的v-model拆解 绑定数据 ②子传父监听输入子传父值给父组件修改
App.vue
templatediv classapp!-- 把城市Id传下去 --BaseSelect:cityIdselectIdchangeIdselectId $event/BaseSelect/div
/templatescript
import BaseSelect from ./components/BaseSelect.vue
export default {data() {return {//数据应该由老爹提供selectId: 102,}},components: {BaseSelect,},methods: {handleChange(e) {console.log(e);this.selectId e}}
}
/scriptstyle
/style~vue
templatedivselect :valuecityId changehandleChange!--里面不能写 v-modelcityId 不能修改cityId,子组件是不让改的,所以这里要拆--option value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104广州/optionoption value105深圳/option/select/div
/templatescript
export default {// 在子组件中用props接收props:{cityId:String},// 写处理函数methods:{handleChange (e) {this.$emit(changeId,e.target.value)}}
}
/scriptstyle
/style2.父组件v-model 简化代码实现 子组件 和 父组件数据 双向绑定 核心步骤 ①子组件中props通过value接收事件触发 input ②父组件中v-model给组件直接绑数据:valueinput 通过value进行接收然后设置给上面的select通过value往下传递监听下拉菜单的改变然后触发事件提交数据时触发事件提交数据的是input App.vue
templatediv classapp!-- v-model :value input --BaseSelectv-modelselectId/BaseSelect/div
/templatescript
import BaseSelect from ./components/BaseSelect.vue
export default {data() {return {//数据应该由老爹提供selectId: 102,}},components: {BaseSelect,},
}
/script~.vue
templatedivselect :valuevalue changehandleChange!--里面不能写 v-modelcityId 不能修改cityId,子组件是不让改的,所以这里要拆--option value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104广州/optionoption value105深圳/option/select/div
/templatescript
export default {// 在子组件中用props接收props:{value:String},// 写处理函数methods:{handleChange (e) {this.$emit(input,e.target.value)}}
}
/script9.sync修饰符
作用可以实现 子组件 与 父组件数据 的双向绑定简化代码 特点prop属性名可以自定义非固定为value 场景封装弹框类的基础组件visible属性 true显示 false隐藏
//father
BaseDialong :visible.sync isShow
BaseDialog:visibleisShowupdata:visibleisShow $event
//son
script
props:{visible:Boolean
},
this.$emit(updata:visible,false)
/script10.ref 和$refs
作用利用ref和refs可以用于获取dom元素或组件实例 特点查找范围 → 当前组件内更精确稳定 ①获取dom1.目标标签-添加ref属性 div refchartRef我是渲染图表的容器/div ②恰当时机通过this.$refs.xxx,获取目标标签 mounted () { console.log(this.$refs.chartRef) },
获取dom元素
App.vue
templatediv classappdiv classbase-chart-box这是一个捣乱的盒子/divBaseChart/BaseChart/div
/template~vue
templatediv refmychart classbase-chart-box子组件/div
/templatescript
import * as echarts from echartsexport default {mounted() {//const myChart echarts.init{document.querySelectbase-chart-box}//这个会找到父组件中的盒子//但我们想找当前组件范围内的盒子用ref// 基于准备好的dom初始化echarts实例const myChart echarts.init(this.$ref.mychart)// 绘制图表
}
/script如上代码就算有一个捣乱盒子图表也不会放错地方
获取组件元素 1.目标组件 - 添加ref属性 BaseFrom refbaseForm/BaseForm 2.恰当时机通过this.$refs.xxx,获取目标组件就可以调用组件对象里面的方法 this.$refs.baseFrom.组件方法()
App.vue
templatediv classappBaseForm refbaseFrom/BaseFormbutton clickhandleGet获取数据/buttonbutton clickhandleReset重置数据/button/div
/templatescript
import BaseForm from ./components/BaseForm.vue
export default {data (){return {}
}, components: {BaseForm,},methods: {handleGet () {console.log(this.$refs.baseForm.getValue())},handleReset () {this.$refs.baseForm.resetValues()}}
}
/script~。vue
templatediv classappdiv账号: input v-modelusername typetext/divdiv密码: input v-modelpassword typetext/divdivbutton clickgetFormData获取数据/buttonbutton clickresetFormData重置数据/button/div/div
/templatescript
export default {data() {return {account: ,password: ,}},methods: {//方法1收集表单数据返回一个对象getValues() {retyrn () {account: this.account,password:this.password}},//方法2重置表单resetValues() {this.account this.password console.log(重置表单数据成功);},}
}
/script11.Vue异步更新$nextTick
需求编辑标题编辑框自动聚焦 1.点击编辑显示编辑框 2.让编辑框立刻获取焦点
this.isShowEdit true //显示输入框
this.$refs.inp.focus() //获取焦点问题“显示之后”立刻获取jiajiao点不能成功显示 原因Vue是 异步更新DOM提升性能 想要在DOM更新wan’chwanche那个之后做某件事可以使用$nextTick templatediv classappdiv v-ifisShowEditinput v-modeleditValue typetext refinp /button确认/button/divdiv v-elsespan{{ title }}/spanbutton clickhandleEdit编辑/button/div/div
/templatescript
export default {data() {return {title: 大标题,isShowEdit: false,editValue: ,}},methods: {handleEdit(){//显示输入框(异步dom更新)this.isShowEdit true//让输入框获取焦点this.$nextTick((){console.log(this.$refs.inp)this.$refs.inp.focus()})// setTimeout(() {// this.$refs.inp.focus()// },1000)}
}
}
/scriptstyle
/style
