【Vue】1. Hello Vue!

最新推荐文章于 2024-03-14 15:58:10 发布

wowpH

最新推荐文章于 2024-03-14 15:58:10 发布

阅读量161

点赞数

分类专栏： Vue 文章标签： vue js html

本文链接：https://blog.csdn.net/pfdvnah/article/details/108877173

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

前言
一、下载vue.js文件
二、新建项目
总结

前言

创建一个简单的Vue应用的基本步骤。

一、下载vue.js文件

前往Vue官网：🔗https://cn.vuejs.org/
点击官网页面的起步按钮或者 🔗直接前往
点击介绍—Vue.js页面的安装按钮或者 🔗直接前往
点击安装—Vue.js页面的 开发版本 按钮

二、新建项目

新建文件夹
复制vue.js到此文件夹
新建html文件，文件内容如下：

<!DOCTYPE html>
<html>

<head>
    <!-- 标签页的标题 -->
    <title>我的第一个Vue项目</title>
    <!-- 引入vue.js -->
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <!-- 展示message的值 -->
        {{ message }}
    </div>

    <!-- 页面的js代码 -->
    <script>
        // 新建一个Vue对象
        var firstApp = new Vue({
            // el是element的缩写，#app是id选择器
            el: '#app',
            // 页面使用的变量需要在data中注册（定义）
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>