Vue.js入门指南（一）

  前  言

JRedu

之前用过一段时间的AnglarJS 1.X,在低版本的AngularJS中,脏值检查在变量增多的情况下会影响程序的响应速度。后期的2.X和更高版本在脏值检查等问题上做了优化，来满足广大用户对性能的要求。但是咱们今天不介绍高版本的AngularJS，咱们来看另一个在AngularJS的基础上出现的新js库-Vue.js。 Vue.js发展到今天，也有了版本2，咱们今天就直接介绍版本2 的相关知识，至于版本1，大家可以选择去看一下，如果没有时间，直接接触版本2也没有任何问题。。

首先说一下Vue.js不支持IE8及以下版本。

学习Vue.js有两个常用的版本:开发版和生产版。在项目开发过程中建议使用开发版，遇到错误，会进行提示和警告。如果你想快速的了解Vue.js中的相关知识点，可以登录https://jsfiddle.net/chrisvfritz/50wL7mdz/直接在线学习。

但是我还是推荐大家创建自己的项目，在自己的项目中使用Vue.js。和使用其他的js库一样，如果想在项目里使用Vue.js需要在项目中引入Vue.js库文件。也可以使用网络资源：<script src="https://unpkg.com/vue"></script>。

Vue.js因为是从Angular.js发展来的，所以语法特点和Angular.js类似，咱们先来看一下Vue.js是怎么把数据绑定到Dom中的。

从上面的代码中可以看出，如果你想使用Vue.js，你需要在你的项目中的head标签中导入Vue.js的库文件。然后看一下数据的绑定，相比Angularjs的绑定方式，Vue.js的数据绑定更加简单，只需要实例化一个Vue对象即可。在Vue对象中通过el指定你要对哪个元素绑定数据，el对应的元素值写法和jquery写法类似。而data则是要绑定到元素上的数据。在元素中，我们只需要通过{{}}将要绑定的数据绑定到元素中即可。这时候即可实现模板数据绑定到Dom中的效果，更改模板，Dom的显示效果也就会发生变化。

这时候，有些人可能会有疑问了，如果我要绑定一个属性怎么办呢？不要担心，Vue.js提供了一个和Angular.js的ng-bind类似的指令：v-bind。以后大家在Vue.js的项目中遇v-开头的，都是Vue.js提供的特殊属性，我们可以称

从上面的代码中咱们可以看到，通过Vue.js提供的v-bind指令，可以实现模板数据绑定到属性上的功能。要绑定的数据同样只需要添加到data中即可。

Vue.js除了可以将数据绑定到Dom中，也可以通过模板数据控制元素的显示或者是隐藏，v-if指令可以起到该作用。

只需要在data中添加v-if需要的数据，就可以控制Dom的显示和隐藏。

还有一个指令是大家在项目开发过程中经常用到的。那就是v-for。它可以实现对大批数据进行循环展示，而不需要去编写大量的Dom。

上面的例子给大家展示了怎么通过v-for指令实现只写一个li标签而实现多个li标签显示的效果。语法特点和前几个Vue.js指令类似。

今天Vue.js就介绍到这里，相信之前学过AngularJS的同学已经发现问题了。是不是AngularJS的翻版啊。哈哈，没错，文章开头就已经给大家说了，Vue.js就是在吸收了AngularJS的优点，优化了它的缺点发展起来的。还没有接触过Vue.js的同学们赶快学习一下吧。