vue.3.0的使用

一、项目创建

vue create vue3

更新到node最新版热更新有问题，需要手动刷新页面

1.reactive

<temlate>
<div>
    {{state.name}}
    <button @click='handleChange'>
        change
    </button>
    </div>
</temlate>
<script>
    import {reactive}from 'vue'
export default{
    setup(){
        const state=reactive({
            name:'shadow'
        })
        const name=reactive('shadow')
        const handleChange=()=>{
            state.name='lihua'
        }
    return {
        state,
        handleChange
    }
    }
}
</script>

• template可以有兄弟节点（多个独立div）

2.reactive-todo

<template>
<div>
    <input v-model='state.myname'/>
    <button @click="handleAdd">
        add
    </button>
    <ul>
        <liv-for='(data,inex) in state.datalist':key='data' >
    {{data}}--<button @click='handleDel(index)'>
            del
    </button>
    </li>
    </ul>
    </div>
</template>
<script>
import {reactive} from 'vue'
    export default{
setup(){
    const state=reactive({
        myname:''
        datalist:['1','2','3']
    })
    const handleAdd=()=>{
        console.log(state.myname)
        state.datalist.push(state.myname)
        state.myname=''
    }
    const handleDel=(index)=>{
        state.datalist.splice(index,1)
    }
    return {
        state,
        handleAdd,
        handleDel
    }
}
    }
</script>

3.ref

<template>
<div>
    <input ref='mytext'/>
    <button @click="handleAdd">
        add
    </button>
    <ul>
        <liv-for='(data,inex) in state.datalist':key='data' >
    {{data}}--<button @click='handleDel(index)'>
            del
    </button>
    </li>
    </ul>
    </div>
</template>
<script>
import {reactive} from 'vue'
    export default{
setup(){
    const state=reactive({
       []
        datalist:['1','2','3']
    })
    const mytext=ref('')
    const handleAdd=()=>{
        //拿到了原生节点
       console.log(mytext.value)
        //取到了值
        console.log(mytext.value.value)
        state.datalist.push(mytext.value.value)
        mytext.value.value=''
    }
    const handleDel=(index)=>{
        state.datalist.splice(index,1)
    }
    return {
        state,
        handleAdd,
        handleDel,
        mytext
    }
}
    }
</script>

<template>
<div>
    {{myname}}
    <button @click='handleChange'>
        
    </button>
    </div>
</template>
<script>
import {ref} from 'vue'
    export dafault{
        setup(){
            const myname=ref('shadow')
            const handleChange=()=>{
                myname.value='shadow'
            }
        }
        return {
myname
        }
    }
</script>

• ref合并到reactive

<template>
<div>
   <button @click='handleDel'>-</button>{{count}}<button @click="handleAdd">
    +
    </button>
    </div>
</template>
<script>
import {ref} from 'vue'
    export dafault{
        setup(){
            const count=ref(0)
            const handleAdd(){
                count.value++

            }
            const handleDel(){
                count.value--
            }
            return {
                count,
                handleAdd,
                handleDel
            }
        }
    }
</script>

4.函数封装在hooks文件夹内

//useCount.js
import {ref} from 'vue'
function useCount(){
const count=ref(0)
            const handleAdd(){
                count.value++

            }
            const handleDel(){
                count.value--
            }
            return {
                count,
                handleAdd,
                handleDel
            }
}
export{useCount}

<template>
<div>
   <button @click='handleDel'>-</button>{{count}}<button @click="handleAdd">
    +
    </button>
    </div>
</template>
<script>
import {useCount} from './hooks/useCount'
    export dafault{
        setup(){
            //解构
            const {count,handleDel,handleAdd}=useCount()
            const state=reactive({
                name,
                count
            })
            return{
                state,
                //count被合并
                //count,
                handleDel,
                handleAdd
            }
        }
    }
</script>

父子组件同时调用无影响

5.toRefs

• 默认直接展开state，那么此时reactive数据变成普通数据，通过toRefs,通过toRefs，可以把reactive里的每个属性，转化为ref对象，
• 这样展开后，就会变成多个ref对象，依然具有响应式特性

<template>
<div>
    {{myname}}
    <button @click='handleChange'>
        
    </button>
    </div>
