Html页面引入vue并使用

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-11-23 10:08 被阅读0次

3.webpack 的import 导入网页和普通网页 scri
Vue 项目首页优化
Vue笔记——Vue组件中引入jQuery
Vue-引入jQuery
H5跳转小程序按钮踩坑操作全过程
vue中全局引入loading并使用
vue中集成阿里云滑块验证
html 引入外部数据js文件
vue里面使用echarts

新建文件夹结构如下

image.png
在html页面打入感叹号，出现如下代码，这是一个基本的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>仓库预约</title>
    </head>
    <body></body>
</html>

下面我们在<head></head>标签内引入vue

    <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" />
        <!-- 引入 Vue  -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
        <title>仓库预约</title>
    </head>

下面我们在<body></body>标签内写入需要渲染的模板

    <body>
        <div id="app">{{ message }}</div>
    </body>

我们在<html></html>标签外围添加一个<script></script>里面用于挂在模板#app
完整代码如下

<!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" />
        <!-- 引入 Vue  -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
        <title>仓库预约</title>
    </head>
    <body>
        <div id="app">{{ message }}</div>
    </body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        },
    });
</script>

效果图

image.png