VUE基础篇Part5（内置指令）

谁借莪１个温暖的怀抱￠ 2022-01-22 21:11 375阅读 0赞

# 内置指令 #

**作用：** VUE中有很多内置的指令，使用这些指令能会让开发过程中变得更加方便，所以也是需要掌握的

## 一、内置基本指令 ##

**1、v-cloak**

作用：是解决初始化慢导致页面闪动的最佳方式，与 display:none 一起结合使用

data:{ 
    	cloakText:'你吼辣么大声干什么嘛！'
    }
    //会在页面直接显示文本内容，并不会显示出由 { {cloakText}} 变为文本内容的过程，加强用户体验

**2、v-once**

作用：使元素不可改变，实际上是让定义它的元素或组件只渲染一次，app.onceText 无法修改

<p v-once>{
       { onceText }}</p>

data:{ 
    	onceText:'你看你在控制台用app.onceText能不能改我'
    }
    //显示文本内容，无法修改

## 二、条件渲染指令 ##

**1、v-if，v-else，v-else-if**

**作用：** v-if=“true”，即值为true的时候，就输出后面的内容，为false则显示v-else的内容，按照JS中的 if else去理解就好了

<p v-if="9>5">{
       { apple }}</p>
    <p v-else-if="9>6">{
       { tomato }}</p>
    <p v-else>{
       { tomato }}</p>

data:{ 
    	apple:'苹果',
    	banana:'香蕉',
    	tomato:'西红柿'
    }
    //因为if 与 else if 条件都为真，所以这里会输出 西红柿

**弊端：** Vue 在渲染元素的时候，处于效率考虑，会尽可能的复用已有元素而非重新渲染，所以下面输入框实例中如果第一次输入用户名，点击按钮后输入的信息还会显示在密码输入框内。

**解决方法：** 加key，唯一，提供key值可以来决定是否复用该元素

<div v-if="type==='name'">
    	用户名:<input type="text" placeholder="请输入用户名" key="admin">
    </div>
    <div v-else>
    	用户名:<input type="text" placeholder="请输入密码" key="psd">
    </div>
    <button v-on:click="toggleType">点我切换输入框</button>

data:{ 
    	type:name
    },
    methods:{ 
    	toggleType:function(){ 
    		this.type = (this.type==='name'? 'password' : 'name')
    	}
    }
    
    //加上key后每次切换，输入框内之前输入的文本就不会被保留

**2、v-show**

**作用：** 与 v-if 一样，为 true 时显示，实际上只改变了 css 中的 display 属性

data：{ 
    	msg:'你看我会不会在body里面'
    }

**v-if 与 v-show 的区别：**

v-if：会实时显示，页面渲染了就会显示，不渲染的话就不会显示  
v-show: 不会实时显示，无论页面是否渲染都会存在，实际上只是改变了 display 的值不显示出来

## 三、列表渲染指令 ##

1、v-for 列表渲染指令

**作用：** 当需要一个数组遍历或者遍历一个对象属性的时候就需要用到 v-for

**写法：** 用的时候要写在需要遍历的元素上，等号里面的内容类似于 item in items

**应用场景：** 1、遍历多个对象；2、遍历一个对象的多个属性

（1）遍历多个对象：遍历多个对象的时候一定是遍历数组

<ul>
    	<li v-for="item in items">{
       { item }}</li>
    
    	带索引的写法：
    	<li v-for="(item,index) in items">{
       { index+1 }} - {
       { item }}</li>
    </ul>

data:{ 
    	items:[{ way1:'多敲代码'},{ way2:'多敲代码'},{ way3:'还是多敲代码'}]
    }
    //页面会显示出所有的对象，和带索引的所有的对象

（2）遍历一个对象的多个属性

<div v-for="obj in person">{
       { obj }}</div>
    
    带索引和属性名的写法
    <div v-for="(obj,key,index) in person">{
       { index+1 }} - {
       { key }} : {
       { obj }}</div>

data:{ 
    	person:{ 
    		name:'孙笑川',
    		age:18,
    		words:'你吼辣么大声做什么嘛！'
    	}
    }
    
    //会显示出对象的下标、属性、属性值

## 四、数组的更新、过滤与排序 ##

**作用：** 操作数组

改变数组的一系列方法：<br><br>
    
        • push()：在末尾添加元素<br>
        • pop() ：将数组的最后一个元素移除<br>
        • shift()：删除数组的第一个元素<br>
        • unshift()：在数组的第一个元素位置添加一个元素<br>
        • splice()：可以添加或者删除函数，返回的是删除的元素<br><br>
    
        splice()内的三个参数：<br>
    
        * 第一个参数表示开始操作的位置<br>
        * 第二个参数表示要操作的长度<br>
        * 第三个为可选参数：<br><br>
    
        • sort()：排序<br>
        • reverse()：翻转<br><br>

例子太多，只挑几个进行演示，实际上用起来都差不多。

<div v-for="item in arr">{
       { item }}<div>
    
    <button v-on:click="sortArr">点我进行排序</button>
    
    <button v-on:click="reverseArr">点我进行翻转</button>

