【Vue-1】通过引用script的方式，快速开始一个Vue的helloWord

最新推荐文章于 2023-05-14 17:51:46 发布

甜甜圈Sweet Donut

最新推荐文章于 2023-05-14 17:51:46 发布

阅读量327

点赞数

分类专栏： GUI界面前端文章标签： vue js

本文链接：https://blog.csdn.net/qinglingLS/article/details/117232495

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

GUI界面

3 篇文章 0 订阅

订阅专栏

Vue是前端工具，封装得较好，
下面就来快速地构建一个vue的helloworld界面

下载Vue提供的js文件

下载地址

在这里插入图片描述

将下载后的vue.min.js文件和你的Test.html文件放在一个目录下即可
在这里插入图片描述
Test.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Test Case</title>
        <!-- 引入 echarts.js -->
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id ='app'>
            {{ message }}
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"hELLO wORD!!"
                }
            });
        </script>
    </body>


</html>

其中，引入了Vue的js文件

在视图<div>层，构建了一个js代码，用于展示名为message的信息；
在script层，构建数据和Vue实例，用于输入视图层中
这里创建了一个字典，绑定了app到Vue实例中，并且在数据层定义message值，
运行后，Vue机制同步到视图层，就出现了hmtl中的文字
在这里插入图片描述
运行代码方法，点击html文件，用chrome打开

可以打开对应的静态网页

甜甜圈Sweet Donut

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【Vue-1】通过引用script的方式，快速开始一个Vue的helloWord

Vue是前端工具，封装得较好，下面就来快速地构建一个vue的helloworld界面下载Vue提供的js文件下载地址将下载后的vue.min.js文件和你的Test.html文件放在一个目录下即可Test.html：<!DOCTYPE html><html> <head> <title>Test Case</title> 
复制链接

扫一扫