在拉钩学习的笔记（二十七）Vue.js基础指令

本文链接：https://blog.csdn.net/yao_huang_/article/details/121230038

1、Vue.js 指令
指令的本质就是 HTML 自定义属性
vue.js 的指令就是以 v- 开头的自定义属性
2、内容处理 v-once 指令
使元素内部的插值表达式只生效一次 {{ content }}
3、内容处理 v-text 指令
元素内容整体替换为指定纯文本数据（动态绑定） 会被替换
4、内容处理 v-html 指令
元素内容整体替换为指定的 HTML 文本 会被覆盖
5、属性绑定 v-bind 指令
用于动态绑定 HTML 属性 内容
Vue.js 还为 V-bind 指令提供了简写形式： 
与插值表达式类似，v-bind 中也允许使用表达式
如果需要一次绑定多个属性，还可以绑定对象
6、属性绑定 Class 绑定
class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存 
对于 class 绑定，Vue.js中还提供了特殊处理方式
 
 
7、属性绑定 Style 绑定
style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存 内容
给元素绑定多个样式对象时，可以设置为数组 内容
8、渲染指令 v-for 指令
用于遍历数据渲染结构，常用的数组与对象均可遍历
<li v-for="(item, index) in arr">内容为{{ item }}，索引为 {{ index }}</li>
<li v-for="(item, key) in obj">内容为{{ item }}，键为 {{ key }}</li>
<li v-for="(item, index) in 5">第{{ item }}项，索引为 {{ key }}</li>
使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题
<li v-for="item in items" :key="item.id">{{ value }}</li>
通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作
9、渲染指令 v-show 指令
用于控制元素显示与隐藏，用于显示隐藏频繁切换时使用
显示
隐藏
<template> 无法使用 v-show 指令
10、渲染指令 v-if 指令
用于根据条件控制元素的创建与移除
不会被创建
会创建
不会创建 // 前面都为false时会被创建
给使用 v-if 的同类型元素绑定不同的 key
出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签

v-text 用于设置纯文本内容
v-html 用于设置结构文本内容
v-once 用于设置内部插值表达式只生效一次不会覆盖原始内容
v-bind 用于进行属性绑定
属性绑定不可以使用插值表达式
v-bind 可以简写为 : 形式，例如 :title
v-bind 设置对象时，对象的键为要绑定的标签属性名，值为绑定的数据
Class 绑定指的是通过 v-bind 绑定标签类名属性
class 与 v-bind:class 可以共存
设置对象时，对象键值对应类名与类名生效状态
设置数组可以同时控制单个类名和对象形式的类名列表
Style 绑定指的是通过 v-bind 绑定标签的行内样式
style 与 :style 可以共存，但重复是 :style 会覆盖 style 的对应样式
设置对象值时，对象键值对应样式名与样式值
设置数组值时，不可以设置单个样式和对象形式的样式列表
v-for 指令用于遍历数组与对象，遍历对象时不是必须绑定唯一的 key 属性
v-for 遍历对象时可以获取索引
v-show 指令用于控制原始显示或隐藏，本质为 display 变化
v-if 指令用于控制创建或移除，不适合频繁操作