Vue指令
- 解释:是指带有
v-
前缀的特殊属性 - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
1、v-html
解释:更新dom对象的innerHTML
<div id="box">
<div v-html="str"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
str: "<h1>hello world</h1>",
},
})
</script>
2、v-text
解释:更新dom对象的textContent
<div id="app">
<div v-text="str"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
str: "123",
},
})
</script>
3、v-bind
解释:表达式值改变时,dom被响应式地及时更新
语法:v-bind:title="msg"
<div id="app">
<div v-bind:id="btnid"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
btnid: "btn-update"
},
})
</script>
4、v-once
解释:仅渲染一次
<div id="app">
<div v-once>this will never change:{{message}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello world"
},
})
</script>
5、v-if、v-else-if和v-else
解释:根据表达式的值的真假条件,销毁或重建元素
<div id="app">
<template v-if="type==='a'">
<h1>A-1</h1>
<h1>A-2</h1>
<h1>A-3</h1>
</template>
<div v-else-if="type==='b'">b</div>
<div v-else>other</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
type: 'a'
}
})
</script>
6、v-show
解释:根据表达式的真假值,切换元素的 display 属性
默认情况下表达式值为false
<div id="app">
<div v-show="show">
这是v-show的内容
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
show: ''
},
})
7、v-for
解释:循环,用于多次渲染
<!-- item 为值,key 为键,index 为索引 -->
<div id="app">
<ul>
<li v-for="(item,index) in cities" v-bind:key="item.id">
{{item.name}}-{{index}}
</li>
</ul>
<hr>
<ul>
<li v-for="(value,key,index) in user">
{{value}}-{{key}}-{{index}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
cities: [{ name: '北京', id: 1 }, { name: "天津", id: 2 }, { name: "上海", id: 3 }],
user: {
username: 'yuki',
age: 20,
address: 'beijing china'
},
show: true
}
})
</script>
8、v-on
解释:绑定事件
语法:v-on:click="say"
or v-on:click="say('参数', $event)"
简写:@click="say"
说明:绑定的事件定义在
methods
<div id="app">
<button v-on:click="decrement(1)">-</button>
<h1>{{count}}</h1>
<button @click="increment($event,1)">+</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
increment(e, num) {
this.count += num;
console.log(e.target)
},
decrement(num) {
this.count -= num;
}
}
})
补充:事件修饰符
.stop
阻止冒泡,调用event.stopPropagation()
.prevent
阻止默认行为,调用event.preventDefault()
.capture
添加事件侦听器时使用事件捕获
模式.self
只当事件在该元素本身(比如不是子元素)触发时,才会触发事件.once
事件只触发一次
9、v-model
解释:在表单元素上创建双向数据绑定
<div id="app">
username: <input type="text" v-model="user.username">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
user: {
username: ''
}
},
})
10、v-pre
解释:vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>