Vue.js中的常用的指令缩写

JavaScript041

Vue.js中的常用的指令缩写,第1张

Vue.js为两个最为常用的指令提供了特别的缩写:

v-bind缩写

<!--完整语法-->

<a v-bind:href="url">测试</a>

<!--缩写-->

<a :href="url">测试</a>

v-on缩写

<!--完整语法-->

<a v-on:click="doSomething">修改</a>

<!--缩写-->

<a @click="doSomething">修改</a>

既然清楚了原理,那么,接下来进入正题——我知道了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与其他框架的区别:

1.与AngularJS的区别

相同点:

都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

不同点:

1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

2.在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

对于庞大的应用来说,这个优化差异还是比较明显的。

2.与React的区别

相同点:

React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

中心思想相同:一切都是组件,组件实例之间可以嵌套。

都提供合理的钩子函数,可以让开发者定制化地去处理需求。

都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

在组件开发中都支持mixins的特性。

不同点:

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。