快速入门Vue

刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

先给大家科普一下:

前端JS框架和前端UI框架的区别

前端JS框架:基于js进行一定封装与一些独立设计的框架
比如:jQuery,Vue,React,angular等等

前端UI框架:基于某种js框架进行设计的UI组件库,就是一些写好的UI组件,拿来就能用,不需要自己写css

比如:
基于JQuery的Bootstrap,jQuery Smart UI 等
基于Vue的iView,Element等
基于React的Material-UI,React Desktop等

对于刚接触的Vue框架的我来说,vue最大的特性,莫过于双向绑定了

单向绑定和双向绑定

Model:数据模型
View:视图

单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。
例如，我们定义好一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上：

双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。

所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

例如当用户填写表单时，View的状态就被更新了，在浏览器中，当用户修改了表单的内容时，我们绑定的Model会自动更新,那就相当于我们把Model和View做了双向绑定：

Vue的基本结构

//这个div在最外层,将其他的div或者其他元素都包起来
...

下面写一个使用例子

    

    View


测试按钮
Data
{
    {name}}
{
    {age}}
    

1.data初始化DOM的值
2.使用v-model属性进行数据绑定
3.Dom的值与data的值双向绑定绑定,相互影响

可看下面动图

这里只做了个小演示,我的vue水平也差不多到这了(hahah~)
我这里使用的iview UI框架,也可以尝试其他的UI框架,UI框架都差不多,只是一些样式和组件

就到这了,感兴趣的可以自己动手试试,有js,Jquery基础的上手很快!
我们被培训了半个小时,就开始动手写了

分享给你的朋友！

THANDKS

• End -

一个立志成大腿而每天努力奋斗的年轻人

伴学习伴成长，成长之路你并不孤单!

java从心 扫描二维码,关注公众号

不错吧?必须好看☟