Vue.js入门笔记(二)--MVVM理解

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();
    }
});
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 我行我“速” 设计师: Amelia_0503
应支付0元
点击重新获取
扫码支付

支付成功即可阅读