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

相关阅读:
jar 命令启动java 指定配置文件路径 jar如何启动
用C语言实现牛顿摆控制台动画
高频单链表题
那Java自学，该怎么开始，要怎么学？
Qt编程-QTableView同时冻结行和列
【Linux进程】冯·诺依曼体系结构以及操作系统的深入理解
Python 爬虫之lxml和Xpath提取网页数据
mysql-3:SQL语句
小程序代码管理
黑盒测试方法论—边界值

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