Vue.js入门教程（三）双向绑定和数据渲染

JavaScript014

Vue.js入门教程（三）双向绑定和数据渲染,第1张

既然清楚了原理，那么，接下来进入正题——我知道了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只负责显示。

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

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

一、学js的条件：

学习JS也是有门槛的，就是你的html和css至少还比较熟练，您不能连<body>这东东是干啥的都不知道就开始上JS了，学乘除前，学好加减法总是有益无害的。

二、忠告

1，不要着急看一些复杂网页效果的代码，这样除了打击你自信心，什么也学不到

2，别急着加技术交流QQ群，加牛人QQ。

3、看网上什么多少天精通JS，啥啥啥从入门到精通，这种教程直接跳过吧，太多的事实证明，以一种浮躁的心态去做任何事都会以失败而告终。

4、千万别去弄啥电脑培训，花了钱和时间不说，关键是学不到东西。本来你买两本好书自学3个月能学会的，他们硬是能折腾你两年。

javascript：

1、同义词 js（Javascript）一般指javascript。

2、JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

3、它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

4、在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。

通常，我们不会去接触vue底层的东西，又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的，其实还是插件。

插件，你也可以理解为就是一套方法的集合，当我们需要调用它的时候，引入一下就行了。

举个例子，比如说，swiper和elementui。

一般来说，我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑，但是，网上能搜到了插件不一定能解决我们所有的问题。也就是说，我们剩下30%左右的逻辑部分是需要自己处理的，比如说，转化时间，处理字符串等等。

这些东西网上是没有现成插件的，需要我们自己来写。此时，如果你每一个组件里面都去定义方法就显得太low了。

我们需要自己写一个插件，事半功倍！

一般来说，我们自己的js通常会写成下面的两种形式：

第一种，声明多个方法。这个做法也叫函数声明，这样做的好处是，声明到全局，你只要引用了它，在页面任意地方都可以使用。但是同样的缺点也很明显，容易引起全局污染，浪费浏览器资源。而且当我方法多的时候，调用起来很不方便。

第二种，这是我们最长使用的声明方式，函数表达式。目的就是加载了这个js以后，当我需要使用的时候，直接调用str.xxx()，就可以返回我需要的内容了。并且，方法封装在变量内部，不会引起全局污染，也符合模块化的规则。

ok，ok。我们接下来，就要把我们自己的方法定义到vue上去使用。

我首先把js放到了项目文件夹中，然后在main.js中引入。

调用起来是完全没有问题的。

但是，又好像哪里不太对？是的，这样我们仅仅是引入了一个js，并没有把它形成一个js的插件。

我们来看看一个标准的js插件的调用形式：

为什么他这个可以直接从this上面调用？？？

个人理解他的方法应该是被定义到全局的vue对象上面了，这里的this应该指的就是vue本身！

如果你看过龙哥前面的教程，你应该知道，当我们引入的插件，是一个对象的时候，应该使用：

use方法，可以把一个符合vue标准的对象加载到vue本体上。

首先给我们的main.js下面增加一行。

然后打开我们自己的js文件，按照下面的方式书写：

最后在页面中调用的时候：

到此我们的插件已经跟vue融为一体！其实插件本身还支持更多参数和写法，请各位同学自行研究吧！