本文目录一览:
Vue.js入门教程(三)双向绑定和数据渲染
既然清楚了原理,那么,接下来进入正题——我知道了vue怎么安装,那么我怎么使用呢?
在告诉你基础用法之前,我还是要先告诉你一个情况。
可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。
他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。
所谓的双向绑定,你可以理解就是把view。(你还不清楚mvc的话,请看第一章)
和model绑定到一起。说白了,就是你js中的绑定值变了。你dom中的内容就跟着一块变了。
vue是通过解析{{文字..}}来生成内容的。后面绑定方法,输出内容的时候都会讲到。
列表输出使用 v-for,这些v开头加横杠的叫做命令
这些命令是可以自定义的。但是那都属于高级操作,我们不用它也完全足够支撑做一个大型项目了。
其实你回发现,这里无论是v-for或者是v-什么其他玩意
它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。
你记住这个用法,它就长这样。
前后端分离开发的关键在于:后台只提供接口。
我们获得的数据多数情况下,仅仅是一个json,而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解,数据的解析在mvc中,
是由后端完成的,而html只负责显示。
所以,当你了解了数据绑定和渲染以后,你可以第一时间先把数据输出到页面了。
我们前端最厉害的地方不就是处理能看得见的东西吗?
关于Vue.js 和 react.js 的异同
react.js和vue.js的异同:
vue---react.js 的相同点:
vue和react是两个不像相同的框架,但是他们之间也是用共同特点的,所有的前端框架都有一些相同的特点,vue和react之间最关键的相同之处在于,它们在被设计出来时所用的思想或者说理念是一样的,比如说都用到了component组件,props参数传递,组件之间的通信,state状态管理器,lifecircle声明周期等等,似乎现在的前端框架都已经成为了mvc或则mvvc的样子,虽然还有一部分前端开发还是传统模式,但是必然会被node+webpack+vue /react---之类的自动化逐渐替代...
vue----react.js 的不同之处:
vue和react.js最大的不同之处在于它们对DOM的渲染方式不同,vue可以直接在vue文件中使用html标签,数据绑定时类似angular,可以进行条件渲染,而react.js则采用了jsx语法,运用虚拟DOM 的概念进行DOM对页面元素进行渲染,获取页面元素需要用ref来获取,似乎更加安全。
前端vue是什么?
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。
今天带领大家来了解一款渐进式JavaScript框架——Vue。
近年来,前端开发领域,旧浏览器逐渐淘汰,移动端开发需求逐年增加,前端交互越来越多,功能越来越复杂。架构从传统后台MVC向REST API + 前端MV* 迁移。
MV*相当于MVC即:
Model(模型)表示应用程序核心(比如数据库记录列表)。
View(视图)显示前端的学习都是需要不断的学习,学一天停一停相当于白学,学习效果很差,如果你想有人一起学习可以来这个扣裙,首先是132 中间是667最后是127 都是零基础的同学,大家相互鼓励 共同努力 只是学着玩就不建议来了!!!数据(数据库记录)。
Controller(控制器)处理输入(写入数据库记录)。
MVP
Model(模型)表示应用程序核心(比如数据库记录列表)。
View(视图)显示数据(数据库记录)。
Presenter(表示器)负责逻辑处理业务。
与MVC差别在于:
1、View与Model完全隔离。
2、Presenter与View的具体实现技术无关。
3、可以进行View的模拟测试。
MVVM(Vue就是一种MVVM框架)
Model(模型)表示应用程序核心(比如数据库记录列表)。
View(视图)显示数据(数据库记录)。
ViewModel(观察者)负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。
优点:高内聚,低耦合(可重用性、可移植性)。
Vue是一款数据驱动+组件化的前端开发框架,对比于Angular和React,Vue.js更轻量,gzip后大小只有26K (Angular 56K,React 44K),同时更易上手,学习曲线平稳,吸收两家之长,借鉴了angular的指令和react的组件化。