Vue的相关

Vue

Vue是一个前端js框架，由尤雨溪开发，是我的项目

Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，由于它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue无论从性能上，仍是从成本上都隐隐超过了react，火的一塌糊涂，这个时候，angular开发团队也开发了angular2.0版本，而且改名为angular，吸取了react、vue的优势，加上angular自己的特色，也吸引到不少用户，目前已经迭代到5.0了。

学习vue是如今前端开发者必须的一个技能。

前端js框架到底在干吗，为何要用

js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为以下几点：

1. 渲染数据

2. 操做dom（写一些效果）

3. 操做cookie等存储机制api

在前端开发中，如何高效的操做dom、渲染数据是一个前端工程师须要考虑的问题，并且当数据量大，流向较乱的时候，如何正确使用数据，操做数据也是一个问题

而js框架对上述的几个问题都有本身趋于完美的解决方案，开发成本下降。高性能高效率。惟一的缺点就是须要使用必定的成原本学习。

Vue官网介绍

vue是渐进式JavaScript框架

“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念

Vue能够在任意其余类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也能够轻松融汇其余的技术来开发，而且由于Vue的生态系统特别庞大，能够找到基本全部类型的工具在vue项目中使用

特色：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

Vue是一个MVVM的js框架，可是，Vue 的核心库只关注视图层，开发者关注的只是m-v的映射关系

与AngularJS的对比

Vue的不少api、特性都与angularJS类似，实际上是由于Vue在开发的时候借鉴了不少AngularJS中的特色，而AngularJS中固有的缺点，在Vue中已经解决，也就是青出于蓝而胜于蓝，Vue的学习成本比AngularJS低不少，由于复杂性就低

AngularJS是强主张的，而Vue更灵活

Vue的数据流是单向的，数据流行更清晰

Angular里指令能够是操做dom的，也能够封装一段结构逻辑代码，例如：广告展现模块

Vue中的指令只是操做dom的，用组件来分离结构逻辑

AngularJS的性能比不上Vue

Vue的使用

Vue不支持IE8，由于使用了ES5的不少特性

能够直接经过script标签来引入vue.js，有开发版本和生产版本，开发版本通常咱们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，而且有不少提示，而生产版本所有删掉了

在Vue中提供了一个脚手架（命令行工具）能够帮咱们快速的搭建基于webpack的开发环境...

Vue的实例

每个应用都有一个根实例，在根实例里咱们经过组件嵌套来实现大型的应用

也就是说组件不必定是必须的，可是实例是必需要有的

在实例化实例的时候咱们能够传入一个；配置项，在配置项中设置不少属性方法能够实现复杂的功能

在配置中能够设置el的属性，el属性表明的是此实例的做用范围

在配置中同过设置data属性来为实例绑定数据

mvc/mvvm

阮大神博客

mvc 分为三层，其实M层是数据模型层，它是真正的后端数据在前端js中的一个映射模型，他们的关系是：数据模型层和视图层有映射关系，model改变，view展现也会更改，当view产生用户操做或会反馈给controller，controller更改model，这个时候view又会进行新的数据渲染

这是纯纯的MVC的模式，可是不少框架都会有一些更改

前端mvc框架，如angularjs，backbone：

会发现，用户能够直接操做controller（例如用户更改hash值，conrtoller直接监听hash值变化后执行逻辑代码，而后通知model更改）

控制器能够直接操做view，若是，让某一个标签得到进入页面得到焦点，不须要model来控制，因此通常会直接操做（angularJS，指令）

view能够直接操做model （数据双向绑定）

MVP:

mvp

view和model不能直接通讯，全部的交互都由presenter来作，其余部分的通讯都是双向的

view较薄 ，presenter较为厚重

MVVM：

mvvm

MVVM和MVP及其类似，只是view和viewmodel的通讯是双向绑定，view的操做会自动的像viewmodel经过

v-for

在vue中能够经过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,还能够循环键值对，第一个参数是value，第二个是key，第三个依然是索引

v-on

在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里能够执行一些简单javascript表达式：++ -- = ...

能够将一些方法设置在methods里，这样就能够在v-on:click的值里直接写方法名字能够，默认会在方法中传入事件对象，当写方法的时候加了()就能够传参，这个时候若是须要事件对象，那就主动传入$event

