1-vue3初探学习1

news2024/12/23 16:25:00

vue3插件；

vscode插件；

1.volar 【在vscode上安装】 -vue3.x的插件

2.浏览器作为服务的测试版本

Live Server --作为简要服务使用

1-vue3初探学习：

网站：

https://cn.vuejs.org/

2.cdn文件

https://unpkg.com/vue@3/dist/vue.global.js

可以使用这个地址，进行cdn或者下载下来进行离线使用

我就是下载下来保存在本地命名为“vue3.js”

3.测试小代码

  <div id="box">
        {{10+20}}
        {{myname}}
        {{myname}}


    </div>

3.1第一种方式

    <script>
           
            
            Vue.createApp({
                data(){
                return {
                    myname:"tom"
                }
            }

            }).mount("#box")
            
    </script>

3.2第二种方式

    <script>
           
            
            obj={
                data(){
                    return{
                        myname:"tom"
                    }
                }
            }

            Vue.createApp(obj).mount("#box")
    </script>

3.3整体代码方式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue3.js"></script>
</head>
<body>

    <div id="box">
        {{10+20}}
        {{myname}}
        {{myname}}


    </div>
    <script>
           
            
            // Vue.createApp({
            //     data(){
            //     return {
            //         myname:"tom"
            //     }
            // }

            // }).mount("#box")
            
            obj={
                data(){
                    return{
                        myname:"tom"
                    }
                }
            }

            Vue.createApp(obj).mount("#box")
    </script>
    
</body>
</html>

3.4展示：vscode上运行显示