Vue3快速入门

躺平的乐子人

已于 2023-02-23 09:03:42 修改

阅读量92

点赞数

分类专栏： Vue3 文章标签： vue Powered by 金山文档

于 2023-02-13 15:26:48 首次发布

本文链接：https://blog.csdn.net/weixin_73368873/article/details/129009822

版权

Vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

簡述

本文使用cdn方式安裝vue，主要介紹vue3的简单案例，期望能对读者起到启发作用。

快速入门

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    

    <div id="app">{{ message }}</div>

    <script>

    //創建應用
    const { createApp } = Vue

    createApp({
    data() {
        return {
        message: 'Hello Vue!'
        }
    }
    }).mount('#app')
    </script>

    
</body>
</html>

案例流程

指定容器

<div id="app">{{ message }}</div>

创建Vue实例

vue使用前必须先创建应用，创建应用前必须绑定唯一的id，实例的绑定有两种语法，直接嵌入实例内部，一种灵活地使用mount绑定id

  //创建应用 createApp
const { createApp } = Vue
createApp({
    data() {
        return {
        message: 'Hello Vue!'
        }
    }
    }).mount('#app')
//绑定Vue实例方法
 new Vue({
            el:'#t1', 
            data:{ 
                name:'lin',
                address:'惠州'
            }
        })