vue入门知识

最新推荐文章于 2024-08-26 19:09:35 发布

45 28 20

最新推荐文章于 2024-08-26 19:09:35 发布

阅读量135

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49291024/article/details/126012634

版权

一、概念（Vue由尤雨溪开发）

1、Vue：一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：将数据展示到界面上，使用户可以了解；

渐进式：Vue是可以自底向上逐层的应用

简单应用时只需要一个轻量小巧的核心库；

复杂应用可以引用各式各样的Vue插件

2、Vue特点：

（1）采用组件化模式，提高代码复用率、且让代码更好维护。

（2）声明式编码，让编码人员无需直接操作DOM，提高开发效率。

（3）使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

（Diff算法会将现有的虚拟dom和原有的对比）

3、尝试写一个入门的页面

（1）引入vue.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    </body>
</html>

（2）打开浏览器预览该页面，按F12，可看见有两条警告信息

第一点的解决方法：按照提示，下载vue Devtools。

vue官网：

点击后将在在谷歌应用商店中下载（文件名长这样噢）

打开谷歌浏览器的扩展程序

将刚刚下好的文件直接拖过来就好啦~~~（如下图则安装成功）

注意这时还无法消除那个警告噢！

点击详情进入该页面，开启以下两配置

消除了哟！

第二点解决方法：

在原有代码上加上这一段代码

整体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            Vue.config.productionTip = false   //阻止vue在启动的时候生成的生产提示
        </script>
    </body>
</html>