第一章 认识Vue

  • 时间:
  • 来源:互联网
  • 文章标签:

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的双向数据绑定。整个过程的原理如下图所示:
在这里插入图片描述

本文链接http://www.taodudu.cc/news/show-1944503.html