vue基础四：内置指令及自定义指令directives

冷凝娇

已于 2023-03-17 14:40:20 修改

阅读量1.1k

点赞数 1

分类专栏： # vue 文章标签： vue

于 2021-11-24 15:29:59 首次发布

本文链接：https://blog.csdn.net/ak739105231/article/details/121516319

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

内置指令及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
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础四：内置指令及自定义指令directives

内置指令及directives一、内置指令1、内置指令：v-bind2、内置指令：v-model3、内置指令：v-for4、内置指令：v-on5、内置指令：v-if \ v-else6、内置指令：v-show7、内置指令：v-text8、内置指令：v-html9、内置指令：v-cloak10、内置指令：v-once12、内置指令：v-pre二、自定义指令 directives一、内置指令1、内置指令：v-bind单向绑定解析表达式，可简写为 :xxx<input type="te
复制链接

扫一扫