vue
关注
分享
扫一扫
文章平均质量分 62
cdgogo
这个作者很懒，什么都没留下…
展开
-
vue基础知识
v-if 和 v-show的区别在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗而 v-原创 2021-11-02 21:17:17 · 2353 阅读 · 2 评论 -
$nextTick的作用和使用场景
应用场景：需要在视图更新之后，基于新的视图进行操作。this.$nextTick()方法主要是用在数据改变，dom改变应用场景中。vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子.原创 2021-10-31 23:13:52 · 511 阅读 · 0 评论 -
【vue】$parent和$children的使用
父组件访问子组件：使用$children或$refs reference子组件访问父组件：使用$parent$parent<body> <div id="app"> <mxc></mxc> </div> <template id="mxc"> <div>我是子组件啊</div> <button @click="btnClick">更加颤抖的child</b.原创 2021-10-31 22:03:38 · 5916 阅读 · 1 评论 -
【vue】ref和$refs的介绍和使用
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref介绍ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例通俗的讲，ref特性就是为元素或子组件.原创 2021-10-31 20:49:03 · 304 阅读 · 0 评论 -
Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。咱们来看看小白的回答。小白回答：hash模式url带#号，history模式不带#号。回答总结：这个回答其实和没有回答是一样，百度一下都知道了，官网文档也有，如果这样回答就能通过，那么那个面试官问这个问题又有什么意义呢？其实这个问题的意义是考验你的开发经验，与实际场景的应用和与后端人员的配合。大牛解答：.原创 2021-10-31 19:50:45 · 674 阅读 · 0 评论 -
vue组件的父子传值
父传子props父组件：子组件子组件props多种类型总结子传父（发送事件,this.$emit）子组件通过$emit触发父组件中的自定义函数，第一个值为自定义函数名，后面的参数是向父组件传的值子组件：父组件：子组件向父组件传递多个参数子组件：父组件：...原创 2021-10-31 17:55:09 · 116 阅读 · 0 评论 -
vue的生命周期
概念借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。一、创建（实例）1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）使用场景：因为此时dat原创 2021-10-31 17:22:58 · 836 阅读 · 0 评论 -
keep-alive的运用
只有被keep-alive包围的组件才有 activated和 deactivated两个属性。效果图app.vuehome.vue参考vue中keepAlive组件的作用及使用方式原创 2021-10-30 15:28:46 · 109 阅读 · 0 评论 -
vue-router嵌套路由
效果图router/index.jsimport Vue from "vue";import VueRouter from "vue-router";// import Home from "../views/Home.vue";// import My from "../views/My.vue";// import News from "../views/news.vue";// import HomeNews from "../components/HomeNews.vue";//原创 2021-10-30 14:02:32 · 257 阅读 · 0 评论 -
vue封装TabBar组件
实现思路：步骤一：TabBar和TabBarItem的组件封装做到这，可以发现页面的基本布局已经实现了，但是item的点击活跃状态还没实现步骤二：给TabBarItem传入active图片为了防止替换的内容直接整个替换掉插槽，从而插槽上定义的样式等也被替换影响，最好在插槽外定义一个div包裹步骤三：TabBarItem和路由的结合效果步骤四：TabBarItem的颜色控制基本完成，但是发现路由中点击路径重复会报错报错原因：是因为 vue-router ≥3.0原创 2021-10-29 23:30:55 · 513 阅读 · 0 评论 -
vue修改网页的标题
注意：如果是嵌套路由，我们可能获取不到嵌套路由的标题。这时候我们只需要修改为// 全局前置守卫，设置页面标题router.beforeEach((to, from, next) => { // to and from are both route objects. must call `next`. // document.title = to.meta.title; document.title = to.matched[0].meta.title; console.log(..原创 2021-10-29 22:49:37 · 639 阅读 · 0 评论 -
书籍购物车案例
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>书籍购物车案例</title> <script src="vue.js" type=".原创 2020-07-16 11:41:46 · 364 阅读 · 0 评论 -
vuecli3+工具中，封装tabbar组件（底部导航栏）
如图，封装tabbar组件（其他项目中可复用）开发过程：1、TabBar 和 TabBarItem 组件封装2、给TabBarItem传入active图片3、TabBarItem 和 路由（router）结合4、TabBarItem的颜色动态控制TabBarItem.vue页面：<template> <div class="tabbar-item" @clic...原创 2019-11-20 17:11:08 · 2755 阅读 · 1 评论 -
vue-cli3+工具中，配置路径别名(vue.config.js)
vue-cli 2.x 版本创建项目时，我们可以在 build 文件夹下找到 webpack.base.conf.js 文件，在里面修改 resolve.alias 即可。 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@...原创 2019-11-20 15:53:59 · 1427 阅读 · 0 评论