Vue期末总结

包含插槽Slot、Vue的生命周期、数据绑定、父子关系组件、路由等内容，知识点详细且全面，可以作为学习笔记和复习资料，帮助大家系统地回顾和巩固所学知识，学生更好地理解和记忆知识。

Vue期末总结

• 插槽Slot
  • 组件的插槽： 组件的插槽也是为了让封装的组件更加具有扩展性； 让使用者可以决定组件内部的展示的内容
    • 合适的封装： 抽取共性，保留不同 最好的封装方式就是将共性抽取到组件中，把不同暴露给插槽 一旦预留了插槽就可以让使用者根据自己的需求，决定插槽中插入什么内容
    • slot的基本使用方法 在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽 该插槽插入什么内容取决于父组件如何使用 <template id="tcpn"> <slot></slot> </template> components: { cpn: { template: "#tcpn" } },
    • 作用域插槽
      • 父组件替换插槽的标签，但是内容由子组件来提供 <div id="app"> <cpn v-slot:default="slotProps"> {{slotProps.areavalues.join('-')}} </cpn> </div> <template id="tcpn"> <slot :areavalues="leng"> <ul><li c-for="item in leng">{{item}}</li></ul> </slot> </template> components: { cpn: { template: "#tcpn", data() { return { leng: ['11', '22', '33', '44'] } } } },
    • 具名插槽
      • <component :is="组件名"></component>
• Vue的生命周期：
  • 每个Vue实例创建后，都会经历一系列的初始化过程，Vue实例从创建到销毁的过程就是其生命周期 Vue的生命周期分为八个阶段，官方称其为生命周期钩子函数，钩子函数用来描述Vue实例从创建到销毁 的整个生命周期； 可以利用这些钩子函数在合适的时机执行业务逻辑，以满足功能需求 ___________________________________________________________________________________ beforeCreate：创建实例对象之前执行(数据不能使用) created:创建实例对象之后执行(数据可以使用) beforeMount:页面挂载之前执行（无法访问DOM） mounted:页面挂载之后执行（无法访问DOM） beforeUpdate:组件更新之前执行 updated:组件更新之后执行 beforeDestroy实例销毁之前执行，（可以操作DOM） destroyed:实例销毁之后执行，（无法操作DOM） Vue3与之不同 销毁之前是beforeUnmount:销毁之后是unmounted