v-on绑定的事件能够是任意事件,v-on:能够缩写为@

为何在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但没必要担忧，由于全部的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会致使任何维护上的困难。实际上，使用 v-on 有几个好处：

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2. 由于你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码能够是很是纯粹的逻辑，和 DOM 彻底解耦，更易于测试。
3. 当一个 ViewModel 被销毁时，全部的事件处理器都会自动被删除。你无须担忧如何本身清理它们。

响应式原理

由于vue是mvvm的框架，因此当数据变化的时候，视图会当即更新，视图层产生操做后会自动通知vm来更改model，因此咱们能够实现双向数据绑定，而其中的原理就是实例会将设置的data逐个遍历利用Object.defineProperty给数据生成getter和setter，当数据变化地方时候setter会监听到而且通知对应的watcher工具进行逻辑运算会更新视图

声明式渲染

在vue中，咱们能够先在vue实例中声明数据，而后经过{{}}等方式渲染在dom中

---

function foo(){// 第16行 getName = function(){console.log(1)} return this } foo.getName = function(){console.log(2)} foo.prototype.getName = function(){console.log(3)} var getName = function(){console.log(4)} function getName(){console.log(5)} foo.getName()//2 //foo是一个函数，也能够说是一个对象，因此它也能够挂载一些属性和方法，18行在其上挂载了一个getName方法 //执行的结果是 getName()//4 //21行有一个全局函数，全局函数声明提早后被20行的getName覆盖，因此输出4 foo().getName()//1 //foo()执行完成后，将全局的getName也就是window.getName给更改后返回this，而在这里this执行的就是window，因此最后执行的就是window.getName，因此输出1 getName()//1 //在上面已经更改全局的getName，因此依然是1 new foo.getName()//2 //new 操做符在实例化构造器的时候，会执行构造器函数，也就是说，foo.getName会执行，输出2 new foo().getName()//3 //new操做符的优先级较高，因此会先new foo()获得一个实例，而后再执行实例的getName方法,这个时候，实例的构造器里没有getName方法，就会执行构造器原型上的getName方法 new new foo().getName()//3 //先执行new foo()获得一个实例，而后在new 这个实例的getName方法,这个时候会执行这个方法，因此输出3 //除了本地对象的方法，其余的函数都能new

---

响应式原理（mvvm）

//ES5中有Object.defineProperty()能够，为某一个对象的属性建立出setter和getter，setter和getter实际上是两个工具函数，分别会在数据被更改或者被使用的时候触发 // 准备给data设置一个msg属性，这个属性改变的时候，页面中的显示也会改变 // var data = {msg:'hello world'} // a.innerHTML = data.msg // inp.oninput = function () { // data.msg = this.value // a.innerHTML = data.msg // } //M var data = {msg:'hello world'} //VM new Bue({ data:data }) //vm将model的数据显示在view上，当用户参数操做，会自动通知viewmodel（事件的处理程序自己就是写在viewmodel中的），这个时候viewmodel就去更改model，数据更改以后，数据的setter会触发，viewmodel会通知view进行更新 function Bue(options) { var data = options.data//真正的数据 var _data = {}//专门搞出来的数据 //为搞出来的数据设置getter和setter let that = this this.watcher = function (newval) { document.getElementById("a").innerHTML = newval } Object.defineProperty(_data,'msg',{ get:function(){//会设置数据的值，会在使用的时候触发，返回的值是多少，数据就是多少 console.log('getter') return data.msg }, set:function(newval){//数据被更改的时候会触发set，这个时候再通知viewmodel去控制view层改变 that.watcher(newval) } }) document.getElementById("a").innerHTML = _data.msg inp.oninput = function () { _data.msg = this.value//更改数据 } }

vue响应式原理：

//将数据挂载在vue的实例上的时候，Vue会对这些数据进行遍历处理，建立watcher，经过监听setter和getter来通知watcher,watcher进行计算后更新view //数据更改，view更改，view更改，数据更改，这个mvvm里的一个特性（响应式数据绑定），体现它的效果是数据双向绑定 //这个特性在vue是经过对数据进行Object.defineProperty处理来实现的，实现的原理vue起了个名字叫响应式原理