【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><!-- 引入

甜甜圈Sweet Donut

396人浏览 · 2021-05-24 21:19:56

甜甜圈Sweet Donut · 2021-05-24 21:19:56 发布

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打开

可以打开对应的静态网页

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^