Vue9个常用的指令

Vue的两个要点：

1是数据驱动

    基于数据的开发形式

2是组件化。

    vue的生命周期：vue中的每个组件都是独立的，每个组件都有自己的生命周期：组件创建->数据初始化->挂载->更新->销毁。

一内容，事件绑定 

v-text

设置标签文本值（纯文本）

 

v-html

设置标签文本值（用于data中有html结构，比如跳转）

 

v-on

事件绑定

举例：vue中v-on支持的事件总结：https://www.cnblogs.com/torchstar/p/11799394.html

1.  v-on:click  单击事件
2. v-on:mouseenter 鼠标移入事件
3. v-on:dbclick双击事件

事件绑定的简约写法（常用）

v-on:click  改为： @click:"事件名" 

二显示切换，属性绑定

v-show

由表达值的真假切换元素的显示和隐藏。

例如：v-show="A"

在js中将A设为false,单击改变A地状态，true=!true;

v-if

由表达值的真假来切换元素的显示和隐藏；

与v-show比较，v-if用于较少操作，v-show用于频繁操作。

v-bind

用于属性绑定

用于src,title,class等属性名

简写：：属性名

三列表循环，表单元素绑定

v-for

根据数据生成列表结构，一般是和数组联用

语法：（item，index）in 数组

item代表每一项；

index代表下标，索引；

数组长度的更新会同步到页面，是响应式的。

v-on

做为一种触发事件，可以传参，用函数调用的形式，传入参数，用修饰符对事件进行限制，比如：@keyup.enter代表回车键触发。

v-model

双向数据标定（表单）

1. 表单内传值入
2. 同步修改值
3. 获取表单元素的值