Vue2中的所有内置指令知识点总结以及代码展示

盛夏绽放

于 2024-08-28 09:23:32 发布

阅读量666

点赞数 23

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/x15514104477/article/details/141625230

版权

指令本质就是自定义属性；Vue中指令都是以 v- 开头

一.v-cloak指令

1.作用：

防止页面加载时出现闪烁问题

2.代码展示：

<style>
		/* 数据没加载前，隐藏{} */
		[v-cloak] {
			display: none;
		}
	</style>
	<body>
		<div id="app" v-cloak>
			{{name}}<br />
			<!-- 普通加法运算 -->
			{{a+b}}<br />
			<!-- 三目运算符 -->
			成绩是否及格？？{{score>=80 ? "及格":"不及格"}}<br />

			{{1234}}<br />
			<!-- 字符串 -->
			{{'悟空'}}<br />
			<!-- 字符串加上data中的数据属性 -->
			{{"进化悟空" + name}}<br />
		</div>
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					name: '黑神话悟空',
					a: 1,
					b: 2,
					score: 98,

				}
			})
		</script>

二.v-text指令

1.作用：

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题；
如果数据中有HTML标签会将html标签一并输出；
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

2.代码展示：

<div id="app">
  <div>{{ message }}</div>
  <div v-text="message"></div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello World'
    }
  });
</script>

三.v-html指令

1.作用：

用法和v-text 相似 但是他可以将HTML片段填充到标签中；
注意：可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上；
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

2.代码展示：

<div id="app">
  <div v-html="content"></div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      content: '<strong>Rendered HTML</strong>'
    }
  });
</script>

四.v-model指令

1.作用：

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用
双向数据绑定：
当数据发生变化的时候，视图也就发生变化；
当视图发生变化的时候，数据也会跟着同步变化；

2.代码演示：

<div id="app">
  <input v-model="message" />
  <p>v-model: {{ message }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

五.v-for指令

1.作用：

用于循环的数组里面的值可以是对象，也可以是普通元素
key的作用：
v-bind:key=“item.id”: 这是另一个属性绑定，它为每个todo-item组件提供一个唯一的键值（通常是数组元素的ID）。这是Vue用来跟踪每个节点的唯一性的重要机制，特别是在列表更新时。
注意：如果没有提供唯一的键值，Vue可能会遇到性能问题

2.代码展示：

<div id="app">
  <ul>
    <li v-for="item in items"  v-bind:key="item.id">{{ item }}</li>
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      items: [{
				id: 0,
				text: '蔬菜'
			},
			{
				id: 1,
				text: '奶酪'
			},
			{		
				id: 2,
				text: '随便其它什么人吃的东西'
			}]
    	}
  });
</script>

六.v-on指令

1.作用：

绑定事件监听，可简写为@。

2.代码展示：

<div id="app">
  <button v-on:click="alert('Clicked!')">Click me</button>
</div>
<script>
  new Vue({ el: '#app' });
</script>

简写：

<div id="app">
  <button @click="alert('Clicked!')">Click me</button>
</div>
<script>
  new Vue({ el: '#app' });
</script>

七.v-if、v-else指令

1.作用：

（1）v-if：

多个元素通过条件判断展示或者隐藏某个元素。或者多个元素；
v-if是动态的向DOM树内添加或者删除DOM元素；
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
条件渲染（动态控制DOM是否存在）。

（2）v-else：

条件渲染的否定形态。

2.代码展示：

<div id="app">
	<button @click="awesome = !awesome">Toggle</button>
			
	<h1 v-if="awesome">Vue is awesome!</h1>
	<h1 v-else>Oh no 😢</h1>
</div>
<script src="js/vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data:{
			awesome:true 
		}
	})
</script>

八.v-show指令

1.作用：

条件渲染（动态控制DOM是否存在）。
v-show本质就是标签display设置为none，控制隐藏
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

2.代码展示：

<div id="app">
  <h1 v-show="seen">Now you see me</h1>
  <button @click="seen = !seen">Toggle</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      seen: true
    }
  });
</script>

九.v-bind指令

1.作用：

v-bind 指令被用来响应地更新 HTML 属性；
v-bind:href 可以缩写为 :href;

2.代码展示：

<style>
		#app div.static {
			font-weight: 900;
		}

		#app div.active {
			color: red;
		}
	</style>
	<body>
		<div id="app">
			 <div class="static" v-bind:class="classObject">黑神孙悟空</div>
		</div>
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					classObject: {
						active: true,
						'text-danger': false
					}
				},
				
			})
		</script>
	</body>