Vue.js 学习笔记一

最新推荐文章于 2024-07-21 10:17:51 发布

weixin_30307267

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量109

点赞数

文章标签： javascript 测试前端 ViewUI

原文链接：http://www.cnblogs.com/luyShare/p/11527789.html

版权

上手前的一些概念

为啥要用Vue.js

Vue.js 是目前最流行的前端框架之一，专注于视图层，容易上手。

使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定)，提高渲染效率，更专注于业务逻辑，提高开发效率。

这里提一下mvc和mvvm

mvc是后端分层开发的概念，是针对整个项目的设计思想，，将整体分为Model，View和Control三层。

M层（模型）只负责建立数据类，以及相应的CRUD操作。

C层（控制器）负责业务逻辑处理，CRUD操作需要调用M层。

V层（视图）用户能看见就是V层，用户的操作如果需要业务逻辑处理，则请求C层。

mvvm则是前端的分层开发思想，主要专注于视图层的分离，把每个页面，分成了M，V，VM三层。

M层（数据）存放V需要展示的数据。

V层（视图）展示给用户看的Html内容。

VM层，调度者，通过双向绑定分割并关联了M和V。

例如，V要展示一个数组的信息，这个数组在M中，V通过VM获取M中的数组，然后展示。V展示数据后，进行了修改，通过VM，把修改后的数据保存在M中。

MVVM提供了数据的双向绑定，将M和V分离开，减少的DOM操作，提高了效率。

这句话是不是之前见过？没错，Vue.js框架，就是干这个的。

Vue.js与MVVM

写一个简单的vue.js代码

新建一个web应用程序，选择MVC，新建控制器 HomeController，代码

        [HttpGet]
        public ActionResult Vue1()
        {
            return View();
        }

生成视图，视图中引用vue.min.js包

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Vue.Js学习一</title>
    <!--1.导入vue包-->
    <script src="~/Scripts/vue/vue.min.js"></script>
</head>
<body>
    <!-- 将来vue的实例会控制这个元素中的所有内容-->
    <!--Vue实例控制的元素区域，就是mvvm中的V-->
    <div id="divApp">
        <p>{{msg}}</p>
    </div>
    <script>
        //2.创建vue的实例
        //当我们导入vue包后，在浏览器内存中，就多了一个Vue的构造函数，我们可以new 出来
        //我们new出来的这个v对象，就是Mvvm中的VM
        var v = new Vue({
            el: '#divApp',//表示当前new的Vue的实例，要控制页面上的哪个区域,这里控制id为divApp的元素
            //这个data就是MVVM中的M，保存页面需要的数据
            data: //存放el中要用到的数据
            { 
                msg: 'Vue学习第一课!'//通过vue的指令，就能把数据渲染到页面上，不用再操作DOM元素
            }
        })
    </script>
</body>
</html>

运行结果

f12查看html代码

跟我们以前手动操作dom元素赋值完全一样。

代码很简单，对vue中的mvvm分层做了注释说明，便于理解。

Vue.js 学习笔记二，一些输出指令

转载于:https://www.cnblogs.com/luyShare/p/11527789.html

weixin_30307267

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 学习笔记一

上手前的一些概念为啥要用Vue.jsVue.js 是目前最流行的前端框架之一，专注于视图层，容易上手。使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定)，提高渲染效率，更专注于业务逻辑，提高开发效率。这里提一下mvc和mvvmmvc是后端分层开发的概念，是针对整个项目的设计思想，，将整体分为Model，View和Control三层。...
复制链接

扫一扫