Vue3.0入门

https://vue3js.cn/

v-bind绑定样式：有两种方式
对象方式：<div v-bind:class="{active:isActive}"></div>
<div :style="{fontSize:fs,fontWeight:fw}"></div>

数组方式：<div -v-bind:class="[fs,bgc]"></div>
<div :style="[a,b]"></div>

v-on绑定事件：
<button v-on:click="prev">上一张</button>
<button @click="next">下一张</button>

v-if条件渲染：
<p v-if="age>18">成年人</p>
<p v-else>未成年</p>

v-for循环渲染：
<li class="msg" v-for="(item,index) in list" :key="index">{{item.name}}：{{item.content}}</li>

v-model数据双向绑定：
data中定义的数据发生变化时，页面中的数据跟着变化
修改页面中的数据时，data中的数据也会变化
姓名：<input type="text" v-model="name"></br>
留言：<textarea cols="22" rows="10" v-model="content"></textarea>

MVVM开发模式：

Model-View-ViewModel
减少页面DOM操作

CompositionAPI

Vue2采用OptionsAPI

Vue3采用CompositionAPI

响应式数据声明方式：

ref()和reactive()，声明的数据必须在setup的return中
setup()是CompositionAPI的入口函数

ref()用来定义简单数据类型
const { ref } = Vue

reactive()用来定义复杂数据类型
const { reactive } = Vue

Vue生命周期：

Vue实例 挂载、更新、销毁 的过程
生命周期会伴随各种事件，这些事件对应的函数叫生命周期函数/生命周期钩子
生命周期函数会在某一刻自动运行

挂载：创建Vue实例并挂载到页面上
beforeCreate：创建之前
created：创建完成，一般用来初始化页面需要的数据
beforedMount：挂载之前
Mounted：挂载完成，挂载完成后可以直接操作DOM对象

更新：页面发生变化
beforeUpdate：更新之前
updated：更新完成

CompositionAPI中取消了beforeCreate和created，使用setup
所有的钩子函数必须从Vue对象中解构出来
所有的钩子函数前必须加on

//钩子函数必须从Vue对象中解构出来
        const {
            ref,
            onBeforeMount,
            onMounted,
            onBeforeUpdate,
            onUpdated
        
        } = Vue;
        let msg=ref('');
        
        //初始化数据的方法，在setup中直接调用即可
        const getDate=()=>{
            msg.value="hello world"
        }
        function change(){
            msg.value="你好呀";
        }
        Vue.createApp({
            setup(){
                getDate();
				
				//需要传入匿名函数
                onBeforeMount(()=>{
                    console.log("onBeforeMount");
                })
                onMounted(()=>{
                    document.querySelector('p').style.color='red';
                    console.log('onMounted');
                })
                onBeforeUpdate(()=>{
                    console.log("onBeforeUpdate");
                })
                onUpdated(()=>{
                    document.querySelector('p').style.color='red';
                    console.log('onUpdated');
                })

                return {msg,change}
            }

        }).mount('#app');