vue易错

最新推荐文章于 2025-12-31 18:42:36 发布

原创最新推荐文章于 2025-12-31 18:42:36 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #html

本文介绍了Vue.js中关键的概念和技术实践，包括插值、动态属性、表达式、计算属性、深度监听、绑定class和style、v-for指令、事件处理、父子组件通信等，并概述了Vue的生命周期。

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
父创建-子创建-子挂载-父挂载-父先更新-子先更新-子更新-父更新完毕