vue学习之基本用法

1. 前期准备

安装vs code IDE，vs code 安装插件 open in brower
新建 vue-learning 文件夹
vs code IDE打开文件夹

2. 基本用法

创建demo1.html文件,内容如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入 vue 脚本文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>
    <!-- 2. 声明 vue 控制 DOM 区域 -->
    <div id="app">{{ message }}</div>

    <script>
        // 3. 创建 vue 实例对象
        const {
            createApp,
            ref
        } = Vue

        createApp({
            setup() {
                const message = ref('Hello vue!')
                return {
                    message
                }
            }
        }).mount('#app')
    </script>
</body>


</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

右键，在默认浏览器打开，效果如下

参考

https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

相关阅读:
【Java】PAT(Basic Level) Practice(中文) 1015德才论
备战秋招--基础模块
在Windows10环境安装CUDA11.7及PyTorch1.13--使用Nvidia RTX A4000开始炼丹之旅
运筹学基础【六】之运输问题
数据库连接池
Laravel一些优雅的写法
cmake: command not found
【智能家居入门2】（MQTT协议、微信小程序、STM32、ONENET云平台）
代码随想录算法训练营第五十八天 | 583. 两个字符串的删除操作 & 72. 编辑距离
2609. 最长平衡子字符串

原文地址：https://blog.csdn.net/qq_36940806/article/details/132794452