VUE教程（第三节）

又是完美的周末，我们又开始愉快的学习了，这节课我们学习十大指令：v-text、v-html、v-show、v-if、v-else、v-for、v-bind、v-on、v-model、v-once;

——》v-text，这个指令是干嘛的呢？一看后面的text就知道是文本咯，其实他就是渲染出页面文字的，look代码

v-text.png

我定义一个参数“text”，然后用v-text指令渲染在h2标签里面

v-text.png

页面显示就是这样的，是不是很简单；

——》v-html，这个和v-text差不多，但又差得多，为啥这么说呢，你看一下就知道了：

代码一：

v-html.png

v-html.png

v-html.png

v-html.png

看出来了不？如果是参数是文字，直接显示文字，如果是带标签的，那标签会被解析，我还特意加了字体颜色呢，是不是很棒；

——》v-show、v-if、v-else这三个需要一起来：

v-show.png

v-show.png

v-show.png

v-show.png

v-show.png

大佬们，看懂没有啊？用v-show，在参数为真时候显示，为假的时候不显示，不过控制显示不显示的是display属性，不显示时候是none；用v-if呢，直接就是渲染与否了，如果为真，渲染，如果为假都没有dom渲染，然后v-else就不过多的解释了，延伸一下知识面，这几个都是用作显示内容的，那我们要怎么选取呢？用v-show，不管怎么样都要将dom渲染到页面，只是显示不显示的问题罢了，如果用v-if和v-else，那就是直接不进行dom渲染，所以呢，如果是使用频繁的某一区块，最好就是用v-show，如果是使用不是很频繁的，那用v-if可以减少在初始时候渲染的压力。懂了没？聪明的你们。

好了好了，下一个内容搞起来：

——》v-for，看到for一看就知道是循环啦，没得错老铁，就是循环：

v-for.png

v-for.png

我定义了一个名字叫fordata的数组，然后，用v-for循环出来，它需要定义出两个参数，分别是item和index，第一个代表每一项的内容，第二个是序号，也就是位置，从零开始计算。特别需要注意的是我在对应标签加了一个参数key，这是什么东东呢？其实这是一个标记，当数组元素有改变时候，可以复用dom，减少dom的渲染，提升用户体验。

——》v-bind和v-on又是什么，我们知道每个标签都有不同的属性，但是有时候属性是需要改变的，在jQuery年代，操作可以用removeClass、addClass、attr之类的方法来操作，但是vue是数据驱动，我们只能改变数据来改变效果，所以说嘛就有了v-bind，它的定位就是改变标签的属性：

v-bind.png

v-bind.png

看到木有，元素的data-value属性被我们改变啦，至于什么class、style属性的改变后期会专门说一下，这节只是对v-bind有了解；还有一个乖宝宝v-on又是什么大妖怪呢？这个其实是处理事件的咯，比如点击事件之类的咯，

v-on.png

v-on.png

v-on.png

这里不知道怎么放动图，只能大概说一下，你点击一下上面的文字，下面的数据就会加一位，就是启动事件语法糖而已；

——》说到这里我们先说说v-once，现在我们改一下代码，渲染时候加上v-once属性：

v-noce.png

v-once.png

然后你会发现，点击事件没用了，一直都是显示0，为什么呢？其实不是点击事件失效了，而是数据改变了，但是数据没有渲染，v-once的操作就是只修改一次，如果初始时候渲染出来后，后期改数据是不会重新渲染的，这也是它和v-text的不同之处；

——》v-model，这个可是最重要的东东，至少我觉得是，不可以反驳（反驳无效），这是做表单时候的语法糖，也就是获取表单元素的数据的，如果用过jQuery做数据交互应该懂得，需要修改样式，需要获取数据的麻烦之处，让人奔溃一百次都不只。

v-model.png

v-model.png

look一下，只需要在表单元素里面定义出绑定什么参数，只要内容改变，参数值同步变化，完美，好的不要不要的。

好了好了，写了一个小时了，十个命令全部搞定，如果还有什么不清楚的可以留言给我，不过我一般一个礼拜登入后台一次，嘻嘻，所以不要着急哦。