Présentez brièvement la fonction du code suivant :
Utilisez la fonction ref pour surveiller les modifications dans une certaine variable et la restituer au voir .
La fonction setUp est la fonction d'entrée de l'API de combinaison. C'est très important.
setUp peut surveiller les changements de variables ! Nous en profiterons
ref est construit dans vue et doit être importé.
<template>
<div>{{ countNum}}</div>
<button @click="handerFunc">按钮</button>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
// 这一句表示的是定义了一个变量count。这个变量的初始值是100
let countNum=ref(100);
// 在组合API中，如果想定义一个方法，不用定义到methods中去。直接定义就可以了
function handerFunc(){
// console.log(countNum);//countNum是一个对象
countNum.value += 10;
}
//在组合api中定义的方法，或者变量。如果外界需要使用，那么必须通过 return {aaa,func} 的方式暴露出去
return { countNum ,handerFunc}
}
}
</script>La fonction ref ne peut surveiller que des types simples de modifications de données.
Impossible de surveiller les modifications dans les types complexes (tableaux, objets).
Notre protagoniste réactif apparaît donc.
La fonction dans la configuration sera exécutée automatiquement une fois.
<template>
<div>
<ul>
<li v-for="item in satte.arr" :key="item.id">
{{item.name }}
</li>
</ul>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
console.log("setUp会自动执行的")
// ref函数的注意点：
// ref函数只能够去监听简单类型的数据变化，不能够去监听，复杂类型的变化(数组、对象)
// reactive 方法里面是一个对象
let satte=reactive({
arr:[
{name:"司藤",id:'0011'},
{name:"皮囊之下",id:'0011'},
{name:"百岁之约",id:'0012'},
{name:"三生三世",id:'0013'},
]
})
return { satte }
},
}
</script>pour implémenter la suppression de vue
<template>
<div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
let satte=reactive({
arr:[
{name:"司藤",id:'0011'},
{name:"皮囊之下",id:'0011'},
{name:"百岁之约",id:'0012'},
{name:"三生三世",id:'0013'},
]
})
// 删除被点击的元素
function del(index){
for(let i=0;i<satte.arr.length;i++){
if(index==i){
satte.arr.splice(i,1)
}
}
}
return { satte, del}
},
}
</script>pour former un Séparé module
<template>
<div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
// onlyDelLuoJi() 方法中含有一个数组 和一个方法；类似于解构
let {satte,del }=onlyDelLuoJi();
// 暴露给外界使用
return { satte,del}
},
}
function onlyDelLuoJi(){
let satte=reactive({
arr:[
{name:"司藤",id:'0011'},
{name:"皮囊之下",id:'0011'},
{name:"百岁之约",id:'0012'},
{name:"三生三世",id:'0013'},
]
})
// 删除被点击的元素
function del(index){
for(let i=0;i<satte.arr.length;i++){
if(index==i){
satte.arr.splice(i,1)
}
}
}
// 将数据satte 和方法 del 暴露出去
return { satte,del }
}
</script>Passez les paramètres entre les événements
<template>
<div>
<div>
<input type="text" v-model="addobj.watchTv.name">
<button @click="addHander">添加</button>
</div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
// onlyDelLuoJi() 方法中含有一个数组 和一个方法；类似于解构
let {satte,del }=onlyDelLuoJi();
// 传递参数satte 是onlyDelLuoJi函数中提供的satte。进行传递
let { addobj,addHander }=OnlyaddHander(satte);
// 暴露给外界使用
return { satte,del,addobj, addHander}
},
}
//添加功能模块
function OnlyaddHander(satte){
console.log('初始化添加',satte)
let addobj=reactive({
watchTv:{
name:"",
id:""
}
});
function addHander(){
// 重置清空 错吴做法
// satte.arr.push(addobj.watchTv)
// addobj.watchTv.name = "";
// addobj.watchTv.id = "";
// 正确做法
let oldobj = Object.assign({}, addobj.watchTv)
satte.arr.push(oldobj)
}
return { addobj,addHander }
}
//删除功能模块
function onlyDelLuoJi(){
console.log('删除初始化')
let satte=reactive({
arr:[
{name:"司藤",id:'0011'},
{name:"皮囊之下",id:'0011'},
{name:"百岁之约",id:'0012'},
{name:"三生三世",id:'0013'},
]
})
// 删除被点击的元素
function del(index){
for(let i=0;i<satte.arr.length;i++){
if(index==i){
satte.arr.splice(i,1)
}
}
}
// 将数据satte 和方法 del 暴露出去
return { satte,del }
}
</script>del.js est la logique pertinente pour la suppression
import { reactive } from "vue"
function OnlyaddHander(satte){
console.log('初始化添加',satte)
let addobj=reactive({
watchTv:{
name:"",
id:""
}
});
function addHander(e){
// 重置清空 错吴做法
// satte.arr.push(addobj.watchTv)
// addobj.watchTv.name = "";
// addobj.watchTv.id = "";
// 正确做法
let oldobj = Object.assign({}, addobj.watchTv)
satte.arr.push(oldobj)
e.preventDefault();
}
return { addobj,addHander }
}
export default OnlyaddHanderimport {reactive } from "vue"
function onlyDelLuoJi() {
console.log('删除初始化')
let satte=reactive({
arr:[
{name:"司藤",id:'0011'},
{name:"皮囊之下",id:'0011'},
{name:"百岁之约",id:'0012'},
{name:"三生三世",id:'0013'},
]
})
// 删除被点击的元素
function del(index){
for(let i=0;i<satte.arr.length;i++){
if(index==i){
satte.arr.splice(i,1)
}
}
}
// 将数据satte 和方法 del 暴露出去
return { satte,del }
}
export default onlyDelLuoJimain file# 🎜🎜 #
<template>
<div>
<div>
<input type="text" v-model="addobj.watchTv.name">
<button @click="addHander">添加</button>
</div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</template>
<script>
import onlyDelLuoJi from "./components/del"
import OnlyaddHander from "./components/add"
export default {
name: 'App',
setup(){
// onlyDelLuoJi() 方法中含有一个数组 和一个方法；类似于解构
let {satte,del }=onlyDelLuoJi();
// 传递参数
let { addobj,addHander }=OnlyaddHander(satte);
// 暴露给外界使用
return { satte,del,addobj, addHander}
},
}
</script>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre vue2.0 et 3.0
Quels sont les cycles de vie de vue3
Commandes shell couramment utilisées sous Linux
Comment annuler l'erreur de commit git
Comment vérifier si le mot de passe MySQL est oublié
La différence entre UCOS et Linux
Méthode Window.setInterval()
Comment supprimer des pages vierges dans Word
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