• 数据绑定
  • v-once: 在某些情况下，不希望界面随意的跟随改变，这时候，我们就可以使用一个Vue的指令 v-once： 该指令后面不需要跟任何表达式 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
  • v-html; 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码 如果我们直接通过{{}}来输出，会将HTML代码一起输出 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容 如果我们希望解析出HTML展示 需要使用v-html指令 该指令后面往往会跟上一个String类型 会将string的html解析出来并且进行渲染
  • v-text v-text作用和Mustache比较相似；都是用于将数据显示在界面中 ，但是v-text不如{{}}灵活，而且v-text会把标签里的原有内容覆盖掉，所以不推荐使用 v-text不能解析html标记 v-text通常情况下接受一个string类型
  • v-cloak cloak:防闪烁 在某些情况下我们浏览器可能会直接显然出未编译的Mustache标签
  • v-bind 可以使用v-bind指令来实现动态绑定属性 除了内容需要动态决定，某些属性也需要动态绑定 在开发中图片的src属性，网站的链接href，动态绑定一些类和样式等都需要动态绑定
    • v-bind是一种单向绑定 如果没有v-bind绑定，则将后面的值作为字符串，原装不动给该属性 如<a href="aURL" href则为aURL 如果有v-bind绑定可以解析字符串： 1.字符串中有‘’，则其中的内容解析为字符串，原样输出里面内容： <a:href ="aURL"> href则为aURL 2.字符串中没有‘’，则其中的内容会从vue实例查找相对应的属性(data,methods,computed)，解析后输出 3.字符串中可以混合‘’和变量，则可以用“+”连接，解析后输出： 如：<a href="aURL+'123'">href则为“http"//www.baidu.com123”
  • v-model Vue中使用v-model指令来实现表单元素和数据的双向绑定
    • 修饰符 lazy修饰符 默认情况下，v-model默认是在input事件中同步输入框的数据，也就是说一旦有数据发生改变对应的data中的数据就会自动发生改变 lazy修饰符可以让数据在失去焦点或者回车时才会更新 <input type="text" v-model.lazy="msg"> ___________________________________________________________________________________ number修饰符 默认情况下在输入框无论我们输入的是字母还是数字都会被当做字符串类型进行处理但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理 number修饰符可以让在修饰框中输入的内容自动转换成数字类型 <input type="text" v-model.num="num"> ___________________________________________________________________________________ trim修饰符 如果输入的内容首尾有很多空格，通常我们希望将其去除 trim修饰符可以过滤内容左右两边的空格 <input type="text" v-model.trim="msg1">
  • v-on Vue中事件监听指令，直接与事件类型配合使用
    • v-on Vue中事件监听指令，直接与事件类型配合使用 当通过methods中定义方法，以供@click调用时，需要注意参数问题 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加，但是在{{}}中，这个小括号就是不可以省略的,注意：如果方法本身中有一个参数，那么默认将原生事件event参数传递进去 情况二：如果需要同时传入某个参数，同时需要event时可以通过$event传入事件 $event：指当前触发的是什么事件 $event.target:则指的是事件触发的目标，即哪个元素触发了事件，这将直接获取该DOM元素 可以通过$event.target获取该元素的属性值
    • 事件监听：事件修饰符 事件修饰符是自定义事件行为，通常配合v-on指令来使用，写在事件之后，用"."符号连接 .stop阻止事件冒泡：默认的事件传递方式是冒泡，所以同一事件类型会在元素内部和外部触发，可能会造成事件的错误触发，所以需要.stop修饰符阻止事件冒泡 .prevent阻止默认事件行为：如果<a>标签的默认行为与事件发生冲突，可以使用.prevent；来阻止默认行为 .capture事件捕获：事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反 .self自身触发：.self用来实现只有DOM元素本身会触发事件 .once只触发一次：.once用于阻止事件多次触发，只触发一次
  • v-show v-show的用法和V-if非常相似，也用于决定一个元素是否渲染
    • v-if和v-show对比： v-if条件为false时，不会有对应的元素在DOM中 v-show条件为false时，元素还存在，仅仅是将元素的display属性设置为none而已 如何选择 当需要在显示和隐藏切换很频繁时使用v-show 当只有一次切换时使用v-if
  • v-for遍历数组 当我们有一组数据需要进行渲染时，我们可以通过v-for来完成
    • v-for的语法类似于JavaScript中的for循环 格式：v-for = "item in items"的形式 item是源数据数组，而items则是被迭代的数组元素的别名 利用v-for显示列表 如果在遍历的过程中，我们需要拿到元素在数组中的索引值 语法格式：v-for=“(item,index) in items” 其中的index就代表了取出的item在原数组的索引值 <ul> <li v-for="(item,index) in movies">{{index+1}}-{{item}}</li> </ul>
  • v-for遍历对象 v-for可以用来遍历对象，比如某个对象中存储着个人信息，希望以列表的形式显示
    • 对象本身就是一个key:value的形式，所以遍历对象时，可以有三个参数(value,key,index)对应着对象的属性值,属性和索引值
      • key属性: 当 Vue正在更新使用v-for渲染的元素列表时，默认使用的是“就地更新”的策略 如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染 为了给Vue一个提示，以便追踪每个节点的身份，从而重用和重新排列现有元素，需要为每个项提供一个唯一的key属性 为什么要key： vue中列表循环需要加:key='唯一标识'，唯一标识尽量是id，目的是为了高效地更新虚拟DOM 没有key地时候默认使用就地复用策略。如果数据的顺序被改变，vue不是移动DOM元素来匹配数据项的改变，而是简单复用原来位置的每个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉 key主要用于dom diff算法，diff算法为同级比较，比较当前标签上的key还有他当前的标签名，如果key和标签名都一样时只移动，不会重新创建元素和删除元素
  • v-if、v-else、v-else-if v-if指令可以实现条件渲染 这三条指令与JavaScript的条件语句if、else、else if 类似 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
• 父子关系组件
  • 父组件向子组件传递参数
    • props定义：组件上注册的一些自定义属性 props作用：向子组件传递数据 特点：可以传递任意数量，任意类型的props components:{ childWithParam:{ data(){ return{ }}, template:"#child", props:[''] } } data内数据可以随意更改 props的数据是外部的无法直接更改
  • 子组件向父组件传递参数
    • 子组件传递数据或事件到父组件中需要使用自定义事件来完成 自定义事件流程： 子组件利用$emit通知父组件触发更新事件 在父组件中，通过v-on来监听子组件传过来的自定义事件 components: { childParam: { template: "#tchild", data() { return { } }, methods: { }, } },
