html页面使用vue的几种情况

GISHUB

已于 2023-04-14 21:53:59 修改

阅读量3.4k

点赞数 3

分类专栏： Vue开发系列文章标签： vue.js html javascript

于 2023-04-14 21:52:40 首次发布

本文链接：https://blog.csdn.net/weixin_45565771/article/details/130162402

版权

Vue开发系列专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、html内使用vue

html主页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html的Vue使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">{{args}}</div>
    <script>
        new Vue({
            el: '#app',
            data: {
              args:"Hello World"
            },
        })
    </script>
</body>
</html>

示例：
在这里插入图片描述

2、html内使用vue，引用element-ui组件库

html主页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html的Vue使用第三放库</title>
    <!-- 引入Vue,必须在第三方库的前面引用-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
     <!-- 引入element-ui CSS和JavaScript  -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-button>默认按钮</el-button>
		<el-button type="primary">主要按钮</el-button>
		<el-button type="success">成功按钮</el-button>
		<el-button type="info">信息按钮</el-button>
		<el-button type="warning">警告按钮</el-button>
		<el-button type="danger">危险按钮</el-button>
    </div>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

示例：
在这里插入图片描述

3、html内使用vue，引用自定义组件

html主页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗首页</title>
    <!-- 引入Vue,必须在第三方库的前面引用-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <!-- 引入element-ui CSS和JavaScript  -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <videocom></videocom>
    </div>

    <script>
        Vue.use(httpVueLoader);
        new Vue({
            el: '#app',
            components: {
                'videocom': httpVueLoader('./components/videocom.vue')
            },
        })
    </script>
</body>

</html>

自定义组件videocom.vue代码如下：

<template>
    <div>
        <video class="video-play" muted="true" src="https://www.runoob.com/try/demo_source/movie.mp4" autoplay loop="loop"></video>
    </div>
</template>

<script>
/* 注意此处需要使用module.exports，不能使用exports default; */
module.exports = {
    name: "videocom",
    data: function () {
        return {
            videoUrl: "https://www.runoob.com/try/demo_source/movie.mp4"
        }
    },
    mounted() {},
    methods: {},
    destroyed() {}
}
</script>

<style>
.video-play {
    overflow: hidden;
}
</style>

示例：引用自定义组件调试需要注意，不能直接在本地打开html页面，引用组件的调用地址会有跨域问题，可以在nginx配置代理或者IIS部署（需要配置.vue文件的mine）；
调用地址：https://localhost:5678/vue/flood/index.html
在这里插入图片描述
友情提示：以上引用的js和css地址可能会比较慢，可以手动下载到本地调用，提高调试效率。