[vue] 1-vue开篇

为什么学习vue

每个人学习Vue的目的是各不相同的。

可能你的公司正要将原有的项目使用Vue进行重构。

也可能是你的公司新项目决定使用Vue的技术栈。

当然，如果你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。

当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。

前端框架的三大马车

angular 谷歌 MVC（设计典范） M(数据) V(视图) C(控制器) 双向数据绑定

react facebook 视图层的框架view 虚拟dom

vue 尤雨溪 双向数据绑定+虚拟dom

再次回到问题，为什么要学习vue

1、运行效率高 采用虚拟dom 减少了dom的操作，也就减少了性能的消耗。

2、开发效率高 采用了组件化开发 。

3、将开发者的精力从操作dom中解放出来，转移到处理数据上。

上面提到了dom操作，下面的一个小案例可以体现出操作dom在性能上的差异。

        console.time('run')
        let init = 0
        var content = 0
        // 需求，在页面上显示i的值
            // 方式一：我们在循环体里面给div直接赋值
        for(var i = 0; i <= 100000; i++) {
            content = document.getElementById('content');
            content.innerText = i;
        }
        // 这段代码所运行的时间
        console.timeEnd('run')  //run: 76.166015625 ms
        // 上面的代码表示，在每一次循环当中给content.innerText赋值一次，循环了十万次，也就是说对dom操作了十万次。


        console.time('run')
        let init = 0
        var content = 0
        // 需求，在页面上显示i的值
            // 方式二：不在循环内操作dom，在循环结束后只进行一次赋值
        for(var i = 0; i <= 100000; i++) {
            content = document.getElementById('content');
        }
        content.innerText = i;
        // 这段代码所运行的时间
        console.timeEnd('run')  //run: 15.89599609375 ms
        //在这段代码中，只在最后的循环中进行了一次赋值，所以对比两段代码的运行时间，很明显的可以看到操作dom的次数对程序运行的时间有很大影响。

在方式二中，i 在赋值给content.innerText之前，它都是存在内存中的，存在内存中的数据，它的消耗是远远小于修改dom的。

上面只是关于vue在操作dom方面的核心—> 减少dom操作

​ 那么它是如何做到减少dom操作的呢？

​ 使用虚拟dom

​ 什么是虚拟dom，长什么样？

虚拟dom其实也是一个对象，他的原型大概是这个样子，说白了就是用一个js变量来描述真实dom

        let obj = {
            tag: 'div',			//标签名
            className: 'test',		//类名
            id: 'div1',		// id
            children: [   //如果有子标签在这里，以数组的形式来存储一个或多个子标签，每一个子标签是一个对象
                {
                    tag: 'p',
                    text: '你好'
                },
                {
                    tag: 'span',
                    text: '呵呵'
                }
            ]
        }

渲染成真实dom

        <div id="div1" className="test">
            <p>你好</p>
            <span>呵呵</span>
        </div>

vue减少dom操作的原理就是在虚拟dom中进行操作数据（虚拟dom是存在内存中的），操作完数据，再渲染成真实dom，这样就只对dom操作了一次，减少了性能的消耗。

再继续回到刚才的问题，为什么要学习vue，从工作来说，市场上vue的需求越来越多，从技术层面来说，他能大大提高我们项目的性能，当然还有很多为什么，但是这就需要以后的学习中体会了。

​

认识vue

Vue (读音 /vjuː/，类似于 view)

Vue是一个渐进式的框架，什么是渐进式的呢？

• 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

• 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

• Vue有很多特点和Web开发中常见的高级功能

  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

vue.js安装

vue的实例化

• 1、下载引入

• 2、找一个dom元素，这个dom需要被vue控制

• 3、再js中实例化vue

安装vue的方式：

​ 方式一：直接CDN引入你可以选择引入开发环境版本还是生产环境版本（引入开发版本）

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 --> //压缩过
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

​ 方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

方式三：npm安装

​ 通过webpack和CLI的使用，使用该方式。

Vue的第一个程序

    <div id="app">
        <!-- 这里的双大括号的语法是Vue里面独有的，叫做mustache插值法 -->
        <!-- 这个name当前是data中的name，data中的数据可以直接通过mustache插值法进行渲染，{{双大括号的形式}}，前提是经过el的绑定。 -->
        hell {{name}}
    </div>
    <script>
        // 创建一个Vue的实例，它需要传入一个对象
            // 1、对象里面的el，表示要挂载的元素，挂载的元素和该元素的子节点都会被Vue实例所处理
            // 2、对象里面的data，这个属性通常存储一些数据， 这些数据可以是我们直接定义出来的，比如像上面这样
        const app = new Vue({
            el: '#app',
            data: {
                name: 'Vue'
            }
        })
    </script>

上面这段代码的执行流程是

• 代码执行到：11行~15行 页面显示：

  • hell {{name}}

• 执行第20行代码创建Vue实例，并且对原HTML进行解析和修改。

• 并且，目前的代码是可以做到响应式的(修改name的值，页面也会跟着修改)

如果是原生应该怎么做？

    // 原生js的做法(编程范式: 命令式编程)
    // 1.创建div元素,设置id属性

    // 2.定义一个变量叫message

    // 3.将message变量放在前面的div元素中显示

    // 4.修改message的数据: 今天天气不错!

    // 5.将修改后的数据再次替换到div元素

两种对比，很明显Vue更方便一些，我们只需要把dom交给他管理，剩下的繁琐工作它都可以帮我们搞定。

注意：一个js文件，可以实例化多个Vue实例，每一个实例都绑定自己的dom元素，但是他们的数据都不通用。