Vue入门——快速入门Vue

原创已于 2023-11-27 08:42:58 修改 · 413 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-11-25 19:58:22 首次发布

本文介绍了如何从头开始学习Vue，包括官网介绍、在HTML中导入Vue模块、创建Vue应用程序实例、数据准备以及使用插值表达式渲染页面。通过实践，读者将理解Vue的基本工作原理。

文章目录

前言
一、什么是Vue
二、快速入门
完整代码
总结

前言

这系列文章主要学习Vue从入门到项目实战，适合想要学习巩固Vue的人

一、什么是Vue

Vue官网

Vue是一款用于构件用户界面的渐进式的JavaScript框架
既然是一个框架，那么我们得主要目标就是使用，只有先会用才能扩展

在这里插入图片描述

二、快速入门

我们会从两个方面开始

快速入门

准备
– 准备html页面，并引入Vue模块（官方提供）
– 创建Vue程序的应用实例
– 准备元素（dev），被Vue控制
构件用户界面
– 准备数据
– 通过插值表达式渲染页面

通过html页面，并导入Vue模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">   //需要使用script标签
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    </script>
</body>
</html>

在这里插入图片描述

创建Vue的应用程序实例

在这里插入图片描述

提供div元素，并被Vue控制

在这里插入图片描述

准备数据

在这里插入图片描述

通过插值表达式渲染页面

在这里插入图片描述

结果

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h1>{{msg}}</h1>
    </div>

    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'


        createApp({
            data(){
                return{
                    msg: 'hello vue'
                }
            }

        }).mount('#app')

    </script>


</body>
</html>