前言
本文介绍vue常用的指令,建议先看完此文章再看本文。点击跳转
指令
在vue中什么叫做指令,指令实质就是自定义属性。
其目的就是为了扩充html的功能
v-bind
v-bind:属性='值'
或者缩写:属性='值'
,
注意这个值是在vue定义的值,不是原本属性里的值。
示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-bind:title='a'>请悬停上我上面!</span>
<span v-bind:style='b'>我是红色的字体</span>
<img v-bind:src="imgSrc">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
a:"我是title里的内容",
b:'color:red',
imgSrc:'https://cn.vuejs.org/images/dcloud2.png'
},
methods:{
}
})
</script>
v-html
v-html='a'
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{a}}</span><br>
<span v-html="a"></span><br>
<span v-html="b"></span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
a:"我是一个span标签",
b:`
<p>我是span标签里的p标签</p>
`
},
methods:{
}
})
</script>
v-text
v-text='a'
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{a}}</span><br>
<span v-text="a"></span><br>
<span v-text="b"></span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
a:"我是一个span标签",
b:`
<p>我是span标签里的p标签</p>
`
},
methods:{
}
})
</script>
结合上面两个代码块,你应该也看出来了v-html
和v-text
的区别了:
v-html
能够解析标签,但v-text
不能够解析html标签
<span>{{a}}</span><br>
<span v-html="a"></span>
这两个都能达到一样的效果,那么这两个区别又是什么?
1、防止当vue.js还没加载出来的时候,两个{{}}
显示出来,懂技术的知道的是什么,不懂技术的还以为是乱码了,而v-html
可以防止当vue.js还没加载完毕时让{{}}
显示出来,具体使用哪种也看需求,但是建议可以使用第二种,自己也可以写个例子,看看一直刷新网页{{}}
会不会出来。
2、v-html
和v-text
都会覆盖标签内的所有内容,没有数据的话,就展示原本标签内的内容,不能做到模板引擎{{}}
那样一部分变量,一部分固定。
v-on
v-on:事件名=“方法” 或者 @事件名=“方法”
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="a">按钮1</button>
<button @click="b">按钮2</button>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
a:function(){
alert('v-onclick写法触发')
},
b:function(){
alert('@click写法触发')
}
}
})
</script>
初次之外还有其他用法,如:
1、阻止事件冒泡:@事件名.stop=''
2、阻止浏览器默认行为:@事件名.prevent=''
3、键盘事件:
a、@事件名.修饰符
如:@click.enter=''
当按下回车键触发什么事件
b、@事件名.keyCode=""
,keycode指的是键码
c、组合键,如按下ctrl+c触发什么事件:@事件名.shift.c=""
v-model
常用于表单输入,v-model
作用类似于实时获取你输入的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" name="" id="" v-model="msg">
<span>{{msg}}</span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
v-show 和v-if
共同点: 两者都能控制标签的显示与隐藏。true
是显示,false
为不显示
不同点:
1、v-show是通过样式display来显示隐藏
2、v-if通过增加或删除节点来显示隐藏
3、v-if还可以配合v-else-if使用
不同场景应该使用什么:
1、v-show应该使用在频繁切换的场景中,仅修改样式,不修改DOM树,可以提高性能
2、v-if不是频繁操作的场景 假如一开始就是不展示的状态,那么v-if的性能要高
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-show="see">v-show显示</span>
<span v-if="see">v-if显示</span>
<span v-show="nosee">v-show隐藏</span>
<span v-if="nosee">v-if隐藏</span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
see:true,
nosee:false
}
})
</script>
v-for
作用类似于源生js的forEach
、jQuery的$.each
,v-for
可用来循环显示数组或json对象。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(v,i) in arr">{{i+1}}、我喜欢的水果是:{{v}}</li>
</ul>
<ol>
<li v-for="(v,key) in json">{{v}}--{{key}}</li>
</ol>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
arr:['apple','banana','pear'],
json:{a:1,b:2,c:3}
}
})
</script>
v-pre
不解析模板引擎(双花括号)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-pre>{{a}}</span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
a:'Hello World!'
}
})
</script>
v-cloak
用到模板引擎且不会闪烁出双花括号。
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<span v-cloak>{{a}}</span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
a:'Hello World!'
}
})
</script>
v-once
只渲染一次,后面再有数据变化都不会再渲染更新数据
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<span>没加v-once:{{a}}</span><br>
<span v-once>加了v-once:{{a}}</span><br>
<button @click="fn">点击将a的值改为2</button>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
a:'1'
},
methods: {
fn:function(){
return this.a=2
}
}
})
</script>