一、Vue常用指令

指令目录:

1.v-show
2.v-if
3.v-model
4.v-on
5.v-for
6.v-bind
7.v-text
8.v-cloak

---------------------------------------

9.自定义指令 表单自动获取焦点

-----------------------------------------

一、v-cloak

作用 :防止页面数据加载速度慢时,页面闪出花括号 {{}},直到数据加载完成才会显示出DOM节点
语法 : HTML中

{{表达式}}
style 中 [v-cloak] {display:none}
注意 :在用到花括号时候才会使用

二、v-text

作用:更新元素的文本内容textContent
语法:v-text=‘msg’ 类似于innerHTML,会将子节点内容全部更新,但是不会解析HTML标签
注意:与双大括号功能类似

三、对比 v-show 与 v-if

语法 :v-show = 表达式结果的布尔值
true :显示元素
false :隐藏元素
控制的元素display属性
语法 : v-if = 表达式结果的布尔值
true :显示元素
false :移除元素
控制元素的visibility属性

四、v-for

作用 :遍历data中某个变量的数据,并在页面进行数据展示
语法 :v-for = "(item,index) in arr"
item :表示每次遍历得到的元素
index :表示item的索引,从来0开始(可选参数)
arr :需要遍历的data数据中的数组

五、v-bind

作用 :绑定HTML元素的属性
语法 : v-bind :属性名 = "表达式"
绑定一个属性:
绑定多个属性 :
如果绑定的属性是需要控制的:
绑定class :v-bind:class="{类名:表达式}"

六、 v-model 双向绑定

作用:将用户的输入同步到视图上
语法 :v-model = 变量
注意 :v-model指令必须绑定在表单元素上

七、v-on 事件绑定

作用:
语法:
注意:

八、自定义指令

作用:
语法:
注意:

你可能感兴趣的:(一、Vue常用指令)