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