vuejs核心概念简析

概述

使用vue编写网页是一个让人愉悦的过程,它同时具有angular和react的优势,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.

快速开始vue最好的方式是阅读官网的文档,这是学习vue最好的途径,没有之一.基本上通读文档便可让你从入门到精通了,下面讨论一下vue的精髓与重点须要理解的部分

vue的精髓在于基于数据的状态和组件式编程

数据驱动

基于操做dom的方式

程序=数据结构+算法

这是每一个程序都耳熟能详的一句话,可在前端这里并不纯粹,由于前端须要跟界面打交道,html+css并没用被抽象成某种在js中使用的数据结构,充当的更可能是界面的一种配置,jquery程序员看待他的方式就一块块的ui,用到的时候再$一下,获取以后修改.整个程序写下来是零零散散的节点操做.

一个比较实际的状况就是,在ui控件有联动的时候,若是没有一种机制来管理这些ui之间的修改,那么依赖程序员本身去手动管理这些ui的状态,会让人烦不胜烦,且容易出现bug.

总结一下基于操做dom的前端开发方式

拼界面->找到dom节点->修改属性->检测是否有其余影响的节点->根据刚刚修改的dom节点更新本身的状态
那么上面的那句话就变成了

前端程序 = 拼界面+操做ui+算法

基于数据驱动的方式

vue或者angular这些mvvm框架给了前端另外一种思路,彻底基于数据驱动的编程,彻底根据数据的状态决定ui以何种方式展现.我以为这就是mvvm框架最大的思路上的突破,而directive或者filter或者是element directive,在jquery时代也不是什么新鲜的东西(这并非说指令那些不重要).

让咱们看一个例子,对比二者编程思路的不一样

上面是常见的登陆的界面,需求以下:

1. 上面所有填写完成格式正确,登陆按钮才能点击

2. 图片验证码须要用户名和输入法都填写完毕的状况才出现

使用dom的编程方式主要步骤以下

1. 获取用户名的input,侦听输入事件,在回调里面判断步骤4

2. 获取密码的input,侦听输入事件,在回调里面判断步骤4

3. 获取验证码的input,侦听输入事件,在回调里面判断步骤4

4. 回调函数须要判读用户名和密码是否输入正确,若是是显示验证码,再判断验证码是否已经输入
   是则获取提交按钮,并显示.

5. 点击提交按钮的时候,获取3个input的值,提交数据.

数据驱动的作法

1. 声明三个变量,用户名,密码,验证码,使用数据绑定把变量绑定到三个input

2. 验证码的显示状态 = 用户名不为空 && 密码不为空

3. 提交按钮的显示状态 = 用户名不为空 && 密码不为空 && 验证码不为空

4. 点击提交按钮,提交三个变量

咱们在数据驱动的时候,并无操做dom节点,也没有侦放任何的事件,这些框架都为咱们作好了,框架采用一种数据绑定的方式,自动绑定dom节点的属性.这样就把你从操做dom节点的繁琐过程当中解脱出来了,你只要专一于数据的状态,ui更新的事情你不须要去管了,不过是样式仍是内容,可见性仍是切换class,框架帮你把关注点从传统的dom操做转移到了数据,回归编程的本质:数据结果+算法.
上面的例子,最直白的表现就是,你几乎不须要写一行代码了^_^,如今可能不太明显,咱们会在后续的分享中,看到数据驱动在复杂状态中的优异表现.

组件式编程

这个理念不是来源于vue,我第一次接触到组件式编程的是adobe的flex,而把web组件式开发发扬光大的应该是react了,组件开发是一种朴素的开发思想,分而治之,大型系统拆分红一个个的小模块小组件,分配给不一样的人.额外的好处是顺便能复用这个组件。

理解组件的思想能够类比函数。一个函数包含哪些东西呢？

1. 形参

2. 局部变量

3. 函数名

4. 返回值

那对应到vue中又是什么呢?

