丁鹿学堂：2023最新前端学习总结：vue3的cdn方式使用通过cdn使用vue3 组件化的思想要始终贯穿vue的开发。

通过cdn使用vue3

组件化的思想要始终贯穿vue的开发。

1 通过script的标签方式引入

2 创建根组件

在vue3中，组件可以理解为js对象。

3 组件生成实例，vue的createApp方法

4 将实力挂载到页面中，mount方法

代码：

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="root"></div>
    <script>
        //组件
        const App = {
            template:"<h1>hello,vue<h1>"
        }
        // 生成实例
        const app = Vue.createApp(App)
        // 挂载
        app.mount('#root')
    </script>
</body>

注意：

1 我们没有在html中直接写代码，而是通过vue自动生成组件，挂载到页面上显示

2 总结步骤：创建组件→组件生成实例→虚拟dom（vue自动完成）→挂载页面

vue中的数据

组件对象里我们已经了解了template模板，

第二个重要的是data

data是一个方法，需要一个对象作为返回值。

返回对象的属性，会自动添加到实例

在模板中，可以直接使用访问data返回的数据

        const App = {
            data(){
                return{
                    msg:'丁鹿学堂，vue学习进步！'
                }
            },
            template:"<h1>{{msg}}<h1>"
        }

注意：

1在模板中使用data返回的数据，需要通过特殊的语法：{{变量名}}

2双花括号是vue提供的语法，注意和我们js中的模板字符串区分，他们是不一样的。