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只负责显示。

所以，当你了解了数据绑定和渲染以后，你可以第一时间先把数据输出到页面了。

我们前端最厉害的地方不就是处理能看得见的东西吗？

vuejs则需要结合watch和nextTick方法来使用。具体方法如下。

具体步骤：

1在页面加载一个数据列表完成之后，页面自动滚动定位到中间某个列表元素，需要在列表数据渲染完成，计算列表高度，再控制定位到指定行。首先介绍下一开始尝试没有生效的方案，这也是大家最容易出现错误的地方，vuejs提供的mounted函数，表示挂载到实例上去之后调用该钩子。

2运行之后，发现mounted执行的时候，获取到的height值不对，打个断点也可以发现，此时页面没有渲染完成，列表块还是一片空白。

3此时查询官方api文档发现，有一个nextTick方法，意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。使用之后发现，还是不能解决我所需要的效果。

4继续查询api文档发现，watch方法，用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调，再次尝试，运行后发现还是不行。

5最终把watch和nextTick组合一起

watch:{    showList:function(){        thisgoPrice(0);    }}

showList对应表格页面的绑定变量

<tr v-for="(item,index) in showList">

6运行后发现，已经达到了预期的效果。

7最后说明下，有时候我们会想到使用setTimeout的方式来实现，使用这种方式需要设置个超时执行时间，由于渲染时间无法确定，有快有慢，就会出现不稳定的现象。

以上就是关于Vue.js入门教程（三）双向绑定和数据渲染全部的内容，包括:Vue.js入门教程（三）双向绑定和数据渲染、怎样保证js在页面元素渲染完后再执行、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！