vue高级技巧

news/2024/7/10 0:47:02 标签: vue

1、索引数组的修改,vue无法劫持该数据进行响应式变化,代码如下:
当btnClick触发时,视图并不会相应更新

<template>
	<div>
		<span v-for="(item, index) in testData" :key="index"></span>
	</div>
</template>
export default {
	data(){
		return {
			testData: [1,2,3]
		}
	},
	methods: {
		btnClick(){
			this.testData[0] = 9
		}
	}
}

原因:索引数组的更新无法Observe(置于为啥,还在学习中…)
解决办法:

  1. this.$set(this.testData, index, val)
  2. 改变原数据的引用btnClick() { let data = { ...this.testData }; data[0] = 9; this.testData = data; }

2、Vue组件通信方式

  1. 父子组件通信: v-bind:attr ,props
  2. provide, inject
  3. $parent, $children
  4. ref
  5. $emit, $on
  6. Vuex

3、定义无状态组件
如果父组件对于子组件无感知,可以将子组件定义无状态组件,尽量将状态置于父组件操作,子组件只做prop接收,$emit触发。这样子组件耦合性更低,灵活度更高!

4、更新中。。。


http://www.niftyadmin.cn/n/566190.html

相关文章

Spring Security DisabledException: User is disabled问题解决

问题描述&#xff1a; org.springframework.security.authentication.DisabledException: User is disabled 问题分析&#xff1a; 1、实现了UserDetails类的isEnabled方法&#xff0c;但是返回了false&#xff0c;代表账号已经禁用了。 /*** 启用状态&#xff08;true启用&…

CSS三栏布局方法及其分析

前言 相信很多同学在面试的时候遇到过三栏布局的问题&#xff0c;一般面试题会让你尽可能多的写出三栏布局的方法&#xff0c;本篇小记对三栏布局的一些主流方法&#xff0c;做一些总结和分析。不正之处&#xff0c;欢迎指点&#xff01; 正文 1.绝对定位法 html如下&#…

Spring Security AccountExpiredException: User account has expired问题解决

问题描述&#xff1a; org.springframework.security.authentication.AccountExpiredException: User account has expired 问题分析&#xff1a; 1、实现了UserDetails类的isAccountNonExpired方法&#xff0c;但是返回了false&#xff0c;代表账号已经过期了。 /*** 账号没…

使用原生js实现replace()函数

需求&#xff1a; let str zhufeng2019zhufeng2019 str str.replace(/zhufeng/g, function(...args){// args中存储了每一次大正则匹配的信息和小分组匹配的信息&#xff1a; content, $1, $2return // 返回的是啥就把当前正则匹配的内容替换成啥 }) String.prototype.…

Spring Security There is no PasswordEncoder mapped for the id “null“问题解决

问题描述&#xff1a; java.lang.IllegalArgumentException: There is no PasswordEncoder mapped for the id "null" 问题分析&#xff1a; 1、WebSecurityConfigurerAdapter实现类需要指定一个PasswordEncoder(加密方式)。 解决办法&#xff1a; 给WebSecurit…

网址url的正则表达式

let reg /^(?:(http|https|ftp):\/\/)?((?:[\w-]\.)[a-z0-9])((?:\/[^/?#]*))?(\?[^#])?(#.)?$/i let str http://www.hefeng6500.cn/home/index.html?hefeng6500bob#testreg.exec(str)

Spring Security 设置2种加密方式(强散列哈希加密、自定义加密)

1 PasswordEncoder 2 BCryptPasswordEncoder(基于BCrypt的强散列哈希加密) 基于BCrypt的强散列哈希加密实现&#xff0c;并可以由客户端指定加密的强度strength&#xff0c;强度越高安全性自然就越高&#xff0c;默认为10. Spring Security设置加密方式。 /*** 身份认证接口*…

@vue/cli vue create初始化项目时使用yarn安装依赖

使用vue-cli搭建Vue项目脚手架后如何将Vue项目初始化的命令改用yarn安装呢&#xff1f; 也就是运行如下命令后&#xff0c;安装依赖使用Yarn npm install -g vue/cli # OR yarn global add vue/cli 1.全局安装Yarn npm install -g yarn 2.把 .vuerc 文件的改成 "pac…