data:{ 
    	arr:['book','pen','pencil']
    },
    methods:{ 
    	//利用sort方法排序，要这样写
    	sortArr:function(a,b){ 
    		//这样是从小到大，b.length - a.length 就是从大到小进行排序
    		return a.length - b.length
    	},
    	reverseArr:function(){ 
    		//翻转的话就直接进行翻转就好了
    		return this.arr.reverse()
    	}
    }

**但是还有两种数组操作，在VUE里面是无法直接使用的：**  
1、改变数组的指定值  
2、改变数组的长度

**解决办法：**  
1、set 方法改变指定项： Vue.set(app.arr,1,“car”)  
2、splice 方法改变数组长度：app.arr.splice(1)

<button v-on:click="changeOne">点我改变指定元素</button>
    
    <button v-on:click="changeLength">点我改变数组长度</button>

data:{ 
    	arr:['book','pen','pencil']
    },
    methods:{ 
    	changeOne:function(){ 
    		this.arr[0] = '蔡徐坤'	//这样是无法改变第一个元素的值得
    	},
    	changeLength:function(){ 
    		this.arr.length = 8		//这样也无法改变数组的长度
    	}
    }
    
    Vue.set(app.arr,1,"蔡徐坤")	//这样才能改变数组的第一个值
    app.arr.splice(8)		//这样才能改变数组的长度

**过滤器**

\*\*作用：\*\*返回字符串中含有 oo 的项，这里就需要使用到过滤器

{
       { matchOO | formateDate }}

data:{ 
    	arr:['book','pen','pencil']
    },
    computed:{ 
    	matchOO:function)({ 
    		//这里的参数代表要过滤的每一项，过滤的方法使用 match()
    		return this.filter(function(value){ 
    			return value.match(/oo/)
    		})
    	}
    }

## 五、方法与事件 ##

**\[object MouseEvent\]**

有时候明明定义了一个方法，但是实际上使用的时候会弹出类似 \[object MouseEvent\] 这种东西

**原因：** 因为你定义的方法中如果带有参数，但是你在使用的时候没有加（），也就是**没有传参数进去**，**默认就会传入原生事件的对象 Events** ，所以才会显示类似 \[object MouseEvent\] 的文本内容

数值：{
       { count }}
    
    <button v-on:click="addCount ">点我每次加1</button>
    
    //一定要在这里加()才会生效
    <button v-on:click="addCount(2)">点我每次加2</button>

data:{ 
    	count:0
    },
    methods:{ 
    	addCount:function(count){ 
    		count = count || 1
    		this.count += count
    	}
    }
    
    这里的 addCount() 方法要加上括号，如果不带（）的话会点击后就会出现 [object MouseEvent]

## 六、修饰符 ##

**1、stop：阻止事件向上冒泡**

如果是这样直接点按钮的话会弹出两次提示，一次是btnAlert，一次是divAlert，这就是事件向上冒泡
    但是实际上是希望点哪个就提示哪个的，不希望两个一起提示，这样才合理
    <div v-on:click="divAlert" style="width:100px;height:100px;background-color:bule;">
    	<button v-on:click="btnAlert">点我试试</button>
    <div>
    
    所以就要用到stop，阻止事件向上冒泡，加上stop后就是点哪个哪个就提示
    <div v-on:click="divClick" style="width: 100px;height: 100px;background-color: darkblue;">
        <button v-on:click.stop="btnClick">点我试试</button>
    </div>

data:{ 
    },
    methods:{ 
    	divAlert:function(){ 
    		alert('我是div层弹出来的提示')
    	},
    	btnAlert:function(){ 
    		alert('我是button层弹出来的提示')
    	}
    }

**2、prevent:提交事件并且不重载页面**

必须要写在提交的东西上，这里是表单，就需要写在form内

<form action="" v-on:submit.prevevt="handle">
    	<button type="submit">提交表单但是不刷新页面</button>
    </form>

data:{ },
    methods:{ 
    	handle:function(){ 
    		alert('看我有没有被刷新')
    	}
    }
    //表单提交了，但是没有刷新页面

**3、self: 只是作用在元素本身而非子元素的时候调用**

让其发挥各自的功能互不干预，实际效果与 stop 差不多但原理不同

data:{ },
    methods:{ 
    	divAlert:function(){ 
    		alert('我是div层弹出来的提示')
    	},
    	btnAlert:function(){ 
    		alert('我是button层弹出来的提示')
    	}
    }

**4、once: 只执行一次的方法**

写在那个上面，哪个就只执行一次

data:{ },
    methods:{ 
    	divAlert:function(){ 
    		alert('我是div层弹出来的提示')
    	},
    	btnAlert:function(){ 
    		alert('我是button层弹出来的提示')
    	}
    }

**5、监听键盘事件：**

<input @keyup.13="submitMe">——指定的keyCode 13 就是 enter 键，也可以把这个换成enter
        vueJS为我们提供了：
        .enter
        .tab
        .delete...还有很多，自行查阅