vue易错

关注

原创最新推荐文章于 2026-07-21 15:29:29 发布 190 阅读 AI 写同款· GEO 优化 ›

小论文/大论文必备| YOLO26热力图可视化，支持8种常用热力图方法：GradCAM,GradCAMPlusPlus,XGradCAM,EigenCAM,HiResCAM等，助力小论文和大论文加分本文介绍了如何为YOLO26模型添加热力图可视化功能，包括完整代码和使用教程。热力图能增强模型的可解释性，适用于论文中的实验对比和结果展示。文章提供了详细的代码实现，包含图像处理、热力图生成和结果可视化等功能，并指导用户如何创建Python文件、粘贴代码以及调整参数生成最佳热力图。通过设置不同层号，用户可以灵活控制热力图效果，最终结果将保存在指定文件夹中。阅读详情

1.插值：{{name}}
2.动态属性:

3.表达式(能产生一个值）：{{number+1}}; {{flag?‘yes’:‘no’}}; {{name.split().reverse().join(’’)}}
4.v-html(会覆盖本来的p）:

我是哈默

5.计算属性: 只有当是对做计算属性变化才会执行，可以订getter也可以定setter，双向绑定

<template>
	<input v-model="double2"/>{{double2}}
</template>
<script>
computed:{
	double2:{
		get(){
			return this.number*2
		},
		set(){
			this.number = value/2;
		}
	}
}
<script>

6.watch.深度监听，针对引用类型：

<input type="text" v-model="info.hobby"/>
<script>
export default{
	data(){
		return{
			info:{
				hobby:'篮球'
			}
		}
	},
	watch:{
		info：{
			handle(newValue,oldValue){							   console.log('info',newValue,oldValue);
},
		deep:true;
		}
	}

7.绑定class和style

<li class="item" :class="{'active':isActive}">项目1</li>
<li class="item" :style="styleData">项目1</li>

8.v-for:
v-for的优先级比v-if高，不能连用,加item唯一标识，插入的时候不会乱，也可以更快的渲染虚拟dom,不是根据diff算法一个个更新；

<li v-for="(item,index) in array" :key="item.id">
<li v-for="(value,key,index) in array :key="key">{{index}}-{{key}}-{{value}}

9.事件.给添加click的button元素增加事件对象

<button @click="incrementBy10(10,$event)">点击加10</button>
<script>
methods:{
	incrementBy10(step,e){
		this.number+=step;
		console.log('e',e);//MouseEvent{..}
		console.log(e._proto_.constructor);//MouseEvent(){[native code]}，说明是原生的事件对象
		console.log('e.target',e.target);//<botton>点击加10</button>
		console.log('e.currentTarget',e.currentTarget);//<botton>点击加10</button>
		
}

10.通信：

//父传子
//父
<div :list="list"></div>
//子
props：{
	list:Array
}
//子传父
//子
methods:{
	add(){
		this.$emit('add',this.title);
	}}
//父
methods:{
	add(title){
		this.list.push({
			id:Math.random(),
			title
		})
	}
}
//兄弟通信eventbus
//eventBus
import Vue from 'vue';
const eventBus=new Vue();
export default eventBus;
//传输方
import eventBus from './event-bus';
export default{
	methods:{
		add(){
	eventBus.$emit('addItem',this.title);
	}}
//接收方
import eventsBus from './event-bus';
export default{
  props:{
  	list:Array
  }
  methods:{
  	handAdd(title){
		console.log('title',title);
	}
  }
  mounted:{
  	eventBus.$on('addItem',this.handAdd)
  }

composition api , option api
11.生命周期函数：
当vue实例创建完毕执行created；
当组件内容渲染到页面的时候执行mounted
当组件数据发生改变执行updated
当组件销毁的时候执行destoryed
父创建-子创建-子挂载-父挂载-父先更新-子先更新-子更新-父更新完毕