vue基础四：内置指令 及 自定义指令directives
程序员文章站
2022-05-16 18:34:41
...
内置指令及directives
一、内置指令
1、内置指令：v-bind
单向绑定解析表达式，可简写为 :xxx
<input type="text" name="" id="" v-bind:value="name" /><br />
2、内置指令：v-model
v-model: 双向绑定
<input type="text" name="" id="" v-model:value="name" />
3、内置指令：v-for
v-for:遍历数组/对象/字符串
<li v-for="person in persons" :key="person.id">{{person.name}}----{{person.age}}</li>
4、内置指令：v-on
v-on:绑定事件监听，可简写 @
<button type="button" v-on:click="show_info">戳我提示如何赚钱</button>
<button type="button" @click="show_info2(66)">戳我提示如何赚钱2</button>
5、内置指令：v-if \ v-else
1.v-if :
写法：（1）v-if="表达式"
（2）v-else-if="表达式"
（3）v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if\v-else一起使用，但要求结构不可被"打断"
<div v-if="n ===1">Angular</div>
6、内置指令：v-show
2.v-show
写法：使用于频率较高的场景
不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
<div v-show="n ===1">Angular</div>
7、内置指令：v-text
v-text:向其所在的节点中渲染文本内容；（与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会）
<h3 v-text="name"></h3>
8、内置指令：v-html
渲染html标签
<body>
<div id="app">
<h3>{{name}}</h3>
<div v-html="name"></div>
</div>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return{
name:"<h3>牛逼</h3>"
}
}
})
vm.$mount("#app")
</script>
</body>
9、内置指令：v-cloak
v-cloak:配置css样式使用，屏蔽加载闪烁（网速过慢时，未经渲染的默认不予显示）
注意：
1.v-cloak没有值，本质是一个特殊的属性，Vue实例创建完毕并接管容器后，自动会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面显示出{{xxx}}的问题
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h3>{{name}}</h3>
<div v-cloak>{{name}}</div>
</div>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return{
name:"<h3>牛逼</h3>"
}
}
})
vm.$mount("#app")
</script>
</body>
10、内置指令：v-once
v-once:
1.v-once所在节点在初次动态渲染后，就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
<body>
<div id="app">
<!-- v-once:只读一次，后面n值变化，这里都是静态显示第1次的值 -->
<h3 v-once >初始化n值：{{n}}</h3>
<h3>n:{{n}}</h3>
<button type="button" @click="n++">点：n+1</button>
</div>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return{
n:1
}
}
})
vm.$mount("#app")
</script>
</body>
12、内置指令：v-pre
v-pre:
1.跳过其所在节点的编译过程
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译
<body>
<div id="app">
<!-- v-pre:不需要编译的内容，可以使用v-pre;效率高 -->
<h3 v-pre>不管如何都是一个字的事</h3>
<h3 v-once >初始化n值：{{n}}</h3>
<h3>n:{{n}}</h3>
<button type="button" @click="n++">点：n+1</button>
</div>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return{
n:1
}
}
})
vm.$mount("#app")
</script>
</body>
二、自定义指令 directives
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->
<body>
<div id="app">
<h3>当前n值：<span v-text="n"></span></h3>
<h3>10倍n值：<span v-big="n"></span></h3>
<button type="button" @click="n++">点：n+1</button>
<hr >
<input type="text" v-fbind:value="n" />
</div>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return{
n:1
}
},
directives:{
// 自定义指令-函数式：,接收2个固定参数，一个是指令作用的元素：element,另一个则是指令的值binding（是一个对象，需要binding.value获取值）
big:function(element,binding){
element.innerText = binding.value * 10
},
//自定义指令-对象:更完整的实现复杂功能
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
element.focus()
}
}
}
})
vm.$mount("#app")
</script>
</body>
自定义指令总结：
一、定义语法：
（1）局部指令:
new Vue({
directives:{
指令名:function(element,binding){}
}
})
或者
new Vue({
directives:{
指令名:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
element.focus()
}
}
})
（2）全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
element.focus()
}
三、备注
1.指令定义时不加v-,但使用时要加v-
2.指令名称如果是多个单词，要使用kebab-case命名方式,带上引号，不要使用cameCase命名
上一篇： 统计二叉树中度为1，2的结点个数c++
下一篇： Vue指令