Vue.js入门笔记（二）--MVVM理解

最新推荐文章于 2022-11-22 14:06:09 发布

java阳旭

最新推荐文章于 2022-11-22 14:06:09 发布

阅读量1.7k

点赞数 6

分类专栏： Vue 文章标签： vue java js mvvm

本文链接：https://blog.csdn.net/gaoxiaokun4282/article/details/106295002

版权

Vue 专栏收录该内容

18 篇文章 7 订阅

订阅专栏

MVVM 概念

MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model）。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel 负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TIyozsN9-1590193034946)(.\Vue.js入门笔记（二）–MVVM理解\01.jpg)]

MVVM 个人理解

1、原生 JavaScript 对 DOM 操作

document.getElementById("username").value = "yangxu";

2、jQuery 对 DOM 操作

$("#username").val("yangxu");

3、jQuery 的异步请求

//-----逻辑部分begin-----
$.ajax({
    type:"post",
    url:"jquery/testAjax",
    data:'{"id":1, username:"yangxu"}',
    dataType:"json",
    success:function(data){
        //-----赋值部分begin-----
    	//使用jQuery给页面的元素赋值，数据就在data中
        $("#username").html(data.username);
        //-----赋值部分end-----
	}
});
//-----逻辑部分end-----

原来写 jQuery 的时候，逻辑部分和赋值部分是一体的。

4、Vue.js 解决的问题

对逻辑部分和赋值部分进行分离，写逻辑代码的时候不用管赋值代码，写赋值代码的时候不用管逻辑代码，这样敲代码的时候结构更加清晰。

最终分离的结果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title</title>
	</head>
	<body>
    	<div id="app">
			<table id="dataList">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>邮箱</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 在html中专心写赋值代码即可  -->
                    <tr v-for="u in userList">
                        <td>{{u.id}}</td>
                        <td>{{u.username}}</td>
                        <td>{{u.password}}</td>
                        <td>{{u.sex}}</td>
                        <td>{{u.age}}</td>
                        <td>{{u.email}}</td>
                    </tr>
                </tbody>
            </table>
		</div>
        <script src="/vue_demo2/js/user.js"></script>
        <script src="/vue_demo2/js/axios.min.js"></script>
        <script src="/vue_demo2/js/vue.js"></script>
	</body>
</html>

new Vue({
    el:"#app",
    data:{
        userList:[]
    },
    methods:{
        //在.js中专心写逻辑代码即可
        findAll:function(){
            var _this = this;
            axios.get('/vue_demo2/user/findAll.do')
                .then(function (response) {
                    _this.userList = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    created:function(){
        this.findAll();
    }
});