章节9.Vue.js基础

前言

关于vue.js

我们已经在第7章学习了nodejs的基础，然后在第8章学习了正则表达式，知道了如何搭建服务器。结合我们开发的留言板功能，已经懂得了在没有学习数据库的情况下，如何利用json文件存储我们的数据。

那么问题来了，我们开发的网页，写在页面上的内容，可不可以也采用json文件进行读取呢？如果页面上的电话号码需要修改，可不可以只修改一次就可以了，其它页面上的电话号码都跟着一起修改了呢？

vue.js介绍

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

重要说明：

由于大家是第一次接触界面框架这个概念，目前你可以粗俗的认为：这个vue.js类似我们前面学习的jquery，它的出现是为了帮助我们更好的更快的高效地开发用户界面（网页），类似于我们前面学习的jquery是为了帮助我们更方便的使用原生js的各项功能而做的封装。

vue.js目前有两个版本：Vue2 和 Vue3。我们作为从0开始学习过来的初学者，我们将从最简单的开始学习。介于本章内容，是为了完成我们企业网页的数据渲染问题，因此我们采用Vue2进行入门学习，在后面季度的课程，我们将逐步过渡到Vue3。

本章节，我们采用案例实战的形式，结合 [vue.js基础教程]，来完成我们企业网页的数据渲染，带领大家初步了解vue.js的基础功能。

# 一、课前准备

# ① 启动node服务器，引入vue.js

引入vue.js方式很多，如在线引入，或者本地引入
本地引入和我们前面讲jQuery一样，先下载到你电脑上然后引入到页面上，下载途径非常多，如cdn下载 [vue.js下载]
在线引入： [vue.js在线引入]

根目录新建 /vuetest.html，并引入vue文件（取名：vue.2.7.0.min.js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuejs基础学习</title>
    <link rel="stylesheet" href="./static/css/common.1.0.css">
    <script src="./static/js/vue.2.7.0.min.js"></script>
</head>
<body>
    <!-- 模板->vue->转成真实的dom -->
    <div id="app">
        <!-- <h1>vuejs基础学习页面</h1> -->
        <h1>{{title}}</h1>
    </div>
    <script>
        //vue.js给我们提供了一个构造函数 function Vue(){}，那么我们可以new出一个实例来
        //构造函数里面有一个对象参数，表示对Vue的配置
        new Vue({ //可以用一个变量接收，也可以不接收，重点看对象里面的配置
           //你要创建一个vue的应用，应该控制页面的那个区域，
           //虽然说vue可以控制整个页面，但是我们经常只控制页面中的一个小区域
           //当然如果页面的最外层就这一个div，那么就是控制整个页面了
           el:'#app',//css选择器，一般用id选择器
           //接下来有个配置data,可以把它配置为对象，表示说页面中要使用的数据
           //你可以写一些数据在页面上使用
           data:{//对象里面的属性名自已定义
               title:'vuejs基础学习页面',//如何将这个数据写在h1里面去
               //传统的js方式是 Dom选择器找到h1元素，设置h1.innerText='vuejs基础学习页面'
               //现在我们使用vuejs，当我们用vue去控制外面这个div之后，这个div里面的所有元素就变成了一个模板
               //过程是：模板->vue->转成真实的dom
               //这样的话，我们就可以在模板里面进行各种操作，比如，我们使用特殊的语法，将我们定义的title属性的值写到模版里面去
               //我们可以使用两个大括号{{里面可以写js的表达式}}
               //那么这个js读取的是什么呢，读取的是vue实例里面，可以用的东西，比如 data里面的数据可以用
               //意义在哪里呢？当我们data里面的数据发生变化的时候，模版会自动重新生成，再次把模版渲染成真实的dom
               //那么页面上的数据也会变化，如：title:'vuejs基础学习页面-大胡子语法mustach'
               //这就是vue最核心的特点，我们开发的时候，只需要关注数据的变化，不用在关注页面的变化
               //就是说我们整个页面有哪些东西变化了，比如 用户点击了或者发生了什么事件，或者隔段时间哪些数据会变化
               //而我们的页面写出来是一个模板，模版是根据页面的数据生成的，因此我们只需要关注我们的数据，页面就会自动跟着改变
           }
        });

    </script>
