一. 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去查找用法
扫一扫
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
