vue的其他指令:
(注意:content 表示 vue 实例中 data 的数据)
(1): v-bind
v-bind 动态为属性绑定变量 例:
<img v-bind:src="imgURL">
语法糖(简写):':' 一个冒号 例:
<img :src="imgURL">
v-bind也可以绑定类名class等,class的值可以是数组或者是对象,大部分是对象,对象中包括一组组键值对,类名就是对应的样式,也就是键;后边的值就是对应着增加和移除该类,取值是true和false;
<div :class="{类名1:true/false,类名2:true/false}"> {{message}}</div>
数组的形式用的很少,和直接写死的区别是,在[]数组中没有加单引号,vue会将其当成变量解析,如果直接加单引号,就会被当成类名的字符串,也可以写到methods方法中。
在这个vue实例中使用变量,要加上this.
<div :class="[类名1,类名2]">{{message}}</div>
(2): v-on
v-on 事件监听器
语法糖(简写):@
基础用法:
1.在需要进行事件监听的地方绑定事件监听器;
<button @="btnClick">按钮<button>
2.在vue实例中的methods里定义事件;
methods: {
btnClick() {
console.log("btnClick点击了!")
}
}
参数传递问题:
1.事件调用方法没有参数那么以下两种写法效果一样。
<button @="btnClick">按钮<button>
<button @="btnClick()">按钮<button>
2. 在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器自己生成的event事件对象作为参数传入到方法中。
<button @="btnClick">按钮<button>
methods: {
btnClick(a) {
console.log(a) //这个a就是浏览器生成的 event 事件对象
}
}
3. 方法定义时,我们需要event对象,同时又需要传入其他参数,在调用方法时,手动的获取到浏览器参数的event对象: $event
<button @click="btnClick('abc', $event)">按钮</button>
v-on的常用修饰符:
1. .stop 阻止事件冒泡,调用event.stopPropagation()
2. .prevent 阻止默认事件,调用event.preventDefault()
3. @keyup.enter 监听回车键的弹起,同时也可以@keydown.esc监听esc键按下
4. .native 监听组件根元素的原生事件
5. .once 只触发一次回调
(3) v-for
基础格式: v-for="item in 对象/数组"
注意:vue官方推荐我们在使用 v-for 时,给对应的元素或组件添加上一个 :key属性 :key="item"
key的作用主要是为了高效的更新虚拟DOM
<p v-for="item in content" :key="item">{{item}}</p>
1.迭代普通数组
在 data 中定义普通数组
data:{
list:[1,2,3,4,5,6]
}
在html中使用 v-for 指令渲染
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
2.迭代对象数组
在 data 中定义对象数组
data:{
listObj:[
{id:1, name:'zs1'},
{id:2, name:'zs2'},
{id:3, name:'zs3'},
{id:4, name:'zs4'},
{id:5, name:'zs5'},
{id:6, name:'zs6'},
]
}
在html中使用 v-for 指令渲染
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
3.迭代对象
在 data 中定义对象
data:{
user:{
id:1,
name: '党航航',
gender: '男',
age: 19,
height: 1.88
}
}
在html中使用 v-for 指令渲染
<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>
4.迭代数字
<!-- 注意:如果使用v-for迭代数字的话,前面 count 的值从 1 开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>
(4) v-model
vue使用v-mode用于表单数据的双向绑定, v-model本质上是一个语法糖。
如代码<input v-model="test">
本质上是
<input :value="test" @input="test = $event.target.value">
1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件
v-model修识符
1. lazy 让数据在失去焦点或者回车时才会更新
<input v-model.lazy="content" >
2. number 可以让在输入框中输入的内容自动转为数字类型
<input v-model.trim="content">
3. trim 可以过滤内容左右两边的空格
<input v-model.number="content" type="number">
(5): v-if
v-if 的作用相当于Js中的 if 判断,只不过这次写法上有所不同。
v-if 的变量值一般都是true或者false。效果就像是显示(true)、隐藏(false)。
v-if 除了多应用于条件判断,还会用于视图之间的切换。
<div v-if="content>90">优秀</div>
(6): v-else-if 和 v-else
v-else-if 和 v-else 作用相当于Js中的else if 和 else。
<div v-if="content>90">优秀</div>
<div v-else-if="content>70">良好</div>
<div v-else-if="content>60">及格</div>
<div v-else>不及格</div>
(7): v-show
v-show 用法和 v-if 差不多,作用也差不多,他俩结果都为true时没有区别但当他俩为false时有很大的区别。
区别:
v-show:当条件为false时,v-show只是给我们的元素添加了一个行内样式:dispaly:nane;
v-if: 当条件判断为false时,包含v-if指令的元素根本就不会存在DOM中;
介意:当需要在显示和隐藏之间切换很频繁时用v-show ; 当只有一次切换时,通过使用v-if (工作中最多使用v-if)