</body>
</html>

# 二、体验vue的数据响应式

注意：Vue 不能挂载在 body、html 这样的根节点上
更多知识和配置项，参考：[vue.js基础教程]

# ① 配置项data中的数据响应式，及渲染到页面上的真实DOM效果

可参考： [Vue.js 起步]

<body>
    <script src="./static/js/vue.2.7.0.min.js"></script>
    <div id="app">
        <div class="py-5 px-5 bg-light" style="width: 320px;margin: auto;">
            <img :src="carimg" >
            <h2>车型名称 : {{carname}}</h1>
            <h3>类型 : {{caryear}}</h2>
            <h2>指导价 : {{price}}</h2>
            <h3>座位数 : {{seats}}</h2>
        </div>
    </div>
    <script>
        // 自定义数据对象
        let data = {
            carimg:'https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/benzGlc300.jpg',
            carname: "奔驰GLC 300 L 4MATIC 动感型 5座", 
            caryear: "2023款", 
            price: "47.93万",
            seats:5
        };
        var vm = new Vue({
            el: '#app',
            data: data
        });
        console.log(vm);
        // 它们引用相同的对象！
        console.log(vm.carname === data.carname); // true
        // 设置属性也会影响到原始数据
        // vm.price = "45.88万";
        // 反之亦然
        // data.seats = 7;

        //除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
        console.log(vm.$data === data); // true
        console.log(vm.$el === document.getElementById('app')); // true
    </script>
</body>

上节课已经带大家感受了配置项data中的数据响应式，所谓数据响应式：就是数据发生变化的时候，vue会收到通知并立即作出一些响应，并对页面进行重新渲染。

# ② 循环语句，事件处理体验

<body>
    <script src="./static/js/vue.2.7.0.min.js"></script>
    <!--过程是：模板->vue->转成真实的dom -->
    <div id="app">
        <div class="flex justify-center">
            <div v-for="item in cars">
                <div class="bg-light py-5 px-5" style="width: 320px;">
                    <img :src="item.carimg">
                    <h2>车型名称：{{item.carname}}</h2>
                    <h3>车型：{{item.caryear}}</h3>
                    <h2>指导价：{{item.price}}</h2>
                    <h3>座位数：{{item.seats}}</h3>
                    <h2>库存数：
                        <button style="cursor: pointer;" @click="item.stock++"> + </button>
                        {{item.stock ? item.stock : '缺货'}} 
                        <button style="cursor: pointer;" @click="changeStock(item,item.stock-1)"> - </button>
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 自定义数据
        let cardata = [
            {
                carimg:"https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/benzGlc300.jpg",
                carname:'奔驰GLC 300 L 4MATIC 动感型 5座',
                caryear:'2023款',
                price:'47.93万',
                seats:5,
                stock:10
            },
            {
                carimg:"https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/benzs.jpg",
                carname:'奔驰S500L 4MATIC 豪华型',
                caryear:'2024款',
                price:'158.68万',
                seats:5,
                stock:7
            },
            {
                carimg:"https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/benzc.jpg",
                carname:'奔驰C260L 皓夜版',
                caryear:'2023款',
                price:'25.32万',
                seats:5,
                stock:14
            }
        ];
        var vm = new Vue({
            el:'#app',
            data:{
                title:'奔驰1号仓库库存',
                cars:cardata
            },
            methods:{
                changeStock(item,newstock){
                    if(newstock < 0){
                        newstock = 0;
                    }
                    item.stock = newstock;
                }
            }
        });
    </script>
</body>

回顾

js表达式
 [参考：js基础知识-js运算符]
[参考：js基础知识-基本包装类型：字符串、数组、数值的处理]

# ③ vuejs计算属性体验

可参考： [Vue.js 计算属性]

