Vue 的内置指令(一)

最新推荐文章于 2024-07-09 08:50:52 发布
最新推荐文章于 2024-07-09 08:50:52 发布
阅读量878 收藏 3
点赞数
分类专栏： Vue学习之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38384568/article/details/80946449
版权

基本指令

   v-cloak:不要表达式，会在Vue实例结束编译时从绑定的HTML元素上移除，经常和display：none配合使用

实例一、 

<style type="text/css">
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		{{message}}		
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				message:'这是一段文本'
			}
		})
	</script>

v-clock是解决初始化慢导致页面闪动的最佳实践

二、

v-once：定义它的元素和组件只渲染一次，包括元素或者组件的所有子节点。首次渲染后，不再随数据的变化重新编译，将被视为静态内容。

<div id="app">
		<span v-once>{{message}}</span>
		<div v-once>
			<span>{{message}}</span>
		</div>		
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				message:'这是一段文本'
			}
		})
	</script>

业务中使用很少，当进一步优化性能时，可能会用到。

三、vue提供的if判断

<div id="app">
		<p v-if="status === 1 ">当status为1显示该行</p>
		<p v-else-if="status ===2 ">当status为2时显示该行</p>
		<p v-else>否则显示改行</p>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				status:1
			}
		})
	</script>

实例四、

<div id="app">
		<template v-if="type === 'name'">
			<label>用户:</label>
			<input placeholder="输入用户名"/>
		</template>
		<template v-else>
			<label>邮箱:</label>
			<input placeholder="输入邮箱"/>
		</template>
		<button @click="handleToggleClick">切换输入类型</button>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				type:"name"
			},
			methods:{
				handleToggleClick:function(){
					this.type = this.type === 'name'?'mail':'name';
					console.log(this.type);
				}
			}
		})
	</script>

@click 是 v-on的缩写，绑定一个事件。

本例为点击更换input框。但是复用了input框。也就是在用户上输入了什么，更换的时候，也会显示什么。如下图



如果不想复用，可以使用Vue提供的key属性


这样就不会复用input，因为使用key指向了两个键位。

五、v-show：v-show的用法和v-if基本一致，v-show改变元素的css属性display。当v-show表达式为false的时候，元素会隐藏

实例：

<div id="app">
		<p v-show="status === 1">当status为1的显示该行</p>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				type:2
			}
		})
	</script>

渲染结果：

<div id="app"><p style="display: none;">当status为1的显示该行</p></div>

关于v-if和v-show的选择

功能类似，不过v-if是真正的条件渲染，它能根据表达式适当的创建和销毁。v-show 只是简单的CSS属性切换。

v-if更适合条件不经常改变的场景，因为它的切换开销比较大，而v-show适用于频繁切换条件。

六、列表渲染指令 v-for

<div id="app">
		<ul>
			<li v-for="book in books">{{book.name}}</li>
		</ul>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				books:[
					{name:'《vue.js实践》'},
					{name:'《javascript语言精粹》'},
					{name:'《javascript高级程序设计》'},
				]
			}
		})
	</script>

in可以用of代替。

v-for的表达支持一个可选参数作为当前项的索引，index

<div id="app">
		<ul>
			<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
		</ul>
	</div>

上例books 是数组，也可以遍历对象如：

<div id="app">
		<span v-for="value in user">{{value}}</span>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				user:{
					name:'Aresn',
					gender:'男',
					age:26
				}
			}
		})
	</script>

遍历对象的时候，有两个参数可以选择如：

<div id="app">
		<ul>
			<li v-for="(value,key,index) in user">{{index}}-{{key}}-{{value}}</li>
		</ul>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				user:{
					name:'Aresn',
					gender:'男',
					age:26
				}
			}
		})
	</script>
第一个为值，第二个为key，第三个为下标从0开始 
<div id="app">
		<ul>
			<template v-for="book in books">
				<li >{{book.name}}</li>
				<li >{{book.author}}</li>
			</template>
		</ul>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				books:[
						{
							name:'《vue.js实践》',
							author:'大神'
						},
						{
							name:'《javascript语言精粹》',
							author:'大神'
						},
						{
							name:'《javascript高级程序设计》',
							author:'大神'
						}	
				]
			}
		});
		app.books = app.books.filter(function(item) {
				return item.name.match(/javascript/);
		});
	</script>

当Vue检测到数组变化的时候，并不是直接重新渲染整个列表，相同元素不会重新渲染，使用新数组代替旧数组，不用担心性能问题。

这也可使用数组的副本来过过滤或者排序。使用计算属性。上例可改编成：

<div id="app">
		<ul>
			<template v-for="book in filterBooks">
				<li >{{book.name}}</li>
				<li >{{book.author}}</li>
			</template>
		</ul>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				books:[
						{
							name:'《vue.js实践》',
							author:'大神'
						},
						{
							name:'《javascript语言精粹》',
							author:'大神'
						},
						{
							name:'《javascript高级程序设计》',
							author:'大神'
						}	
				]
			},
			computed:{
				filterBooks:function(){
					return this.books.filter(function(book){
						return book.name.match(/javascript/);
					});
				}
			}
		});
	</script>






