Vue基本指令

1.v-test ：可以解析js的表达式 值为data里的数据，解析data里的数据 简写 —> {{}}

<div  v-html=""></div>

2.v-html 与 v-test 其实是一样的 只不过v-html可以解析html标签
3.v-show： 显示/隐藏
当值为true的时候为显示 false的时候为隐藏
底层原理是操作元素的display属性
4.v-if ： 显示/隐藏
当值为true的时候为显示 false的时候为隐藏
底层原理是操作元素的创建/销毁
配合v-if 使用的指令
v-else
v-else-if
当使用v-else /v-else-if 的时候必须要使用v-if
场景：
v-if:场景----》权限校验的时候
v-show: 展示页面 类似于一些选项卡等
5.v-bind
:id

:src:href
:title
:type
:alt
用来给元素绑定属性

语法： v-bind:属性 = 属性值
常用的属性有哪些？
class
id
src
href
title
type
alt
:class
还可以写成数组的形式
还可以写成对象形式
：style

v-for: 遍历
可以用来遍历任何对象
数组 、 字符串、 对象
遍历数组：

遍历下标:

遍历字符串


遍历数字

遍历对象：

:key=“index”

v-on:
事件绑定
语法：
v-on:事件名称 = 事件函数
v-on:click = 事件函数
需要传参的时候就写上括号，不需要传参就不用写括号
this是可以直接访问到data中的任何数据的

事件冒泡：
页面如图：

分别添加事件 “handleBox” 与 “handleBox1”

点黄色的时候会有事件冒泡
修饰符 可以写多个

右键事件 contextmenu
回车的时候触发:
once 事件只会被触发一次

事件对象：
如果需要使用事件对象的情况下只需要给函数传递一个$event即可


v-pre
v-cloak
v-once

自定义指令
vue.directive
全局自定义指令：
Vue.directive
局部自定义指令
directives
语法：
vue.directive(指令名称，指令实现的函数)
函数中的第一个参数：使用指令的Dom元素
函数中的第二个参数： 是一个对象 对象中的modifiers代表的是修饰符 对象中的value值是表达式的结果


自定义指令 改变字体大小：