Vue指令
vue指令
基本指令
1.v-bind
v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
三种语法格式
（1）语法格式1：单个语法格式v-bind:attributeName=variable
HTML代码块
<div id="demo">
<a
v-bind:class="classValue"
v-bind:title="titleValue"
v-bind:target="targetValue"
v-bind:href="hrefValue"
>{{text}}</a>
</div>
javascript代码块
<script>
var demo = new Vue({
el:'#demo',
data:{
text:'百度',
classValue:'one two three',
titleValue:'百度一下，你就知道',
targetValue:'触发者',
hrefValue:'www.baidu.com'
}
})
</script>
（2）语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
HTML代码块
<div id="demo">
<a
v-bind="{
class:link.class,
href:link.href,
title:link.title,
target:link.target
}"
>
{{link.text}}</a>
</div>
javascript代码块
<script>
var demo = new Vue({
el:'#demo',
data:{
link:{
text:'百度',
class:'one two three',
href:'http://www.baidu.com',
title:'百度一下你就知道',
target:'top'
}
}
})
</script>
（3）语法格式3：数组语法格式”绑定类名”v-bind:attributeName=“[variable1,variable2,……]”
HTML代码块
<div id="demo">
<a v-bind:class="[class1,class2,class3]" :href="hrefFn">{{text}}</a>
</div>
javascript代码块
<script>
var demo = new Vue({
el:'#demo',
data:{
text:'百度',
class1:'aaa',
class2:'bbb',
class3:'ccc',
hrefFn:'http://www.baidu.com'
}
})
</script>
2.v-if与v-show
（1）v-if：
主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例
v-if指条件性渲染，为true时渲染DOM，否则不进行渲染；
HTML代码块
<div id="app">
<p v-if="show">这是段文字</p>
</div>
javascript代码块
<script>
var app = new Vue({
el:'#app',
data:{
show:false // 为false直接销毁这段文字
// show:true 为true时渲染DOM，否则不进行渲染
// 当数据show为true时，p元素会被插入，为false时则会被移除。
}
})
</script>
（2）v-show：
v-show也是指条件性渲染，用法与v-if类似：
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
HTML代码块
<div id="app">
<p v-show="show">这是段文字</p>
</div>
javascript代码块
<script>
var app = new Vue({
el:'#app',
data:{
show:false //为false时p标签会切换css属性display为none
// show:true //为true时p标签会去除css的display属性
}
})
</script>
v-if与v-show区别
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
3.v-on
基本指令v-on**
v-on表达式
语法：v-on:事件类型=”内联语句”
表达式除了方法名，也可以是内联语句：
<button @click="dianji">点击隐藏</button>
建议将事件处理放到methods里声明一个方法，提高可读性与维护性。
v-on修饰符
①**.stop**：阻止事件的传递，即阻止事件向上冒泡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on修饰符-stop</title>
<script src="js/vue-2.6.9.min.js" type="text/javascript"></script>
<style type="text/css">
#app{
width: 400px;
height: 400px;
background: greenyellow;
}
#app1{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<!-- ①.stop：阻止事件的传递，即阻止事件向上冒泡。 -->
<div id="app" :title="title_app" @click="show_app">
<div id="app1" :title="title_app1" @click.stop="show_app1"></div>
<!-- 注释：@click.stop 停止事件往上寻找 -->
</div>
</body>
<script type="text/javascript">
// ①.stop：阻止事件的传递，即阻止事件向上冒泡。
var app = new Vue({
el:'#app',
data:{
title_app:'父级提示信息',
title_app1:"子级提示信息"
},
methods:{
show_app:function(){
console.log(this.title_app)
},
show_app1:function(){
console.log(this.title_app1)
}
}
})
</script>
</html>
②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on修饰符-prevent</title>
</head>
<body>
<!-- ②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。 -->
<a @click.prevent href="javascript:;">百度一下</a>
<form>
姓名：<input type="text" name="" id="" value="" />
<input type="submit" name="" id="" value="点击" />
<button type="button">按钮</button>
<!-- 注释:在form表单里button按钮不加type=button会有默认提交时间 -->
</form>
</body>
</html>
.capture：使用事件捕获机制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on修饰符-capture</title>
<script src="js/vue-2.6.9.min.js" type="text/javascript"></script>
<style type="text/css">
#app{
width: 400px;
height: 400px;
background: greenyellow;
}
#app1{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<!-- .capture：使用事件捕获机制 -->
<!-- capture有次属性时子级父级一起触发 没有时只触发自身 -->
<div id="app" :title="title_app" @click.capture="show_app">
<div id="app1" :title="title_app1" @click.stop="show_app1"></div>
<!-- 注释：@click.stop 停止事件往上寻找 -->
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
title_app:'父级提示信息',
title_app1:"子级提示信息"
},
methods:{
show_app:function(){
console.log(this.title_app)
},
show_app1:function(){
console.log(this.title_app1)
}
}
})
</script>
</html>
.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on修饰符-self</title>
<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#app{
width: 400px;
height: 400px;
background: greenyellow;
}
#app1{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<!-- .self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。 -->
<!-- 用处：点击遮罩层的时候，关闭遮罩层和里面的图片。注意：点击图片不管用 -->
<div id="app" :title="title_app" @click.self="show_app">
<div id="app1" :title="title_app1"></div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
title_app:'父级提示信息',
title_app1:"子级提示信息"
},
methods:{
show_app:function(){
console.log('父亲')
},
show_app1:function(){
console.log('儿子')
}
}
})
</script>
</html>
.once：绑定的事件只能触发一次。
keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）
图1：
图2：
图3：
v-on修饰符小结
（1）.stop冒泡事件修饰符，阻止事件向上冒泡
（2）.prevent默认事件修饰符，阻止对象的默认行为
（3）.capture捕获事件修饰符，使用事件捕获机制
（4）.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调
（5）.once一次性事件修饰符，绑定的事件只能触发一次
（6）keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）
methods选项-代理方法
代理方法调用：
Vue.js将methods里的方法也代理了， 所以可以像访问Vue数据一样来调用方法。
在hide方法里，直接通过this.hide_p()调用了hide_p()函数。这样只是一种写法，具体应用场景后续结合生命周期讲解。
拓展：动态参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue-2.6.9.min.js" type="text/javascript"></script>
<style type="text/css">
#demo {
width: 500px;
height: 500px;
background: greenyellow;
}
#demo>div {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="demo">
<div v-bind:[zuo]="title"></div>
</div>
</body>
<script>
var demo = new Vue({
el: '#demo',
data: {
zuo: 'title',
title: '你也好'
}
})
</script>
</html>
以上就是Vue指令的知识，以及小编自己的编写，如有问题请联系小编！
上一篇： vue基础四：内置指令 及 自定义指令directives
下一篇： vue指令及自定义指令