vue3的

回忆

1 v3 特点： 高性能  按需引入  组合式api  新组件(fragment) 
2 v3的舞台 setup 
3 import {reactive,ref,toRef,toRefs,watch,computed,watchEffect,on..} from 'vue'	

补充vue中使用scss

<style lang="scss">
    #demo{
        ul{
            list-style-type: none;
        }
    }

</style>

练习：todolist v3版：

<template>
    <div id="demo">
        <input type="text" v-model="data.t" @keyup.enter="add">
        <ul>
            <li :class="{done:item.done}" v-for="item in list_" :key="item.id">
                <a href="" @click.prevent="item.done=!item.done"> {
  {item.title}}</a>
                &nbsp;
                <a href="" @click.prevent="del(item.id)">删除</a>
            </li>
        </ul>

        <template v-for="item in data.menus" :key="item">
            <span v-if="data.current==item">{
  {item}}</span>
            <a href="" @click.prevent="data.current=item" v-else>{
  {item}}</a>
             &nbsp;
        </template>
    </div>
</template >

<script setup>
import {computed, reactive, ref, toRefs} from 'vue'



//数据
let data=reactive({
    list:[
        {id:1,title:"打游戏",done:false},
        {id:2,title:"吃豆豆",done:true},
        {id:3,title:"睡觉觉",done:false},
    ],
    id:4,
    menus:["全部","已完成","未完成"],
    current:"全部",
    t:""
})

//方法
let add=()=>{
    data.list.push({
        id:data.id++,
        title:data.t,
        done:false
    })
}

let del=id=>{
    data.list=data.list.filter(item=>item.id!=id)
}

//计算属性
let list_=computed(()=>{
    switch(data.current){
        case "全部":
            return data.list
        case "已完成":
            return data.list.filter(item=>item.done)
        case "未完成":
             return data.list.filter(item=>!item.done)
    }
})


</script>

<style scoped lang="scss">
    #demo{
        ul{
            list-style-type: none;
        }

        .done a{
            color:red;
            text-decoration: line-through;
        }
        a{
            text-decoration: none;
        }
    }




</style>

组件通信

1 父子：props+emit

1.1子组件通过defineProps来接受

语法：

import {defineProps} from 'vue'

let xx=defineProps(['自定义属性',....])
渲染和js使用：xx.自定义属性

Father.vue：

 <Son :name="name"/>
 
<script setup>
import Son from './Son.vue'
import {ref} from 'vue'
let name=ref('张三')
</script>

Son.vue

<template>
    <div>
            son  
            {
  {name}}--{
  {props.name}}
    </div>
</template>

<script setup>
    import {defineProps} from 'vue'
    //接受
    let props=defineProps(['name']);
    //在js中使用
    console.log(props.name);
    
</script>

完整版:
defineProps({
	name:{
		type:String,
		required:true,
		default:""
	}
});

1.2子组件通过defineEmits来调用父组件方法

语法：

  import {defineEmits} from 'vue'
  let xx=defineEmits(['自定义属性'])
  xx('自定义属性',参数)
  

Father.vue