Vue封神之路(2.) Vue简介

还是那个同伟伟

已于 2022-09-03 14:26:03 修改

阅读量503

点赞数

分类专栏： Vue封神之路文章标签： vue.js javascript 前端

于 2022-09-03 12:59:27 首次发布

本文链接：https://blog.csdn.net/wei18791957243/article/details/126594926

版权

Vue封神之路专栏收录该内容

4 篇文章

订阅专栏

Vue.js是一个轻量级的渐进式框架，由华裔工程师尤雨溪创建。它专注于视图层，易于上手并能与其他库或现有项目无缝集成。Vue的特点包括其官方和第三方插件系统，如vue-router和vuex。虽然原生JS在初始渲染时可能更快，但Vue在数据变更时利用虚拟DOM进行高效的更新，降低了DOM操作的成本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

1.Vue官网

2. Vue官网介绍

3.Vue介绍

3.1 作者

3.2 渐进式

3.3 插件

3.3.1 插件

3.3.2 官方插件

3.3.3 第三方插件

1.Vue官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

渐进式JavaScript框架

2. Vue官网介绍

介绍 — Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

解析：

vue本身没有路由的功能、仓库功能即存储功能以及图片懒加载功能等，只是用来搭建简单的页面，可以把一个动态数据渲染成一个页面
如果说想在vue中使用路由的功能，就只能用插件（vue-router）等等，各种插件
渐进式（说直白就是慢慢递进，慢慢前进，就和打游戏时，官方更新版本一样，慢慢去递进去更新，一层一层的，一个版本一个版本的）
灵活：可以和第三方库整合
单页应用（SPA: Single Page Application）：说白了就是一个HTML，特点（组件进行切换，ajax发请求，拿数据进行局部渲染）玩的就是路由

3.Vue介绍

3.1 作者

尤雨溪(一位华裔前Google工程师)

3.2 渐进式

类似于迭代开发，vue.js只是一些核心代码，可以让你搭建基本页面，如果你的页面功能相对比较丰富，那么需要相关的一些插件去完成。

3.3 插件

3.3.1 插件

插件就是一些功能代码模块，它是为了给已经完成的功能代码，额外的去添加功能用的。

3.3.2 官方插件

vuex，vue-router。。。。。官方出品的，都是vue官方的插件

3.3.3 第三方插件

也是为了给vue添加功能用的，但是是别人写的，比如axios

4.为什么要使用vue?

原生的初始化渲染是不会拖慢效率的，甚至比react和vue还要快，因为不需要创建虚拟dom，但是数据一旦更改，那么react和vue比原生的效率要高的多，因为有diffing算法的介入，虚拟dom会进行对比，减少真实dom的重绘重排

第一次渲染的时候，原生的其实不慢 ,要比框架快的，因为不用创建虚拟dom,但是页面一般都是数据会进行改变，并且这种情况很多，所以更改数据时候会比框架慢，因为原生js里面没有diffing算法

举个很简单的动态加载的例子，分别使用vue和原生js，这块只是做对比，不必追求vue怎么写，这个会在下个章节讲

4.1. 原生js写法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>

<body>
    <div id='app'>

    </div>
    <script>
        // 动态数据驱动页面

        // 动态的把数据放到div中
        let arr = ['路飞', '索隆', '山治']
        let str = '<ul>'
        for (let i = 0; i < arr.length; i++) {
            str += `<li>${arr[i]}</li>`
        }
        str += '</ul>'
        document.getElementById('app').innerHTML = str

        // 后期数据更 改了，效率极低，没有虚拟dom,所有的元素都要进行重绘重排
        arr = ['路飞', '索隆', '山治']
        let str = '<ul>'
        for (let i = 0; i < arr.length; i++) {
            str += `<li>${arr[i]}</li>`
        }
        str += '</ul>'
        document.getElementById('app').innerHTML = str

        // 原生的初始化渲染是不会拖慢效率的，甚至比react和vue还要快，因为不需要创建虚拟dom
        // 但是数据一旦更改，那么react和vue比原生的效率要高的多，因为有diffing算法的介入
        // 虚拟dom会进行对比，减少真实dom的重绘重排

    </script>
</body>

</html>
4.2 vue写法

4.2.1 安装vue

官网：安装 — Vue.js

点击开发版本，就会下载一个vue.js的文件

4.2.2 vue写法

vue的写法是有模板的，就会用虚拟dom，只是看不到虚拟dom （后面用一些方法可以看到）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                {{item}}
            </li>
        </ul>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        // vue写法
        // {} 括号是配置对象，配置对象的键名不能乱起 
        let vm = new Vue({
                el: '#app',
                data: {

                    arr: ['路飞', '索隆', '山治']
                }
            })
            // 后期需要修改数据的话，直接修改数据即可 
        vm.arr = ['路飞1', '索隆1', '山治1']
    </script>
</body>

</html>
4.3 总结

效率高，这块要注意个问题，并不是初始化展示的时候，vue就要比原生js要高，因为vue还要创建虚拟dom,所以，这时候原生js就要比vue快，但是，在后期更改数据的时候，原生js又要把所有元素重绘重排一般，而vue则不用，虚拟dom会进行对比，减少真实dom的重绘重排。