Vue中的双向绑定、动态绑定、侦听器、父子组件的相互传值

在vue中@+   为监听事件

@click监听点击事件

@mouseleave鼠标移出

@mouseenter鼠标移入

 

v-model双向绑定，绑定的变量的值会实时传入输入框中。输入框中的变量也会实时传入变量中

 <div v-for="(item,index) in list"  :class="[item.isComplete ? 'item box2':'item' ]">

 v-for是一种循环，以上实现在list数组中的元素，元素的序号循环，当元素的isComplete为ture时采用第一个样式，为false时采用第二个样式

 

侦听器

import {ref,watch} from 'vue'

const str=ref('');

function add(){

    console.log("1234");

}

watch(str,add)//watch函数中的两个参数，前一个参数为要监听的变量，第二个参数为党该变量发生改变时要调用的函数

function add(newValue,oldValue){

    console.log("1234");

}

--->实现输出修改之前和修改之后的值

动态绑定

v-show（存在盒子，隐藏），v-if（不创建盒子），接收一个bool值，如果是ture则展示，如果是false则不展示

在Vue中每一个vue文件都可以看做一个组件，如果在项目中一个组件需要用到多次，就把他封装为一个组件，以便使用

在components中创建vue组件，例如以下创建一个button组件

<script setup>

//引入函数

import { defineProps,defineEmits } from 'vue';

//用于定义传进的变量

const props = defineProps(['text']);---->用于将父组件的值传入子组件

//用于绑定要触发的事件

const emit = defineEmits(['OK']);

function send(){

    emit('OK','hello'

    )

}

</script>

<template>

    //实现点击按钮后执行send函数，send函数实现触发OK事件，并向父组件传递'hello'这个字符串

    <div @click="send" class="button">{ { props.text}}</div>

</template>

<style scoped>

.button{

    margin: 100px 0 0 200px;

    width: 100px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    background-color: aquamarine;

    border-radius: 10px;

}

</style>

在子组件中使用

<script setup>

//将子组件引入

import myButton from './components/button.vue'

//接收到子组件传递的数据，将他打印到控制台

function add1(sar){

  console.log(sar);

}

</script>

<template>

//text="Nihao"将父组件中text的值传入子组件，@OK="add1"绑定add1函数，当OK事件触发时

  执行add1函数，add1函数实现将sar中的内容打印到控制台

<myButton @OK="add1" text="Nihao"></myButton>

</template>