01-初识Vue

文章目录

1. 初识Vue

Vue 是一套适合初学者学习的渐进式前端框架，适用面很广，上手很容易。
知识储备：HTML、CSS、JS。
学习版本：Vue3
编辑器：VSCode

2. Hello World!

创建新文件夹，通过 VSCode 打开。
创建文件 index.html

在VSCode中，输入 ! 即可实现搭建HTML5的骨架

引入 Vue，添加 script 标签，将 Vue 地址添加到属性 src 中

<script src="https://unpkg.com/vue@next"></script>

下面开始编写 Hello World!
在 body 标签内部，创建根节点：

<div id="root"></div>

另外再创建 script 标签对，编写如下代码：

<script>
    Vue.createApp({
        template: '<div>Hello World!</div>'
    }).mount('#root')
</script>

.mount('#root') 表示将 Vue 创建的元素挂载到内容区的 id 为 root 的元素上面；
template 表示要替换的内容（模板）；
因此，经过替换之后，body 下的内容实际为：

<div id="root">
	<div>Hello World!</div>
</div>

显示在界面上如图所示
在这里插入图片描述
完整代码如下：

<!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>Hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World!</div>'
    }).mount('#root')
</script>
</html>

3. Counter定时计数器

除了在 template 中完整替换纯文本之外，还可以在其中穿插 “变量”。
而变量的书写方式是双大括号中间写入变量名，如：{{content}}
对于变量的赋值，通过 data() 得以实现。
index.html

<!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>Hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                content: 1
            }
        },
        template: '<div>{{content}}</div>'
    }).mount('#root')
</script>
</html>

网页显示如下图
在这里插入图片描述
在 Vue 中，有一个生命周期函数—— mounted()，在界面加载完成后即可自动执行
我们可以通过该函数实现 counter计数
编写代码如下：

<!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>counter</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                content: 1
            }
        },
        mounted() {
            setInterval(() => {
                this.content += 1;
            }, 1000)
        },
        template: '<div>{{content}}</div>'
    }).mount('#root')
</script>
</html>

在 mounted() 函数内部设置定时执行函数，循环执行，每间隔一秒对 content 变量自增1，这样即可实现 counter计数器。

this.content 改变了data() 中 content 的值，this.content 写法等同于 this.$data.content

通过这个小案例，说明了通过使用 Vue，做到了由 对DOM的操作 改变为 对数据的操作。