Vue3.0入门

https://vue3js.cn/

v-bind绑定样式：有两种方式
对象方式：

数组方式：

v-on绑定事件：
上一张
下一张

v-if条件渲染：

成年人

未成年

v-for循环渲染：

{{item.name}}：{{item.content}}

v-model数据双向绑定：
data中定义的数据发生变化时，页面中的数据跟着变化
修改页面中的数据时，data中的数据也会变化
姓名：

留言：

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');