Vue指令(一）
（一）v-once
1、该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
2、该指令表示元素和组件只渲染-次,不会随着数据的改变而改变。
<body
>
<div id
="app">
<h2
>{{message
}}</h2
>
<h2 v
-once
>{{message
}}</h2
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
},
})
</script
>
（二）v-html
某些情况下,我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{}来输出,会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。可以使用v-html指令
➢该指令后面往往会跟上-个string类型
➢会将string的html解析出来并且进行渲染
<body
>
<div id
="app">
<h2 v
-html
="url"></h2
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
url
: '<a href="htpp://www.baidu.com">百度一下</a>'
},
})
</script
>
（三）v-text
➢v-text作用和Mustache比较相似:都是用于将数据显示在界面中
➢v-text通常情况下,接受-个string类型
<body
>
<div id
="app">
<h2 v
-text
="message"></h2
>
<h2
>{{message
}}</h2
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
},
})
</script
>
（四）v-pre
v-pre用于跳过这个元索和它子元素的编译过程,用于显示原本的Mustache语法。
比如下面的代码:
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{messagel}}
<body
>
<div id
="app">
<h2
>{{message
}}</h2
>
<h2 v
-pre
>{{message
}}</h2
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
},
})
</script
>
效果图：
（五）v-cloak
在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签
<body
>
<div id
="app">
<h2 v
-cloak
>{{message
}}</h2
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
},
methods
: {
},
})
</script
>
（六）v-on
口作用:绑定事件监听器
口缩写:@
口预期:Function | Inline Statement I|Object
口参数:event
<body
>
<div id
="app">
<h2
>{{counter
}}</h2
>
<button @click
="counter++">+</button
>
<button @click
="decrement()">-</button
>
<!-- 调用方法，手动获取浏览器参数event对象：$event
-->
<button @click
="btnclick(123,$event)">按钮
</button
>
</div
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
const app
= new Vue({
el
: '#app',
data
: {
counter
: 0
},
methods
: {
decrement() {
this.counter
--
},
btnclick(a
, event
) {
console
.log(a
, event
);
}
},
})
</script
>
（七）v-bind
■v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值
某些属性我们也希望动态来绑定。
➢比如动态绑定a元素的href属性
➢ 比如动态绑定img元素的src属性
这个时候,我们可以使用v-bind指令:
口作用:动态绑定属性
口缩写::
口预期: any (with argument) | Object (without argument)
口参数: attrOrProp (optional)
1）通过Vue实例中的data绑定元素的src和href
<div id
="app1">
<img v
-bind
:src
="imgurl" alt
="">
<a
:href
="ahref">百度一下
</a
>
</div
>
<script
>
const app
= new Vue({
el
: '#app1',
data
: {
message
: 'as',
imgurl
: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599893806753&di=4d4dbb7a7ef43a6aa936ddf60be12ad9&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
ahref
: 'http://www.baidu.com'
},
})
</script
>
2)动态绑定class（对象）
<div id
="app2">
<h2
:class="active">dfdsg
</h2
>
<h3
:class="{actives:isactive,a2:isa2}">test
</h3
>
<button @click
="btn">按钮
</button
>
</div
>
<script
>
const app
= new Vue({
el
: '#app2',
data
: {
message
: 'as',
active
: 'actives',
isactive
: true,
isa2
: false
},
methods
: {
btn(){
this.isactive
= !this.isactive
}
},
})
</script
>
3)动态绑定class（数组）
<div id
="app3">
<h2
:class="['a','b','c']">{{message
}}</h2
>
<h2
:class="getclass()">{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
: '#app3',
data
: {
message
: 'as',
},
methods
: {
getclass() {
return ['a', 'b', 'c']
}
},
})
</script
>
4)动态绑定样式 （对象）
<div id
="app4">
<h2
:style
="{fontSize:'50px'}">{{message
}}</h2
>
<h2
:style
="{fontSize:size,color:color}">{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
: '#app4',
data
: {
message
: 'as',
color
:'red',
size
: '100px'
},
})
</script
>
5)动态绑定样式 （数组）
<div id
="app5">
<h2
:style
="[baseStyle]">{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
: '#app5',
data
: {
message
: 'as',
baseStyle
:{
backgroundColor
:'red',
fontSize
:'100px'
}
},
methods
: {
},
})
</script
>
