第一章认识Vue

2024-04-05 11:23:30

1.Vue概述

1.1.早期前后端分离模式

早期的前后端分离开发模式是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table {
                width: 600px;
                text-align: center;
                border-bottom: solid 2px #DDD;
                /* 合并边框 */
                border-collapse: collapse;
            }
            td,th {
                border-bottom: solid 1px #DDD;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <h3>用户信息</h3>
        <table>
            <tr>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>用户性别</th>
                <th>用户年龄</th>
            </tr>
            <tbody id="userBox">
                <!-- 这里是动态内容 -->
            </tbody>
        </table>
        <script>
            let userArr = [{
                userId: 1,
                userName: '张三',
                userSex: '男',
                userAge: 20
            }, {
                userId: 2,
                userName: '李四',
                userSex: '女',
                userAge: 21
            }, {
                userId: 3,
                userName: '王五',
                userSex: '男',
                userAge: 22
            }]
            let userBox = document.getElementById('userBox');
            let str = '';
            for (let i = 0; i < userArr.length; i++) {
                str += '<tr>' +
                           '<td>' + userArr[i].userId + '</td>' +
                           '<td>' + userArr[i].userName + '</td>' +
                           '<td>' + userArr[i].userSex + '</td>' +
                           '<td>' + userArr[i].userAge + '</td>' +
                       '</tr>';
            }
            userBox.innerHTML = str;
        </script>
    </body>
</html>

以上开发模式的特点是：

1.必须直接操作DOM，动态改变DOM对象的内容与样式。
2.必须要进行大量的字符串拼接，才能拼接出动态内容，然后绑定到视图（html）上。
3. 这种绑定方式是单向的。即：使用javascript将动态数据绑定到DOM上，但是用户操作DOM引起的变化，却不能反映到javascript的动态数据上。

1.2.MVVM框架

MVVM框架分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）

M：模型层，主要负责业务数据相关；
V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

1.3.Vue简介

Vue.js : 渐进式JavaScript 框架（官网说明），它就是一个前端MVVM框架。 Vue.js的作者为Evan You（尤雨溪），任职于Google Creative Lab。 Vue的主要特点就和它官网 https://cn.vuejs.org/ 所介绍的那样：（1）简洁（2）轻量（3）快速（4）数据驱动（5）模块友好（6）组件化
2.Vue.js快速入门 Hello World
2.1.安装Vue环境

Vue官方安装教程：https://cn.vuejs.org/v2/guide/

请使用Vue官方安装教程讲解。

2.2.Hello World程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            //定义全局变量vm
            let vm = new Vue({
                el: '#app',
                data: {
                    msg: 'Hello World!'
                }
            });
        </script>
    </body>
</html>

3.vue双向数据绑定

修改html展示代码

<div id="app">
     <br>
    <input type="type" v-model="msg">
</div>

可以看到我们操作的view控件数据，直接影响到了我们的vm.data，并且又进一步影响到了页面，这就是Vue的双向数据绑定。整个过程的原理如下图所示:

码农公寓