凡心所致
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的内置指令
weixin_46376652的博客
07-10 561
单向绑定解析表达式，v-bind:xxx简写为:xxx 双向数据绑定，v-model:xxx简写v-model 遍历数组、对象、字符串； 绑定事件监听，可简写为@，例：@click="..."条件渲染（动态控制节点是否存在） 条件渲染（动态控制节点是否展示） 向其所在的节点中渲染文本内容与插值语法的区别：如果文本中原本存在内容，则会替换掉原本的内容，而插值语法不会 ps：text是new Vue中定义的一个变量能够向指定节点中渲染html结构的内容，与v-text类似，都能够替换节点
Vue部分内置指令
M815241的博客
09-25 863
(2)，一定要在可信的内容上使用v-html， 永不要用在用户提交的内容上!(1)，在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。注：如果在元素只是做（让用户看不见）显示隐藏，推荐使用v-show。(2).v-html可以识别html结构。1- 多个元素 通过条件判断展示或者隐藏某个元素。类似于innerText，会将文本内容全部渲染在页面上。注意： v-html有安全性问题!与插值语法的区别：如果文本中。
Vue的内置指令
Web_South_Bay的博客
09-08 645
一、v-text 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会 类似于innerText 例： <div>{{name}}</div> <div v-text='name'></div> 二、v-html指令 1.作用：向指定节点中渲染包含html结构的内容。 ...
Vue指令详解与实操运用 - 编程魔法
最新发布
妍思码匠的博客
07-09 551
除了预设的指令外，你还可以创造自己的个性化指令，就像是独一无二的魔法咒语。自定义指令让你能够扩展Vue的功能，实现特定的DOM操作或行为。想象一下，你需要给网页中的图片添加一个特效，当鼠标悬停在图片上时，图片会微微放大。这时候，你可以创建一个名为v-zoom的自定义指令来完成这项任务。// 注册一个全局自定义指令 `v-zoom`// 当被绑定的元素插入到 DOM 中时……// 放大1.1倍});// 恢复原大小});});
VUE的内置指令
weixin_43228946的博客
09-15 204
v-text、v-html、v-cloak、v-once、v-pre
Vue中的内置指令
qq_45954420的博客
03-08 258
一、回顾指令 v-bind 单向绑定解析表达式，可简写为 :xxx v-model 双向数据绑定 v-for 遍历数组、对象、字符串 v-on 绑定事件监听，可简写为 @ v-if 条件渲染（动态控制节点是否存在） v-else 条件渲染（动态控制节点是否存在） v-show 条件渲染（动态控制节点是否展示） 二、内置指令 v-text指令 1.作用：向其所在的节点中渲染文本内容 2.与插值语法的区别：v-text会替换节点中的内容 {{xx}}则不会 <div id="r
Vue内置指令
小小鸭脖的博客
10-09 221
1、v-bind：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性，动态更新HTML元素上的属性； 1 2 3 4 5 6 7 8 9 10 11 &lt;a v-bind:href="url" re...
vue内置指令详解
08-27
Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-bind 指令 v-bind ...
Vue内置指令大全
小王的技术库
10-07 655
基本上可以保证你能应付面试官关于JS的提问。原生 DOM 事件.lazy.number.trim。
Vue内置指令和自定义指令
qq_45329601的博客
04-24 1747
Vue内置指令和自定义指令
vue自定义指令实现方法详解
10-17
自定义指令的使用方式与Vue内置指令类似，将指令ID放在`v-`前缀后面，接着是表达式或动态绑定。例如： ```html 我是自定义指令 ``` 在上面的例子中，`v-color`是一个自定义指令，`red`是绑定的值，可以通过Vue实例...
vue学习：内置指令
sayoko06的博客
12-14 505
1、v-bind：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2、v-on：用于监听DOM事件； 例如：v-on:click  v-on:keyup 3、v-model：数据双向绑定；用于表单输入等；例如：&lt;input v-model="message"&gt; 4、v-show：条件渲染指令，为DO...
Vue——内置指令
weixin_47412580的博客
08-27 1112
vue的内置指令的讲解
Vue 内置指令（一）
weixin_45890764的博客
01-15 184
Vue.js针对一些常用的页面功能提供了以指令来封装的使用方式，以html元素属性的方式使用 v-show <div id="app"> <h1 v-show="yes">yes</h1> <h1 v-show="no">NO</h1> <h1 v-show="age>=25">age:{{age}}</h1> <h1 v-show="name.i
【Vue】内置指令
cleannnnn的博客
12-14 1067
Vue学习笔记
Vue.js内置指令深度解析
Vue 的内置指令是预定义的特殊属性，它们都以 `v-` 开头，用于在数据变化时自动处理 DOM 更新。本文将深入解析 Vue 的几个主要内置指令。 1. v-bind：这个指令用于响应式地绑定属性到 DOM 元素。`v-bind:href` 可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值