系列文章目录
Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令
文章目录
系列文章目录一、内置指令二、自定义指令
一、内置指令
指令说明
v-text更新元素的 textContentv-html更新元素的 innerHTML
<template>
<div>
<h2>v-text
</h2>
<div v-text="'hello vue'">hello world
</div>
<h2>v-html
</h2>
<div v-html="'<span style="color: red">hello vue</span>'">
hello world
</div>
</div>
</template>
指令说明
v-show根据表达式之真假值，切换元素的 display CSS propertyv-if根据表达式的值的 truthiness 来有条件地渲染元素v-if-else表示 v-if 的“else if 块”v-else为 v-if 或者 v-else-if 添加“else 块”
<template>
<div>
<h2>v-show
</h2>
<div v-show="showed">hello vue
</div>
<h2>v-if v-esle-if v-else
</h2>
<div v-if="currHour >=6 && currHour < 12 ">上午好！
</div>
<div v-else-if=" currHour >=12 && currHour < 18 ">下午好！
</div>
<div v-else>晚上好!
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
showed: true,
currHour: new Date().getHours()
};
},
};
</script>
指令说明
v-for基于源数据多次渲染元素或模板块v-bind动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
<template>
<div>
<h2>v-for v-bind
</h2>
<div v-for="num in numbers" v-bind:key="num">{{ num }}
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
numbers: [1, 2, 3,4,5,6,7,8,9]
};
},
};
</script>
指令说明
v-on绑定事件监听器
<template>
<div>
<h2>v-on
</h2>
{{ number }}
<button v-on:click="addNumber">number++
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
number:0
};
},
methods:{
addNumber(){
this.number=this.number+1
}
}
};
</script>
指令说明
v-model在表单控件或者组件上创建双向绑定
<template>
<div>
<h2>v-model
</h2>
<input v-model="message" />
<br/>
{{message}}
</div>
</template>
<script>
export default {
data: function () {
return {
message:''
};
}
};
</script>
指令说明
v-slot提供具名插槽或需要接收 prop 的插槽
<template>
<div>
<slot name="header"></slot>
<slot name="default"></slot>
<slot name="footer"></slot>
</div>
</template>
<template>
<BaseLayout>
<template v-slot:header>
<h1>这是头部区域
</h1>
</template>
<template v-slot:default>
<p>这是内容区域
</p>
</template>
<template v-slot:footer>
<p>这是底部区域
</p>
</template>
</BaseLayout>
</template>
<script>
import BaseLayout from './components/Slot.vue'
export default {
name: "App",
components: {
BaseLayout
},
}
</script>
指令说明
v-pre跳过这个元素和它的子元素的编译过程v-once只渲染元素和组件一次v-cloak保持在元素上直到关联实例结束编译:在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法
<template>
<div>
<h2>v-pre
</h2>
<div v-pre>{{ this will not be compiled }}
</div>
<h2>v-once
</h2>
<button v-on:click="addNumber">number++
</button> -->
<div v-once>
{{ number }}
</div>
<h2>v-cloak
</h2>
<div v-cloak>
{{ message }}
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
number:0,
message:'这是一个Vue项目'
};
},
methods:{
addNumber(){
this.number=this.number+1
console.log(this.number)
}
}
};
</script>
二、自定义指令
一个指令定义对象可以提供如下几个生命周期钩子函数
钩子函数说明
bind只调用一次，指令第一次绑定到元素时调用inserted被绑定元素插入父节点时调用update所在组件的 VNode 更新时调用componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用unbind只调用一次，指令与元素解绑时调用
自定义指令案例
<template>
<div>
<p>请输入：
</p>
<input v-if="show" ref="txt" :value="message" v-focus type="text" />
<button @click="ontxtInput">输入框设置
</button>
<button @click="ontxtVisible">输入框消失
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "",
show: true,
};
},
directives: {
focus: {
bind(el, binding) {
console.log("bind", el, binding);
},
inserted: function (el, binding) {
el.focus();
console.log("inserted", el, binding);
},
update(el, binding) {
console.log("update", el, binding);
},
componentUpdated() {
console.log("componentUpdated");
},
unbind() {
console.log("unbind");
},
},
},
methods: {
ontxtInput() {
this.show=true;
this.message = "输入框设置";
},
ontxtVisible(){
this.show=false;
}
},
};
</script>
