Vue内置指令（v-text,v-html,v-cloak,v-once,v-if,v-else,v-show,v-on,v-for）

最新推荐文章于 2022-10-04 09:12:52 发布

风尘DX

最新推荐文章于 2022-10-04 09:12:52 发布

阅读量319

点赞数

分类专栏： vue vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45476753/article/details/115267008

版权

vue 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

vue.js

5 篇文章 0 订阅

订阅专栏

基本指令的介绍

Vue.js提供了一些常用的内置指令，下面介绍几种基本指令：

v-text
v-html
v-cloak
v-once
v-if
v-else
v-show
v-on
v-for

一.v-text和v-html指令

v-text主要用来更新text Content，将实例中的数据当作纯文本输出，可以等同于JavaScript的text属性 v-html会将实例中的数据当作HTML标签解析后输出，它等同于JavaScript的inner-Html属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<div id="app">
			<p v-text="html"></p>
			<p v-html="html"></p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					html:"<input type='date'>"
				}
			})
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

二.v-cloak指令

v-cloak指令用于显示当数据未解析完成时渲染的样式。某些情况下由于机器性能故障或者网络原因，导致传输有问题，浏览器无法解析数据，这时页面就会展示Vue源码，这样会影响用户体验。使用 v-cloak 指令来解决屏幕闪动的问题。

html:

<div id="app" v-cloak>
    {{context}}
</div>

css:

[v-cloak]{
    display: none;
}

三.v-onde指令

v-once指令在日常开发中使用较多，只需渲染元素和组件一次，随后的渲染使用了此指令的元素/组件及其所有的子节点，都会被当作静态内容并跳过，用于优化更新性能。

根据vue特性动态刷新的原理，数据会随着改变而动态的变化，但是使用v-once之后，数据就会在第一次加载后就固定了，不会动态变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-once>1:{{msg}}</p>
			<p>2:{{msg}}</p>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					msg:"我不变！"
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
通过控制台改变msg，可以看到，经过v-once处理的msg并没有改变，而未声明v-once的消息改变了！

四.v-if，v-else，v-show指令

v-if指令可以实现条件渲染，Vue会根据表达式的值的真假来渲染元素。v-else指令是搭配v-if指令使用的，它必须紧跟v-if或v-else-if后面，否则不起作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="number===1">1:{{msg}}</p>
			<p v-else-if="number===2">2:{{msg}}</p>
			<p v-else>其它:{{msg}}</p>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					number:1,
					msg:"number是1！"
				}
			})
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

v-if指令用于条件性的渲染一块内容，这块内容只会在指令的表达式返回truthy值的时侯被渲染。而v-show指令不i管条件是否成立，都会渲染HTML，v-if和v-show的区别是带有v-show的元素会始终被渲染并保留在DOM中。v-show只是简单地切换元素的css属性的display。v-if是真正的条件渲染，因为我它会确保在切换过程中条件快内的事件监听器和子组件适当地被销毁和重建。相比之下，v-show简单很多，不管初始条件是什么，元素总会被渲染，并且只是简单地基于css进行切换。一般来说，v-if有更高的切换能耗，而v-show有更高的初始渲染能耗。因此如果需要频繁地进行切换，则使用v-show较好；如果运行时条件很少改变，则使用v-if更好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="isMale">男生</p>
			<p v-show="isMale">男生</p>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					isMale:false
				}
			})
		</script>
	</body>
</html>

五.v-on指令

v-on指令是用来绑定事件监听器的，类似于原生JavaScript的onclick用法。使用v-on可以进行一些交互。"v-on:"可以缩写为@.

<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="onclick">单击事件</button>
			<button v-on:mouseover="onMouseover">鼠标经过事件</button>
			<button v-on="{mouseenter:onEnter,mouseleave:onOut}">鼠标进入\离开事件</button>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				methods:{
					onclick:function(){
						console.log("clicked")
					},
					onMouseover:function(){
						console.log("mouseover")
					},
					onEnter:function(){
						console.log("entered")
					},
					onOut:function(){
						console.log("outed")
					}
				}
			})
		</script>
	</body>
</html>

参考网址：↓
https://www.w3school.com.cn/jquery/jquery_ref_events.asp
在这里插入图片描述
阻止连接打开代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="app">
			<a href="www.baidu.com" @click="handleClick('禁止打开',$event)">打开链接</a>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				methods:{
					handleClick:function(message,$event){
						event.preventDefault();
						window.alert(message);
						console.log(event);
					}
				}
			})
		</script>
	</body>
</html>

在上面的实例中，使用的event.prentDefault()也可以替换为Vue提供的事件的修饰符，具体使用方法为@绑定的事件+小圆点"."+一个修饰符。Vue支持以下修饰符。
(1) .stop: 阻止单机事件冒泡。

<a v-on:click.stop="doSomething"></a>

(2) .prevent: 提交事件不在重新加载页面。

<form v-on:submit.prevent="onSubmit"></form>
修饰可以串联使用↓
<a v-on:click.stop.prevent="doSomething"></a>

(3) .capture: 添加事件监听器时使用事件捕获模式。

<div v-on:click.capture="doSomething"></div>

(4) .self: 事件在该元素本身（如不是子元素）触发时触发回调。

<div v-on:click.self="doSomething"></div>

(5) .once: 单击事件只会触发一次。

<a v-on:click.once="doSomething"></a>

六.v-for指令

v-for指令是遍历数组、对象的，其表达式需要结合in来使用，v-for指令遍历对象属性时，有两个可选参数，分别是key和index。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(value,key,index) in user">
					{{index}}-{{key}}:{{value}}
				</li>
			</ul>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					user:{
						firstName:"John",
						lastName:"Doe",
						age:"30"
					}
				}
			})
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

v-for指令除了可以遍历数组和对象以外，还可以迭代整数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="count in 5">
					{{count}}
				</li>
			</ul>
		</div>
		<script>
			var vm=new Vue({
				el:"#app"
			})
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

风尘DX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue内置指令（v-text,v-html,v-cloak,v-once,v-if,v-else,v-show,v-on,v-for）

基本指令的介绍Vue.js提供了一些常用的内置指令，下面介绍几种基本指令：v-textv-htmlv-cloakv-oncev-ifv-elsev-showv-onv-for一.v-text和v-html指令v-text主要用来更新text Content，将实例中的数据当作纯文本输出，可以等同于JavaScript的text属性v-html会将实例中的数据当作HTML标签解析后输出，它等同于JavaScript的inner-Html属性<!DOCTYPE html
复制链接

扫一扫

专栏目录