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>
//在vue解析之前,有v-cloak
//解析后无v-cloak
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>