vue入门教程1

jq虽然好用，但是在数据的修改上没有vuejs那么方便。

下面我就来记录一下vue的一些基本使用经验，希望可以帮助到

想学习vuejs的小伙伴们。

如有不足请指正。

首先，就是下载vue.js并且引入到网页当中。

并且在页面中写上一个div标签，给div设置一个id。

然后就可以创建一个vue的实例对象了。

如图所示，用new Vue即可创建。

然后里面就是vue对象的一些属性了，比如el，data。

el可以设置把vue实例对象绑定到指定的元素上面。

比如此处就绑定到app这个div元素上面。

data则是用来存放一些数据的，在data中存放的数据可以在vue

所绑定的标签里面被解析。

注意要用到两个花括号哦。

这样，当在浏览器中预览网页的时候便可以看到data里面的数据

了哦。

而vue中也有一个methods属性，如果想要设置一些点击事件则

可以在methods里面自定义函数即可。

然后可以@来绑定事件。@click表示点击。。。其它更多请自行

搜索查找哦。

然后就是template属性了。

如果直接设置了template，那么div里面的数据就不会被渲染，

而是渲染template里面的数据了哦。

如图，只显示template的数据。

接着说说v-text以及v-html了。

这两个指令可以把data里面的数据直接绑定到标签上，具体区别

看图。

可以看到v-html绑定的数据如果带有HTML标签则不会被转义为

字符串。

而v-text则会把标签对当中字符串处理。

然后就是v-for指令，它可以用来循环迭代一组数据。

比如有一组数据保存在list，则可以用v-for和of(或者in)来取数

据。

这样取出来的数据就会保存到of前面的变量里。

然后解析变量即可得到数据。

然后就是v-if指令，可以用v-if来判断，如果在标签上使用了v-if指令，则当v-if为true则会渲染该标签。

如果为false则不会渲染显示该标签。如图，此时页面就会什么都

不显示。

当然可以用v-else,如果v-if不成立则会渲染显示v-else所在的标

签哦。

当然，vue实例对象的属性还有许多，更多的一些经验心得也会

在后面记录下来。