超级实用的vue小技巧,用了之后直呼好棒~

简介: 笔记

1. 原型注入


  • 全局属性和方法可以这么定义
  • 方便调用和获取
  • 一般不定义很多(会污染原型,每次实例Vue都会带上)
// main.js入口文件内
import Vue from "vue";
import router from "./router";
import store from "./store";
import dayjs from "dayjs";
import App from "./App";
// 将dayjs注入到Vue原型上,方便vue组件内进行this.dayjs获取
Vue.prototype.dayjs = dayjs;
// 任意组件内 this.fn() 调用即可
Vue.prototype.fn = function(){
  // do something
}
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");


2. 对象冻结


  • 用于纯列表渲染,数据无交互的情况,可以禁止 vue 劫持绑定,节省内存,提升性能
<script>
import * as Api from "@/common/apiNew.js";
export default {
  data() {
    return {
      dataList: Object.freeze(this.list),
    };
  },
  methods: {},
};
</script>

101.png

3.img 加载失败


  • 添加默认图片
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
  data(){
    return{
      imgUrl:''
    }
  },
  methods:{
    handleError(e){
      e.target.src = reqiure('图片路径') 
    }
  }
}
</script>


4. 递归组件


tree 组件常用

层级是根据后台数据决定的,不知道是多少级

当前场景需要用到动态组件

概念

组件在它的模板内可以递归的调用自己,只要给组件设置name组件就可

必须给一个条件来限制数量,否则会抛出错误: max stack size exceeded

组件递归用来开发一些具体有未知层级关系的独立组件(比如常见的:联级选择器和树形控件 )

<template>
  <div v-for="(item,index) in treeArr">
      子组件,当前层级值: {{index}} <br/>
      <!-- 递归调用自身, 后台判断是否不存在改值 -->
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name,组件内部才能递归调用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: () => []
    }
  }
}
</script>

106.png


5. 解决繁乱的template —— render函数


  • 代码中偶尔会有这种一值多判断的问题
<template>
  <div class="hello">
    <h1>解救繁乱的template ———— render()</h1>
    <!-- 一值多判断 -->
    <div v-if="value === 1">
      <button>按钮1</button>
    </div>
    <div v-else-if="value === 2">
      <button>按钮2</button>
    </div>
    <div v-else-if="value === 3">
      <button>按钮3</button>
    </div>
    <div v-else>
      <button>按钮4</button>
    </div>
  </div>
</template>
  • 这么写是没错的,但是看起来很不文雅,代码冗余
  • 我们可以使用 render()函数封装一个button组件
  • 只需要传值,就可以得到不同类型的按钮,非常方便
<script>
export default {
    props: {
        type: {
            type: String,
            default: 'normal'
        },
        text: {
            type: String,
            default: 'normal'
        }
    },
    render(h){
        // h: createElement()
        return h('button', {
            // v-bind:class
            class: {
                btn: true,
                'btn-success': this.type === 'success',
                'btn-danger': this.type === 'error',
                'btn-warning': this.type === 'warning',
                'normal': !this.type
            },
            // dom属性
            domProps:{
                innerText: this.text || '默认按钮'
            },
            // v-on 事件可以绑定在这里
            on:{
            } 
        })
    }
}
</script>
<style scoped>
.btn{
    width: 100px;
    height: 40px;
    color: white;
    transition: all .5s;
}
.btn:hover{
    background: chartreuse;
    cursor: pointer;
}
.btn-success{
    background: green;
}
.btn-danger{
    background: red;
}
.btn-warning{
    background: orange;
}
.normal{
    background: blue;
}
</style>
  • 调用
// 1. 引入
import Button from '../views/button.vue';
// 2. 在components中注册
components:{
  Button
}
// 3. 就可以在模板使用了,传入对应的值
<Button
  :type = "type"
  :text = "text">
</Button>


6. 延迟更新 —— Vue.nextTick()


  • 在下次 DOM 更新循环结束之后执行延迟回调
  • 在修改数据之后立即使用这个方法,获取更新后的 DOM
  • 一般用于,父组件调用子组件的方法时,需要等其更新完毕
//因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
mounted(){ 
  this.$nextTick(() => {
    // 通过 $refs 获取dom 并绑定 send 方法
    this.$refs.msg.send('浙江温州江南皮革厂') 
  })
}


7. 自定义指令



  • 自定义一个指令,让页面上的input框自动获取焦点
Vue.directive('focus', {
        inserted: function(el){
            el.focus();
        }
    })
  • 使用
<input placeholder="请输入你的电话" v-model="tel" v-focus />
目录
打赏
0
0
0
0
8
分享
相关文章
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
60 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
151 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章