内置指令

作用： 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 || 1this.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 键，也可以把这个换成entervueJS为我们提供了：.enter.tab.delete...还有很多，自行查阅

VUE基础篇Part5（内置指令）相关推荐

Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
vue学习篇--02内置指令计算属性侦听属性
文章目录 18个指令 v-text v-html: v-show: v-if: v-for: 可以遍历数组对象数字字符串 v-bind: 解析属性:title src href type alt ...
Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
Vue.js入门 0x2 内置指令（1）
基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 , 常和 css的 display: none:配合使用. <div id= ...
python学习高级篇(part5)--内置函数type
学习笔记,仅供参考,有错必纠内置函数type 内置函数type()用于获得指定对象的类型,比如:实例对象的类型是其对应的类对象. 举个例子代码: class MyClass(object):pas ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...
Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
vue中的指令——内置指令
什么是指令指令是带 v- 前缀的特殊属性,其值限定为单个表达式. vue提供了少量指令供大家使用,在一定程度上简化了开发过程.当然除了内置指令,还有自定义指令,本篇就是只对内置指令进行讲解. 内置指 ...
2.0 vue内置指令与自定义指令
一.概述模板在解析之前指令是存在的,但是解析完成以后就不存在了. 1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHT ...
Vue.js实战——内置指令（二）
参考<Vue.js实战>梁灏 Vue内置指令第一部分:Vue.js实战--内置指令(一) 1 方法与事件 1.1 基本用法直接上代码,这样最实在: <!DOCTYPE html&g ...

VUE基础篇Part5（内置指令）