Vue3：声明式渲染-CSDN博客

本文链接：https://blog.csdn.net/Visual_progress/article/details/148000767

第一个程序

我们来用Vue的方式实现一个Hello,World

引入vue.js

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

创建容器

<div ID="APP">{{message}}</div>

创建应用

        Vue.createApp({
            setup() {
                
            }
        })

渲染数据

        Vue.createApp({
            setup() {
                let message="Hello,World"
                return{message}
            }
        }).mount('#APP')

其中的mount是挂载，将渲染数据挂载到某个容器中

setup

setup函数是Vue3的入口，后续的Vue3的代码都会在这里编写

插值

插值是{{message}}表示将数据在此标签中的渲染效果表示出来

数据响应式

数据响应式是为了让我们更好地去调试Vue3的代码

我们在调试代码之前需要在浏览器中安装需要的插件

当我们安装好了插件之后我们浏览器查看里会有这个

这个可以用来给我们的网页内容进行调试

reactive

reactive可以让一个数据类型变成可以相应的类型，当我们在浏览器调试时，修改对象的值，网页也自动修改，但是reactive只能用于对象的响应式更改

演示代码

    <div>
        <p>{{message.NAME}}</p>
        <p>{{message.SCHOOL}}</p>
        <p>{{message.NUM}}</p>

    </div>
    <script>
        let {reactive}=Vue
        Vue.createApp({
            setup() {
                let message=reactive({
                    NAME:"GANCHUHAO",
                    SCHOOL:"JXZYYDX",
                    NUM:"202301014069"
                })
                return{message}
            }
        }).mount('#APP')
     </script>

这里我们有一个let[reactive]=Vue代码，是因为reactive是不能直接用的需要从Vue中拉取下来才能使用

演示结果

在我们的Vue控制台中我们可以发现我们可以编辑数据，并且编辑完后的数据会在网页中立马发生更改

ref

reactive只能支持对象的数据响应式，而ref能支持所有的数据响应式

演示代码

    <div>
        <p>{{message1.NAME}}</p>
        <p>{{message1.SCHOOL}}</p>
        <p>{{message1.NUM}}</p>
        <p>{{message2}}</p>
        <p>{{message3.NAME}}</p>
        <p>{{message3.SCHOOL}}</p>
        <p>{{message3.NUM}}</p>
        <p>{{message4}}</p>
    </div>
    <script>
        let {createApp,reactive,ref}=Vue
        Vue.createApp({
            setup() {
                let message1=reactive({
                    NAME:"GANCHUHAO",
                    SCHOOL:"JXZYYDX",
                    NUM:"202301014069"
                })
                let message2=reactive(90)
                let message3=ref({
                    NAME:"LIUYUXING",
                    NUM:"202301014098",
                    SCHOOL:"JXZYYDX"
                })
                let message4=ref(50)
                return{message1,message2,message3,message4}
            }
        }).mount('#APP')

    </script>

演示结果

Vue调试结果

这里的message2的数据不能修改，但是message3的数据可以修改，

value

ref在代码行修改数据需要使用value

演示代码

    <div>
        <p>{{message3.NAME}}</p>
        <p>{{message3.SCHOOL}}</p>
        <p>{{message3.NUM}}</p>
        <button @click="FUNC()">点我修改数据</button>
    </div>
    <script>
        let {createApp,reactive,ref}=Vue
        Vue.createApp({
            setup() {
                let message3=ref({
                    NAME:"LIUYUXING",
                    NUM:"202301014098",
                    SCHOOL:"JXZYYDX"
                })
                function FUNC(){
                    message3.value.NAME="GANCHUHAO"
                    message3.value.NUM="202301014069"
                    message3.value.SCHOOL="JXZYYDX"
                }
                return{message3,FUNC}
            }
        }).mount('#APP')
    </script>

演示结果

这里我们修改对象的数据