一. V-html
作用:更新元素的innerHTML,拥有响应式的特点,即数据驱动视图,解析标签,作用类似于js中获取dom对象,然后再进行innerHTML赋值。


展示了一下v-html解析标签的特点,这算是和插值表达式{{ }}的不一样的地方。
总结:需要解析标签就用v-html,单纯的数据展示就用插值表达式{{ }}就行。
二.v-show和v-if还有v-else-if和v-else
v-show
1.作用 控制元素显隐藏
2.语法格式 v-show="表达式" 表达式值为true则显示,反之则不显示。
3.原理 主要通过css中的display属性的改变来控制显隐藏。下图展示原理

通过检查可以看到盒子上被加了一个display:none,这是v-show的显示和隐藏的原理。

总结:主要通过css来控制元素显隐藏,v-show适用于需要频繁切换显隐藏的地方使用。
v-if
1.作用 控制元素显隐藏
2.语法格式 v-if="表达式" 表达式值为true则显示,反之则不显示。
3.原理 通过操作节点的创建或删除来控制显隐藏,下图展示原理。

检查可以看到v-if控制的div元素节点已被删除。

总结:主要通过元素节点的创建和删除来控制元素显隐藏,v-if适用于不需要频繁切换显示和隐藏的地方使用,否则会由于频繁操作dom而导致性能下降。
v-else-if和v-else
1.作用 辅助v-if进行条件渲染
2.用法 参考C语言中if,else if,else的用法,类比v-if,v-else-if,v-else。
三.v-on
1.作用 注册事件,并提供对应的处理逻辑。
2.用法 v-on:事件名="简单的逻辑处理语句" 或 v-on:事件名="逻辑处理函数" (函数应是methods中定义的函数)也可以简写为 @事件名="逻辑处理"
下面是一些常见的事件名
-  点击事件: - click:用于点击操作。
- dblclick:用于双击操作。
 
-  鼠标事件: - mousedown:鼠标按下。
- mouseup:鼠标释放。
- mousemove:鼠标移动。
- mouseover:鼠标移入。
- mouseout:鼠标移出。
- mouseenter:鼠标移入(不冒泡)。
- mouseleave:鼠标移出(不冒泡)。
 
-  键盘事件: - keydown:键盘按下。
- keyup:键盘释放。
- keypress:键盘按下并释放(某些浏览器中可用)。
 
-  表单事件: - change:表单元素值改变时触发。
- input:在输入字段里输入数据时触发。
- focus:元素获得焦点时触发。
- blur:元素失去焦点时触发。
- submit:表单提交时触发。
 
-  滚动事件: - scroll:元素滚动时触发。
 
-  拖放事件: - dragstart:开始拖动元素时触发。
- dragover:元素在另一个元素上拖动时触发。
- drop:元素被放下时触发。
- dragenter:元素进入另一个元素时触发。
- dragleave:元素离开另一个元素时触发。
 
-  其他事件: - load:当页面或图片加载完成时触发。
- unload:当页面即将卸载时触发。
- error:当在加载过程中发生错误时触发。
 
四.v-bind
1.作用 动态渲染html的标签属性,例如src,title等等
2.语法 v-bind:属性名="表达式" 也可以简写为 :属性名="表达式"
五.v-for
1.作用 根据数据进行多次渲染,多次渲染整个元素。
2.语法 v-for="(item,index) in 数组" item为每一项,index为数组下标,用不到index也可以不写。
下面是一个例子


另外v-for通常和key属性一起用
用法: :key="唯一标识"
作用: 给渲染的每一个元素添加唯一标识,便于vue进行正确的排序复用,一般以后台数据中得到的id为唯一标识。具体可以了解一下v-for的循环渲染复用机制。
五.v-model
1.作用
在 Vue 中,v-model 主要用于在表单元素(如 <input>、<textarea>、<select> 等)上创建双向数据绑定。它的作用是实现视图(页面上显示的内容)和模型(Vue 实例中的数据)之间的自动同步更新。当用户在表单元素中输入或修改内容时,对应的模型数据会自动更新;反之,当模型数据发生变化时,表单元素中的显示内容也会自动更新。
2.用法
v-model="变量"
其他不常用的可以到 vue2官网 中的API去查找用法