• 路由
  • 动态路由
    • query方式传参
      • 1.通过？传参
      • 2.传参 传参语法： ?参数名1 =参数值1=参数值1&参数名2=参数值2 <div id="app"> <router-link to="/login?id=306&name=zyq">跳转到登录</router-link> <router-view></router-view> </div>
      • 3.定义路由 const routes = [{ path: "/login", component: login }
      • 4.获取参数 {{this.$route.query.参数名}}
    • params方式传参
      • 1.通过url本身传递
      • 2.传参，在touter-link中的to属性，保持和路由中的path中一致的格式，且to可以被v-bind动态绑定 传参语法： :/参数值1/参数值2，这里只需要传递值 <router-link to="/register/zyq/20">注册</router-link>
      • 3.动态定义路由.注册路由时，将参数用“/:”分隔多个参数 动态路由语法，:参数名，以冒号开头就表示动态匹配 { path: "/register/:name/:age", component: register }
      • 4.获取参数 {{$route.params.参数名}}
  • 命名路由
    • 在创建Router实例时，在routers中给某个路由设置名称name值 通过路由的名称取代路径地址直接使用
    • 为什么使用命名路由
      • 1.变更了router对象中的path,那么嗨需要去修改<router-link>中的to的属性值 2.如果router对象中的path比较长，那么通过命名路由的方式，不论path多长，都可以使用该路由的名称name，因此比较方便 3.可以避免我们的参数传递显示在浏览器的url框中（仅在params中有效，query中无效）
  • 路由嵌套
    • 什么是嵌套路由： 实际项目中的应用界面通常是多层嵌套的组件组合而成的 一个路径映射一个组件，访问这两个路径分别也会渲染两个组件 嵌套路由就是在路由里面嵌套它的子路由
    • children属性： 嵌套子路由的关键属性是children children也是一组路由，可以去配置路由数组，相当于routes 每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器 <router-link to="/父路由的地址/子路由地址" ></router-link>
    • 实现嵌套路由的步骤：
      • 1.创建对应的子路由 { path:'/home', component:home, children:[ { path:'about', component:about }, { path:'sport',s component:sport } ] 2.在路由映射中配置对应的子路由 (子路由的path中不要写"/"否则会永远以根路径开始请求，不方便用户去理解URL地址) children:[ { path:'about', component:about }, { path:'sport', component:sport } ] 3.在组件内部使用子路由 <div id="app"> <router-link to="/home" >关于我们</router-link><br> <router-link to="/phone" class="btna">联系我们</router-link> <router-view></router-view> </div> <template id="thome"> <div> <h1>我是首页</h1> <router-link to="/home/about" >学校简介</router-link> <router-link to="/home/sport" >学校动态</router-link> <router-view></router-view> </div>
  • 命名视图
    • 什么是命名视图？ 1.使用<router-view>可以为视图进行命名，主要用来负责路由跳转后组件的展示 2.在<router-view>上定义name属性表示视图的名字 3.根据不同的name值展示不同的页面，如left、main等 4.如果<router-view>没有设置名字，那么默认为default
    • 步骤：
      • 1.创建模板 <template id="theader"> <div>我是标题</div> </template> <template id="tleft"> <div>我是左侧</div> </template> <template id="tmain"> <div>我是主体</div> </template> 2.创建VueRouter对象 { path:'/', components:{ 'default':header, 'left':left, 'main':main } } 3.挂载路由 const header = { template:"#theader" } const left = { template:"#tleft" } const main = { template:"#tmain" } 4.使用命名路由 <router-view class="head"></router-view> <div class="container"> <router-view name="left" class="left"></router-view> <router-view name="main" class="main"></router-view> </div>
  • 编程式导航
    • 在Vue实例内部可以通过$router访问路由实例，因此通过this.$router.push即可实现页面的跳转 this.$route：路由对象。指向当前所在的路由映射，即所配置的路由中，哪条处于活跃状态，就指向哪条，可通过 this.$route访问当前路由 this.$router：全局路由器对象；指向对应创建的VueRouter对象实例
    • 1.项目中任何页面都可通过此属性获取到路由器对象
    • 2.通过调用路由器对象的push,go等方法，跳转到指定页面 应用push()方法定义导航
      • 1.跳转到字符串表示的路径 this.$router.push('home) 2.跳转到指定路径 this.$router.push({path:'home'}) 3.跳转到指定命名的路由 this.$router.push({name:'user'}) 4.跳转到指定路径并带有查询参数 this.$router.push({path:'home',query:{id:'2'}) 5.跳转到指定命名的路由并带有查询参数 this.$router.push({name:'user',params:{userId:'1'}})
    • router.go()方法
      • 1.router.go()方法的参数是一个整数，表示在history历史记录中向前或者后退多少步 ，类似于window.history.go() 2.this.$router.go(-1)相当于histrory.back(),表示后退一步 3.this.$router.go(1)相当于histrory.back(),表示前进一步 4.功能类似于浏览器上的前进和后退按钮，相应的 地址栏也会发生改变
    • query传参 通过该方式传参，参数会显示在地址栏
    • params传参 通过该方式传参，参数不会显示在地址栏