一. 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去查找用法