【Vue】Vue学习引入和处女作demo

最新推荐文章于 2024-06-28 18:39:53 发布

人工智能有点

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量133

点赞数

分类专栏： Web开发文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_44417441/article/details/125988691

版权

Web开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Vue的学习之旅

文章目录

Vue的学习之旅

学习方式

可以考虑从以下方面入手，结合视频也可。

在这里插入图片描述

Vue官方文档

学习前提

你应该具有Vue的开发文件，具备前提的方式有多种，这里说一种简单的。下载js文件，在自己的html文件中引入即可。

在这里插入图片描述

下载文件后，直接放在可以找到的路径即可，然后通过<script src></script>标签引入即可。引入进去js文件，就有了Vue的环境。

如下图：

<script type="text/javascript" src="../js/vue.js"></script>

在这里插入图片描述

引入以上相当出页面多了一个Vue的构造函数:（红色框所示为构造之意）

在这里插入图片描述

demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!-- 引入vue （开发版） -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello</h1>
    </div>
    <script>
        Vue.config.productionTip = false  // 阻止 vue 在启动时生成生产提示
    </script>
</body>
</html>

通过构造函数创建Vue实例

在这里插入图片描述
然后可以通过constructor创建Vue实例

修改<script></script>标签:

el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data中存储的数据仅用于el所指定的容器使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello,{{name.toUpperCase()}},{{address}},{{Date.now()}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false
        // 创建Vue实例
        new Vue({
            el:'#root', //element el用于指定当前Vue实例为哪个容器服务
            data:{  //data中存储的数据仅用于el所指定的容器使用
                name:'guigu',
                address:"北京",
            },
        })
    </script>
</body>
</html>

重要：一旦data中的数据改变页面中的数据就会自动更新。

注意一点：

{{}}中写的是js表达式（值）
打开网页，默认都先请求页签。按住shift并点击刷新进行页面强制刷新可以看到。解决办法是在请求URL地方放一个ico文件。

在这里插入图片描述

人工智能有点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】Vue学习引入和处女作demo

你应该具有Vue的开发文件，具备前提的方式有多种，这里说一种简单的。下载js文件，在自己的html文件中引入即可。引入以上相当出页面多了一个Vue的构造函数（红色框所示为构造之意）//elementel用于指定当前Vue实例为哪个容器服务。引入进去js文件，就有了Vue的环境。//data中存储的数据仅用于el所指定的容器使用。下载文件后，直接放在可以找到的路径即可，然后通过。//阻止vue在启动时生成生产提示。可以考虑从以下方面入手，结合视频也可。//创建Vue实例。...
复制链接

扫一扫