Java整理13

1、响应式

将一个普通数据转换成响应式数据2种方式
（1）ref函数		适合单个变量
import {ref} from 'vue'
let counter =ref(10)
在script中操作ref响应式数据需要用.value
在template中，操作响应式数据无需用.value	
（2）reactive函数		适合函数
import {ref,reactive} from 'vue'
let person = reactive({
	name:" ",
	age:10	
})
reactive响应式数据无论script或template中都是直接使用：对象名.属性名 样式
toref函数：将reactive响应式数据中的某个属性转换成ref响应式数据
torefs函数：将reactive响应式数据中的多个属性转换成ref响应式数据
let p_age=toref(person,'age')
import {ref,reactive,toref,torefs} from 'vue'
let {name.age}=torefs(person)

2、条件渲染

v-if=表达式	表达式返回真值时才会被渲染，返回false元素不在dom树中，v-else与v-if一起使用，
v-show="  "数据为false，元素还在dom树中，通过设置css样式中的display来隐藏。
列表渲染：
	v-for：
		let items=reactive([
			{
				id:"item1",
				messgae:"可乐"
			}
			{
				id:"item2",
				message:"炸鸡"
			}
		])
		<ul>		//(item,index)
			<li v-for="item in items" v-bind:key="item.id">
				{{index+1}}{{itm.message}}
			</li>
		</ul>

3、双向绑定

splice(下标,个数n)：从下标处开始清除n个元素
双向绑定一般用于表单标签
	页面数据修改也会修改相应的响应式数据
v-model:value="数据"
<script>
	let message=ref("zhang")
</script>
<template>
	<div>
		<input type="text" v-model="message">
	</div>
</template>

4、数据监听器

watch
	import {ref,reactive,watch} from 'vue'
watch(属性名,(newvalue,oldvalue)=>{ ref })
watch(()=>lastname.name,(newvalue,oldvalue)=>{ reactive })	单个属性
watch(()=>lastname,(newvalue,oldvalue)=>{ 操作 },{deep:true,immediate:true})	immediate页面加载完成立即执行一次	多个属性
WatchEffect
	import {WatchEffect} from 'vue'
	WatchEffect(()=>fullname.value[ref类型]=firstname.value[ref类型]+lastname[reactive类型] })	

5、生命周期钩子函数

import {ref,onBeforeMount[挂载之前],onMounted[挂载完成],onBeforeUpdate[更新之前],onUpdate[更新之后]} from 'vue'
Vue组件(.vue文件，一个文件是一个组件)
组件之间参数传递
	（1）父传子
	（2）子传父
	（3）兄弟传参		子1传父，父再传子2
defineEmits：定义向父组件提交数据的事件以及正式提交数据
import {defineEmits} from 'vue'
const emits=defineEmits(["sendMenu_事件名"])
function send(data)
{
	emits("sendMenu",data)		子1传父
}

接收子组件的数据		receiver()		父接收子1
let menu=ref("")
function receiver(data)
{	menu.value=data	}

<Content:message_参数名="menu_参数类型"></Content>		父传子2

接收父组件的参数							子2接收父
import {defineEmits} from 'vue'
define props(
	{	参数名:参数类型  }
	message:string
)