:为每个组件分配唯一的自定义属性
<template> <div class="container" data-v-001> <h3 data-v-001>任意组件</h3> </div> </template> <style> .container[data-v-001] { border:1px solid red; } </style>
:style节点的scoped属性
<template> <div class="container"> <h3>任意组件</h3> </div> </template> <style scoped> //style节点的scoped属性用来自动为每个组件分配唯一的“自定义属性” //并自动为当前组件的DOM标签和style标签应用这个自定义属性,防止组件的样式冲突问题 .container { border: 1px solid red; } </style>
/deep/样式穿透
如果给当前组件的style节点添加了scoped属性,则当前组件的样式对其子组件是不生效的,如果想让某些样式对子组件生效,可以使用/deep/深度选择器
<style lang="less" scoped> .title { color:blue;/*不加/deep/时,生成的选择器格式为 .title[data-v-052242de] */ } /deep/ .title { color:blue; /*加上/deep/时,生成的选择器格式为[data-v-052242de] .title */ } </style>
开始→import导入组件→componts注册组件→以标签的形式使用组件→
在内存中创建组件的实例对象→把创建的组件实例渲染到页面上→
组件切换销毁需要被隐藏的组件→结束
总结:组件的生命周期指的是:组件从创建->运行(渲染)->销毁的整个过程,强调的是一个时间段
vue框架为组件内置了不同时刻的生命周期函数,生命周期函数会伴随着组件的运行而自动调用:
①当组件在内存中被创建完毕后,会自动调用created函数
②当组件被成功的渲染到页面上之后,会自动调用mounted函数
③当组件被销毁完毕之后,会自动调用unmounted函数
重点:在created中发ajax请求初始数据
在mounted中操纵DOM元素
props是组件的自定义属性,组件的使用者可以通过props把数据传递到子组件内部,供子组件进行使用
<!-- 通过自定义props,把文章的标题和作者,传递到my-article组件中--> <my-article title="白日依山尽" author="ccd"></my-article>
props的作用:父组件通过props向子组件传递要展示的数据
props的好处:提高了组件的复用性
在封装vue组件时,可以把动态的数据项声明为props自定义属性。自定义属性可以在当前组件的模板结构中被直接使用
<template> <h3>标题:{{title}}</h3> <h5>作者:{{author}}</h5> </template> <script> export default { props:['title','author'], //父组件传递给my-article组件的数据必须在,props节点中声明 } </script>
:可以使用v-bind属性绑定的形式,为组件动态绑定props的值
<!-- 通过 v-bind 属性的绑定,为title动态赋予一个变量的值--> <!-- 通过 v-bind 属性的绑定,为author动态赋予一个表达式的值--> <my-article :title="info.title" :author="'post by ' + info.author"></my-article>
父组件通过v-bind属性绑定向子组件共享数据。同时,子组件需要使用props接收数据。
//父组件 <my-test-1 :msg="message" :user="userinfo"></my-test-1> data(){ return { message:'hello vue', userinfo:{name:'zs',age:20}, } } //子组件 <template> <p>{{msg}}</p> <p>{{user}}</p> </template> <script> export default { props:['msg','user'] } </script>
兄弟组件之间实现数据共享的方案时EventBus,可以借助于第三方的包mitt来创建eventBus对象,从而实现兄弟组件之间的数据共享
组件之间数据共享方案。
export default { data () { return { color:'red' } }, provide(){ return{ color:this.color, } } }
子孙节点可以使用inject数组,接受父级节点向下共享的数据:
<template> <h5>子孙组件 --- {{color}}</h5></template><script> //子孙组件,使用inject接收父节点向下共享的color数据,并在页面上使用 inject:['color'],</script>
父节点对外共享响应式的数据
import {computed} from 'vue'export default { data(){ return {color:'red'} }, provide(){ return { //使用computed函数,可以把要共享的数据"包装为"响应式数据 color:computed(() => this.color),s } }}
如果父级节点使用响应式数据,则子孙节点必须以.value的形式进行使用
<template> <h5>子孙组件 --- {{color.value}}</h5></template><script>export default { inject:['color'],}</script>
<h3 ref="myh3">ref组件</h3><button @click="getRef">获取$ref</button>methods:{ getRef(){ //通过this.$ref.引用的名称,可以获取到DOM元素的引用 console.log(this.$ref.myh3) //操作DOM元素,把文本颜色改为红色 this.$refs.myh3.style.color = 'red' }}
<my-counter ref="counterRef">myref组件</h3><button @click="getRef">获取$ref引用</button>methods:{ getRef(){ //通过this.$refs.引用的名称,可以引用组件的实例 console.log(this.$refs.counterRef) //引用到组件的实例之后,就可以调用组件上的methods方法 this.$refs.counterRef.add() }}
组件的$nextTick(cb)方法,会把cb回调推迟到下一个DOM更新周期之后执行。通俗的理解是:等组件的DOM异步地重新渲染完成后,再执行cb回调函数。从而保证cb回调函数可以操作到最新的DOM元素
<input type="text" v-if="inputVisibe" ref="ipt" /><button v-else @click="showInput">展示input输入框</button>methods:{ showInput(){ this.inputVisible = true this.$nextTick(() => { this.$refs.ipt.focus() }) }}
通过动态路由匹配的方式渲染出来的组件!可以使用$route.params对象访问到动态匹配的参数值(此处解释了为什么我们用不了这种方式传参)
<template> <h3>----{{$route.params.id}} </h3> </template><script>export default { name:'MyMovie',}</script>
为了简化路由参数的获取形式,vue-router允许在路由规则中开启props传参。
//1.在定义路由规则时,声明props:true选项,// 即可在Movie组件中,以props的形式接收到路由规则匹配的参数项{path:'/movie/id',component:Movie,props:true}<template> <!-- 直接使用props接收路由参数--> <h3>--- {{id}}</h3></template><script>export default { props:['id'] //使用props接收路由规则中匹配到的参数项}</script>
this.$router.push('hash地址')跳转到指定的Hash地址,从而展示对应组件this.$router.go(数值n)实现导航历史的前进、后退
<template> <h3> ----{{id}} </h3> <button @click="goBack">后退</button></template><script>export default { props:['id'], methods:{ goBack(){this.$router.go(-1)} },}</script>
首先,axios本质是拦截器。
看这个文章就行。。。
(3条消息) 在Vue.js中使用 axios 访问 API,与后台进行交互_kqZhu的博客-CSDN博客