vue
文章平均质量分 71
進擊的小白
这个作者很懒,什么都没留下…
展开
-
vue性能优化
文章目录路由按需加载vue异步组件懒加载webpack的require.ensure()页面缓存路由按需加载vue异步组件const router = new VueRouter({ routes: [ { path: '/foo', component: (resolve) => require(['./Foo.vue'], resolve) } ]})懒加载const router = new VueRouter({ routes: [ // { path: '/lis原创 2021-04-17 16:43:10 · 410 阅读 · 0 评论 -
vue 的若干问题
文章目录v-if 和 v-for 的优先级高低解决方法v-if 和 v-for 的优先级高低由源码可知,v-for 的优先级高于 v-if如果 v-if 和 v-for同时出现,则每次渲染都会先执行循环再判断条件;若v-if=false,则浪费了性能。<p v-for="item in list" v-if="isShow"></p>解决方法1、 v-if先于v-for执行<template v-if="isShow"> <p v-for原创 2021-04-17 10:37:41 · 114 阅读 · 0 评论 -
$attrs 和 $listeners
$attrs 和 $listeners文章目录$attrs 和 $listeners$attrs$listenersinheritAttrs(补充)$attrs只读包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。优点在于避免传多个参数时,都要声明原创 2021-04-12 21:17:55 · 78 阅读 · 0 评论 -
vue的一些实例属性和方法
vue的实例属性和方法Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的数据属性区分。文章目录vue的实例属性和方法一、实例属性DOM访问vm.$el(只读)数据访问vm.$datavm.$options组件树vm.$parentvm.$rootvm.$childrenvm.$refs二、实例方法1.数据一、实例属性DOM访问vm.$el(只读)type: HTMLElement返回当前 Vue 实例正在管理的 DOM 元素。即:渲染出来的html元素原创 2021-04-12 10:26:30 · 152 阅读 · 0 评论 -
vue的生命周期函数
每个vue实例在被创建时都要经过一系列的初始化过程1、beforeCreate组件实例还未创建,一般用于加loading事件或一些初始化任务2、 created组件初始化完毕,但此时未挂载,没有DOM,常用于异步数据获取// 异步写法async created() { const data = await getData() this.data = data}3、 beforeMount未执行组件渲染,在挂载开始之前被调用:相关的 render 函数首次被调用。4、 mounte原创 2021-03-15 15:55:53 · 132 阅读 · 0 评论 -
computed和watch浅析
1、computed1.1 表达式computed: { total() { return this.data + '分' }, // get、set用法 count() { get() { // 默认回调函数,当读取count值时响应 return this.a + this.b }, set (val) { // 监视count值的变化,更新相关数据 this.b = val - this.a } }}1.2 特点计算属性有缓存性;如果this.d原创 2021-02-19 15:39:25 · 118 阅读 · 0 评论 -
MVVM 原理解析
1、小试牛刀<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-sc...原创 2019-08-23 16:15:42 · 388 阅读 · 0 评论 -
vuex简单使用
1、配置介绍{ state: {} // 存放动态数据 mutations: {} // 这里里面是改数据的,用this.$store.commit() 方法 getters: {} // 计算数据,类似于vue的 computed actions: {} // 如果我有异步操作,需要在这里执行后,commit mutaions中的函数改变数据;组件通过this.$store.dispa...原创 2019-08-07 10:48:43 · 105 阅读 · 0 评论 -
Vue-router 简单分析
1、router、routes、route的区别router: 是全局路由的实例。可以由它来导航到具体的路由,如:$router.push() 方式routes:指创建vue-router路由实例的配置项。用来配置多个route路由对象, 接受的是数组。route: 是当前的路由对象,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。2、重定向 redirec...原创 2019-08-06 18:24:37 · 114 阅读 · 0 评论 -
vue组件化
vue组件开发1、组件注册1.1全局注册import DtContainer from './components/DtContainer'Vue.component('dt-container', DtContainer)使用<template> <dt-container></dt-container></template&g...原创 2019-08-23 16:17:08 · 185 阅读 · 0 评论 -
vue非父子通讯——bus总线
1. 介绍在vuex加入后,让组件之间的通信更加的清晰,中大型项目建议这种方式。但是在小微型项目中,用$bus总线的方式会更加快捷一些。2. 关于事件Vue事件分两部分,一是DOM绑定事件,二是自定义事件。DOM绑定事件用 v-on 或语法糖 @ 方式来绑定Vue自定义事件是为组件间通信设计,自定义事件提供 $on、$once、$off、$emit$on监听当前实例上的自定义事件。事...原创 2019-08-01 11:33:58 · 581 阅读 · 0 评论