html 引入 vue.js

最新推荐文章于 2024-07-24 20:34:13 发布

笑望灬星辰

最新推荐文章于 2024-07-24 20:34:13 发布

阅读量1w

点赞数 6

分类专栏： vue2 文章标签： vue html javascript vue.js 前端

本文链接：https://blog.csdn.net/hu1628299958/article/details/106739389

版权

html 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

html 引入 vue.js
1 vue官网下载 vue.js
或者cdn 引入我们这里采用下载的方式

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

在这里插入图片描述

目录结构
编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>html引入vue.js</title>
</head>
<body>
    <div id="app">
        <div>{{hello}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',   // 选择器
            data: {
                hello: 'hello vue'
            }
        })
    </script>
</body>
</html>

效果
在这里插入图片描述

调整位置
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>html引入vue.js</title>
</head>
<body>
    <script>
        new Vue({
            el: '#app',   // 选择器
            data: {
                hello: 'hello vue'
            }
        })
    </script>
    <div id="app">
        <div>{{hello}}</div>
    </div>
</body>
</html>

页面报错

vue.js:597 [Vue warn]: Cannot find element: #app

在这里插入图片描述

再次调整位置
将 vue.js 引入位置放在最后

</body>
</html>
<script src="./js/vue.js"></script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html引入vue.js</title>
</head>
<body>
    <div id="app">
        <div>{{hello}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',   // 选择器
            data: {
                hello: 'hello vue'
            }
        })
    </script>
</body>
</html>
<script src="./js/vue.js"></script>

效果
在这里插入图片描述
报错

index.html:13 Uncaught ReferenceError: Vue is not defined at index.html:13

所以引入位置和script标签位置要以第一种为准哦

适当修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html引入vue.js</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{hello}}</div>
    </div>
    <div id="hujiajia">
        <div>{{hello}}</div>
    </div>
    <script>
        var vm1 = new Vue({
            el: '#hujiajia',   // 选择器
            data: {
                hello: '我是vm1'
            }
        })
        var vm2 = new Vue({
            el: '#app',   // 选择器
            data: {
                hello: '我是vm2'
            },
            mounted() {
                //  访问vm1 data的数据
                console.log(vm1._data.hello)
                //  修改vm1 data的数据
                setTimeout(()=>{
                    vm1._data.hello = '修改vm1 data的数据'
                },2000)
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

笑望灬星辰

关注

6
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
html 引入 vue.js

html 引入 vue.js1 vue官网下载 vue.js目录结构编码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/vue.js">&
复制链接

扫一扫

专栏目录