Vue中的指令介绍
vue中的指令
dom元素的行间属性,vue提供了内置的指令,必须以v-开头,后面的值均为变量
v-cloak:
消除页面刚加载时会看到{{}}闪一下的效果,可加给最外层的根元素;
//需要添加对应的css样式
[v-cloak]{
display: none;
}
v-model(表单元素设置了之后会忽略掉value,checked,selected)
让表单元素和数据实现双向绑定(映射关系)
<input type="text" v-model="msg">
v-text:代替 {{}} 渲染成文本(不会识别html标签)可以防止网速卡慢时{{}}出现在页面上
{{}} 中的值都会解析成文本内容;
{{msg}}等价于<div v-text="msg"><!--此处不能再写内容,防止出现闪的效果--></div>
v-html:把html字符渲染成html
<div v-html="msg"></div>
v-once:只绑定一次(不能写成v-once=”msg”)
<div v-once>{{msg}}</div>
v-bind:动态地绑定一个或多个特性
可以通过
v-bind:src
绑定要跳转的资源路径,可简写为:src
:src
后面的值就可以是变量、表达式、赋值运算、计算、三元运算符(尽量少写逻辑运算)
v-for:遍历数组、对象、字符串、数字
解决了循环问题,更高效,会在原有的基础上进行修改,会复用原有的结构,不会修改所有DOM
要循环创建哪一个标签就在那一个标签上加v-for,后面的循环最好用in,用of有时会报错循环数组或对象使用v-for指令
<div v-for="(val,index) in msg">
{{val,index}} //msg为数组时,val为数组中的每一项,index为索引
</div>
<div v-for="(value,key,index) in msg">
{{key}}={{value}}{{index}}; //msg为对象时,key为对象中的每个属性名,value为属性值,index为索引
</div>
条件渲染:v-if v-else-if v-else与v-show
<div id="app">
<button @click="flag=!flag">请点击</button>
//template标签是vue提供给我们的没有任何实际意义,用来包裹元素用的(v-show不支持template标签)
<template v-if="flag">
<label>登录</label>
<input type="text" key="1">//key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值
</template>
<template v-else>
<label>注册</label>
<input type="text" key="2">
</template>
</div>
let vm=new Vue({
el:'#app',
data:{
flag:true
}
});
v-show
条件满足才让v-show所在标签以及标签内的内容显示(操作的是元素的css样式),不支持 template 标签
<input type="text" v-show="flag">//flag为true时,input框才显示
v-on:监听 DOM 事件(v-on:click可缩写为@click)
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码(在 methods
对象中定义的方法,而且methods中的方法名不能和data中的变量名一样)
<div v-on:click ="fn1('zhaosi,$event')">{{msg}}</div>
<div @click ="fn1('zhaosi,$event')">{{msg}}</div>//上面的简写 方法后面可加()可不加。不加的话默认会传入事件对象e,加()代表要传参数,如果要用事件对象,则需要传$event
自定义指令
可通过在vue实例的directives:{}属性中赋予自定义指令意义
<div id="app">
<button v-color="flag">变色</button>
</div>
let vm=new Vue({
el:'#app',
data:{
flag:true
},
directives:{//在这里赋予对应自定义指令意义
//可直接写对应的指令不用写v-
color(el,val){
//el和val都是默认给的:el指的是指令所绑定的DOM元素,val是一个对象,里面存储的是有关指令的信息,可用val.value获取到指令绑定的变量(或者表达式)所代表的值,这里就是flag所代表的值 'red'
el.style.background=val.value;
}
}
});