<body>
    <script src="./static/js/vue.2.7.0.min.js"></script>
    <!--过程是：模板->vue->转成真实的dom -->
    <div id="app">
        <div class="flex justify-center">
            <div class="bg-light py-5 px-5" style="width: 320px;"
                v-for="(item,index) in cardata">
                <img :src="item.carimg">
                <h2>车型名称：{{item.carname}}</h2>
                <h3>车型：{{item.caryear}}</h3>
                <h2>指导价：{{item.price}}</h2>
                <h3>座位数：{{item.seats}}</h3>
                <h2>库存数：
                    <button style="cursor: pointer;" @click="item.stock++">
                        + </button>
                    {{item.stock ? item.stock : '缺货'}}
                    <button style="cursor: pointer;"
                        @click="changeStock(item,item.stock-1)"> - </button>
                </h2>
                <h1><button @click="deleteCar(index)">删除</button></h1>    
            </div>
        </div>
        <h1 class="flex justify-center">总库存： {{total}} {{totalfn()}}</h1>
    </div>
    <script>
    // 自定义数据对象
    let cardata = [
        {
            carimg:"https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/benzGlc300.jpg",
            carname:'奔驰GLC 300 L 4MATIC 动感型 5座',
            caryear:'2023款',
            price:'47.93万',
            seats:5,
            stock:8
        },
        {
            carimg:"https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/benzs.jpg",
            carname:'奔驰S500L 4MATIC 豪华型',
            caryear:'2024款',
            price:'158.68万',
            seats:5,
            stock:7
        },
        {
            carimg:"https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/benzc.jpg",
            carname:'奔驰C260L 皓夜版',
            caryear:'2023款',
            price:'25.32万',
            seats:5,
            stock:14
        }
    ];
    var vm = new Vue({
        el:'#app',
        data:{
            title:'奔驰1号仓库库存',
            cardata,
        },
        computed:{
            total(){
                return  this.cardata.reduce((a,b)=>a + b.stock,0);
            }  
        },
        methods:{
            changeStock(car,newStock){
                console.log(newStock);
                if(newStock < 0){
                    newStock = 0;
                }
                car.stock = newStock;
            },
            totalfn(){
                return  this.cardata.reduce((a,b)=>a + b.stock,0);
            },
            deleteCar(index){
                this.cardata.splice(index,1);
            }
        }
    });
    
</script>
</body>

搜索：求和 复习一下reduce()的用法。
数组中删除一项，搜索：splice()方法复习一下。

# 三、理解vue的注入、虚拟DOM及底层原理

# ① vue实例成员的注入

下载node

为什么vue实例自带的成员要以$开头或者以_下划线开头：主要是由于我们在配置项中会注入新的成员，防止和我们注入的成员重名，我们注入的时候也要注入不要在写变量的时候以$开头下划线开头.

模板中，可以使用vue实例中的成员，包括：我们注入的还有vue实例自带的。
如：存在vm.title 所以可以在模版中 {{title} }，存在 vm.$el 所以可以在模版中 {{$el} } {{$el.tagName} }，存在 vm.$data 所以可以在模版中 {{$data} } {{$el.str} }

# ② 虚拟DOM

我们在写案例的时候，已经多次说到，我们指定某个区域，这个区域就是vue的模版，写的这些元素按照我们以前的理解，它就是一个一个dom元素，但是你现在写到的是vue的模版里面，那么这些元素都不是DOM元素，vue会将这整个当做一个字符串，最终它会变成一个虚拟DOM，那为什么要这么做呢？
Vue认为：如果我某个数据改变了，我去重新生成界面，也就是说我如果直接去操作真实DOM元素，那么会严重的影响效率，因为真实的dom会触发浏览器的重排啊、回流啊、绘制啊等等，会触发浏览器的重新渲染，会引发效率问题，为了提升效率呢，vue使用的是虚拟DOM的方式，来描述要渲染的内容，那么什么叫做虚拟DOM呢？虚拟dom其实就是一个普通的js对象，操作js对象给js对象的属性赋值、更改属性值，这是整个js中执行效率最高的、执行最快的操作，因为它不涉及界面。接下来我们来举一个例子。

