源码时代Java干货分享|vue 指令基本使用大全，学完让你的工作效率提升百倍！

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
指令名称 指令作用 备注
v-html 显示与解析HTML代码
v-text 原封不动的展示
v-for 遍历与循环功能 遍历数字，字符串,对象,数组
v-bind 绑定属性 简单形式 :属性名="值"
v-model 双向绑定 只支持input,select,textarea
v-show 显示与隐藏 隐藏只是样式:style="display=none"
v-if 判断 v-if/v-else-if/v-else
v-on 绑定事件 简写 @事件名=方法名()
v-html与v-text
html会解析HTML标签(相当:innerHTML)
text不会解析HTML标签(相当:innerText)

{{msg}}

v-for
遍历咱们的数据(数字,字符串,对象,集合)
数字就是普通的循环 for(var i=1;i<=数字;i++)
字符串是拿到每一个字母
对象循环 
ov:代表对象的属性值
ok:代表对象的属性名
oi:代表索引
数组循环 
ov:代表对象的属性值
oi:代表索引

    
{{v}}



    
{{v}}



    
{{k}} - {{v}} -{{i}}




    
{{v}}==={{i}}

v-bind的使用
bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
bind有一种简写形式 <标签 :属性名="属性值">
如果直接把整个对象进行属性绑定 <标签 v-bind="对象">
;

v-model
主要是用于完成双向的绑定
只能用于:input,select,textarea
;

名称: 

{{inputVal}}

    爱好:
    看电影
    看小说
    看漫画
    垃圾
    

    {{checkboxVal}}

    性别:
    男
    女
    叨客
    

    {{radioVal}}

    
        中国
        日本
        美国
    
    

    {{selectVal}}

    
    

    {{textareaVal}}

v-show&v-if
v-show用于展示和隐藏 <标签 v-show="true/false">
v-if <标签 v-if="条件">...
show只是隐藏标签,if直接就不会出现不满足条件的标签
v-show的案例代表
最后的效果是有一个按钮，点一下显示图片，再点一下隐藏图片
;

点我啊 

v-if的案例
;

    未成年人禁止入内


    客观请进，这里欢迎您


    老神仙，不食人间烟火

v-on 事件绑定
事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
调用的方法可以不加()
v-on有一种简写形式 <标签 @事件名=方法名>
;

点我有惊喜...

再点我啊！！！

{{age}}

（本文由源码时代技术老师撰写，转载请注明出处）