VUE基础篇Part5（内置指令）

内置指令

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

一、内置基本指令

1、v-cloak

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

<style>
[v-cloak]{
	display: none;
}
</style>

<p v-cloak>{{ cloakText }}</p>

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 属性

<p v-show="9>3">{{ msg }}<p>

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 差不多但原理不同

<div v-on:click.self="divAlert" style="width: 100px;height: 100px;background-color: darkblue;">
	<button v-on:click="btnAlert">点我试试</button>
</div>

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

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

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

<div v-on:click.once="divClick" style="width: 100px;height: 100px;background-color: darkblue;">
	<button v-on:click="btnClick">点我试试</button>
</div>

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

5、监听键盘事件：

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