页面上有一个div元素它的id为app，它里面有两个子节点h1和p，然后h1元素里面有一个子节点，该子节点是一个文本节点，文本内容为“迪丽热巴”，p元素也有一个文本节点，文本内容为“全名：迪丽热巴迪力木拉提” （这个我们在第二学期第1季课程-章节15.网页文档对象模型DOM，这些概念讲的非常清楚）

看真实的DOM怎么写：
<div id="app">
    <h1>迪丽热巴</h1>
    <p>全名：迪丽热巴迪力木拉提</p>
</div>
那Vue怎么认为呢？Vue会用虚拟DOM，就是一个js对象来进行描述：
{
    tagName:'div',
    children:[
        {tagName:'h1',children:[{text:'迪丽热巴'}]},
        {tagName:'p',children:[{text:'全名：迪丽热巴迪力木拉提'}]}
    ]
}
然后，vue通过内置的编译器，将我们这个js对象，就是虚拟DOM，最终编译渲染成真实的DOM.

当数据发生变化后，将引发重新渲染，vue会比较新旧两个虚拟DOM对象，找出差异，然后把差异部分应用到真实DOM中

那么vue又是如何得到虚拟DOM的呢？

# ③ 虚拟DOM的底层原理

原因是在我们实例化Vue构造函数它里面的配置项，有一个render函数，虚拟DOM的由来就是运行了Vue内置的render函数返回的结果，这个render函数对模版编译返回的结果就是虚拟DOM，因此我们也可以在render函数里面写模版。

<!-- 模版 -->
<div id="app">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            h1data:'迪丽热巴',
            pdata:'迪丽热巴迪力木拉提'
        },
        //内置函数，接受第一个参数：函数
        render(vdom){
            console.log('内置函数render');
            //写模版，返回对模版编译的虚拟DOM
            // return vdom('h1',[]);
            return vdom('div',[
                // vdom('h1','迪丽热巴')
                vdom('h1',`${this.h1data}`),
                vdom('p',`全名：${this.pdata}`)
            ]);
        }
    });
</script>

并且我们发现两个问题：

当数据进行改变的时候，会重新触发render函数进行重新渲染；比如在中控台：vm.h1data = 'DilraBa'; 因此，vue的重新渲染本质其实就是调用的render函数生成虚拟DOM。
我们发现在render函数里面写了模版之后，页面上写的模版就没有了。那么这里就涉及到Vue写模版的问题：

其实大家也发现了，我们在render函数里面写模版，非常麻烦，且不利于阅读，Vue既然是给我们提供便利的，那么它是怎么做的呢？
Vue直接给我们提供了模板，模板的作用只有一个，就是Vue根据提供的模板生成render方法，也就是：你不在render里面写模版，Vue在配置项里面还有一个模板配置：template，它会去看一下template配置里面有没有写模版代码。

<script src="./static/js/vue.2.7.0.min.js"></script>
<!-- 模版 -->
<div id="app">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            h1data:'迪丽热巴',
            pdata:'迪丽热巴迪力木拉提'
        },
        //内置函数，接受第一个参数：函数
        // render(vdom){
        //     console.log('内置函数render');
        //     // return vdom('h1',[]);
        //     return vdom('div',[
        //         // vdom('h1','迪丽热巴')
        //         vdom('h1',`${this.h1data}`),
        //         vdom('p',`全名：${this.pdata}`)
        //     ]);
        // },
        //template配置，字符串，虚拟节点
        template:`
            <div>
                <h1>{{h1data}}</h1>
                <p>全名1：{{pdata}}</p>
            </div>
        `,
    });
</script>

将template配置，字符串，虚拟节点Dom转成render函数里面的代码形式，就是帮你写了一个render方法。
当然大家发现了，在template里面写的字符串和我们在页面上写的模版代码是一样的，因此，当配置项里面既没有写render函数，也没有写template配置，那么vue就会通过el属性找一下你是否在页面上指定了模版区域，然后将这个元素区域（包括元素本身）直接作为模版进行编译成render函数。
也就是Vue把模版编译成render函数的顺序是：