函数	vue组件
形参	slot,props
局部变量和局部函数	data,methods
函数名	name
return	template

形参

这个放在第一个讲，由于比其它的复杂。

props

函数能够接受外部的输入，然入内部吐出加工以后的结果，在vue中也是如此的，vue的组件容许从外部接收定义好的prop，能够指定相关的数据类型，默认值，是否容许为空，是否双向数据同步，是否单次绑定，这就把vue组件从静态的组件赋予了从外部接受参数，从而实现配置化的能力，举一个例子，通常一个面板须要有可变的标题，底部多少个按钮，是否显示后面的蒙板层，这些均可以从外部接受参数传入，从而达到组件的多样化配置，大大加强了组件的灵活性。

slot

那slot呢？既然有了props，为何还须要slot来作为另外一种外部的输入呢？

咱们仍是以上面的面板作为一个例子，试想一下，有一个panel的函数以下

function panel(title,btnCount,showModel,content){

}

你们注意到了content了没有，面板的主体内容，通常来讲面板的主体内容都比较复杂，这意味着在html标签会十分的多，那么若是在prop里面传入html的模板内容，代码的可维护性将大大的下降，并且十分不优雅，因此vue使用了slot，即所谓的插槽，来实现内容的"props"，它能够在组件内部定义好slot的插入点，外部html插入的时候就能指定一个插入点替换掉这个slot了，我理解的slot就是针对复杂内容的一种外部参数了，那么不复杂的内容是否是就能够不须要了？我我的以为是的，好比你的面板可能只须要一句话，那大可使用prop传入便可，好比alert。可是，可是，内容的可替换性还远远不算是slot的惟一不一样，这里我想说一下slot内容的做用域的问题。

试想一下，一个面板主体的内容是一个表单，表单使用v-model绑定了一些值，那么这些绑定的值是属于提供主体内容组件的，仍是属于这个面板的呢？

咱们来猜测一下:
属于面板
若是v-model属于面板的话，那么你有多少的绑定，就须要在面板组件声明多少，而这几乎是不可能的，由于主体内容每一个面板都几乎是不同的，这就形成了，主体内容跟面板的高度藕合，这个面板就几乎没有了任何的可扩展性。

属于提供主体内容的组件
由提供主体内容的组件本身去管理本身的绑定，这就比如，面板只提供了一个运动场地，大家爱作什么由大家本身去决定。这样的话，slot插入点跟内容彻底解藕，你作你的事情，我只给你提供一个位置。这就是slot的精妙之处。咱们不生产内容，咱们只是内容的搬运工。

vue的文档已经写得很清楚了

父组件模板的内容在父组件做用域内编译；子组件模板的内容在子组件做用域内编译

因此在设计一个组件的时候，何时使用props，何时使用slot呢？

属于数值驱动的用props，属于html内容的使用slot，除非你的内容只是一句字符串。简单明了。

局部变量

局部变量很好理解，对应于vue的data的而已，这跟函数里面使用var声明一个变量是同样的，惟一要注意的有几点，不要使用$和_做用变量的开头，vue会忽略掉它。

method

方法也很好理解，就是给vue调用的方法而已，参考之前在html标签使用的onclick=alert等等

templete

组件的html结构，这是必须的选项，毕竟组件是要显示在界面上的.相似于函数的返回值

name

对应函数的名字，其实name属性是可选的，就好像函数名也不是必须的，好比匿名函数，那何时会用到，函数递归的时候，须要有函数名，那么组件递归的时候也是不可或缺的，参考树组件。

小结

上面咱们讨论了vue的一些核心的概念，我相信只要理解了vue数据驱动和组件相关的知识点，就已经掌握了vue的百分之七八十了，至于指令跟过滤器这些，都是一些比较简单的概念，对于学过ng的人更是小菜一碟。若是能深入的把握住mvvm跟组件化的要点，不论是ng还有react，都能举一反三，触类旁通，而vue恰好融合了二者的优势，精简了其中的api，堪称优雅，大道至简。