上手前的一些概念

为啥要用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中的VMvar 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

Vue.js 学习笔记一相关推荐

Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...

Vue.js 学习笔记一

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

Vue.js 学习笔记一相关推荐

最新文章

热门文章

Vue.js 学习笔记 一

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

Vue.js 学习笔记 一相关推荐

最新文章

热门文章

Vue.js 学习笔记一

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

Vue.js 学习笔记一相关推荐