</template>
<script>
import {reactive,toRefs} from 'vue'
    export dafault{
        setup(){
            const state=reactive({
                myname:'shadow'
            })
            const handleChange=()=>{
                myname.value='shadow'
            }
        }
        return {
            //转化为ref
            ...toRefs(state),
handleChange
        }
    }
</script>

6.父子通信

• 父传子

<!--父-->
<template>
<div>
    <chilehooks mytitle='首页'>
    </chilehooks>
    </div>
</template>
<script>
import childhooks from '../child-hooks'
    export default {
        components:{
            childhooks
        }
    }
</script>

<!--子-->
<template>
<div>
    child-hooks
    </div>
</template>
<script>
    import {ref} from 'vue'

export default{
    //接收属性方式一
    props:['mytitle'],
    //接收属性方式二
    setup(props){
        console.log(props.mytitle)
        const mytext=ref(props.mytitle+'111')
        return{
            mytext
        }
    }
}
</script>

• 子传父

<!--父-->

<template>
<div>
    <navbar @event='handleChange'/>
    
    <sidebar v-if='state.isShow'/>
    </div>
</template>
<script>
import navbar from '../Navbar'
    import sidebar from '../Sidebar'
    export default{
components:{
navbar,
    sidebar
},
        setup(){
            const state=reactive({
                isShow:false
            })
            const handleChange=()=>{
                state.isShow=!state.isShow
            }
        }
    return{
        state
    }
    }
</script>

<!--子-->
<template>
<div>
navbar <button @click="handleClick">
    
    </button>  
    </div>
</template>
<script>
export default{
    setup(props,{emit}){
        const handleClick=()=>{
                   emit('event')
 
        }
      return{
          handleClick  
      }
    }
}
</script>

<!--子-->
<template>
<div>
sidebar
    <ul>
        <li>111</li>
        <li>222</li>
    </ul>
    </div>
</template>
<script>

7.生命周期

<template>
<div>
    
    </div>
</template>
<script>
import {onMounted}from 'vue'
    export default{
        setup(){
            //注册回调
            onMounted(()=>{
                
            })
        }
    }
</script>

8.计算属性

<template>
<div>
    computed
    </div>
</template>
<script>
    import {ref} from 'vue'
export default{
setip(){
const myname==ref('shadow')
    const computedname=computed(()=>myname.value.substring(0,1).toUpperCase()+myname.value.substring(1))
    return{
        name
    }
}
}
</script>

• 模糊查询

<template>
<div>
    <input type='text' v-model='mytext'/>
    <ul>
        <li v-for='data in computedlist' :key='data'>
    {{data}}</li>
    </ul>
    </div>
</template>
<script>
      import {onMounted,ref} from 'vue'
setup(){
    const mytext=ref('')
    const list=ref([])
    const computedlist= computed(()=>{
    let newlist =list.value.filter(item.include(mytext.value))
    return newlist
    })
    onMOunted(()=>{
        fetch('test.json')
        .then(res=>res.json())
        .then(res=>{
console.log(res)
            list.value=res.list 
        })
    })
    return {
        mytext,
        computedlist
    }
}
</script>

9.watch

<template>
<div>
    <input type='text' v-model='mytext'/>
    <ul>
        <li v-for='data in computedlist' :key='data'>
    {{data}}</li>
    </ul>
    </div>
</template>
<script>
export default {
    setup(){
        const state=reactive({
            myname:'kerwin'
        })
    watch(mytext,()=>{
    list.value=list.value.filter(item.include(mytext.value))
})
        watch(()=>state.myname,()=>{
            console.log(state.myname)
        })
    }
}
</script>

10.路由

• 配置

//main.js
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

//index.js
import {createRouter,createWebHistory} from 'vue-router'
//import {createRouter,createWebHashHistory} from 'vue-router'
import Film from '../views/Film.vue'
const routes=[
   { path:'/film',
    component:Film
   },
    {
        path:'/',
        
        redirect:'/film'
    }
]
const router= createRouter({
    history :createWebHistory(process.env.BASE_URL),
    //history:createWebHashHistory(),
    //mode :history,mode :hash
    routes
})
export default router