vue中的简单指令介绍
指令
一共有十四个指令
1. 重要指令(8个)
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-bind
- v-model
- v-on
2 .需要了解的指令(2个) - v-text
- v-html
3. 不常用的指令(3个) - v-pre
- v-cloak
- v-once
指令用法
<标签 v-指令名>标签>
<标签 v-指令名="值">标签>
<标签 v-指令名.修饰符1.修饰符2>标签>
<标签 v-指令名.修饰符1.修饰符2="值">标签>
<标签 v-指令名:类型.修饰符1.修饰符2="值">标签>
<标签 v-指令名:类型="值">标签>
v-show
可以将元素的css变换为none以及去除node css级别的显示隐藏
如果我们想要让元素显示隐藏，可以在data中添加一个属性去进行设置。
v-if v-else v-else-if
网页结构的条件渲染
如果页面上同一个地方根据数据的不同有多个状态，那么我们就可以添加对应的条件进行条件渲染
v-if = "条件"
v-for
网页结构遍历渲染
用于渲染网页的上的列表（数据结构一定是数组）
<标签 v-for="item in arr">标签>
<标签 v-for="(item, index) in arr">标签>
<标签 v-for="value in obj">标签>
<标签 v-for="(value, key) in obj">标签>
<标签 v-for="(value, key, index) in obj">标签>
<标签 v-for="value in num">标签>
v-bind
当标签属性需要动态值时，我们会使用v-bind
v-bind的用法很多，最常用的方法就是把数据渲染到对应的属性上
修饰符
<标签 v-bind:src="动态值">标签>
<标签 v-bind:class="['box']">标签>
<标签 v-bind:class="{active: true}">标签>
<标签 v-bind:class="['box', {active: true}]">标签>
<标签 v-bind:style="{width: width + 'px'}">标签>
v-model
与网页上的表单元素进行双向绑定操作，方便获取表单中的value值
修饰符
.prop 会把该属性添加到DOM对象上
.number 把value变成Number类型
.lazy 把input事件替换为change事件
.trim 去除首位空格
.stop 阻止冒泡
.prevent 阻止默认行为
.keycode 键盘键码和别名
.self 只有e.target是事件源本身时才会触发对应的事件
v-on
用于绑定事件