2023年7月18日发(作者：)

springel表达式ifelse_vue指令集合：v-for,v-show,v-if等这⼀篇按照计划讲v-for,但是如果仅仅拿⼀篇来讲的话，有点少了，所以这⼀篇就拿来介绍⼀下vue指令吧。什么是指令解释：指令 (Directives) 是带有 v- 前缀的特殊属性解释作⽤：当表达式的值改变时，将其产⽣的连带影响，响应式地作⽤于 DOM作⽤⽂本v-text解释：更新DOM对象的 textContent（⽂本内容）解释为了我更新⽅便，以后HTML和JavaScript都写在⼀个代码块⾥。

v-text和插值表达式的区别⼀、如果不做任何处理的话，那么v-text与插值表达式相⽐较，没有闪现问题⼀、没有闪现问题。⼆、v-text会覆盖元素中元素中原本的内容。插值表达式只会替换该元素，不会覆盖其它内容⼆、插值表达式只会替换该元素，不会覆盖其它内容。共同点把⾥⾯元素渲染出来，并不会编译标签不会编译标签更新到这⾥，其实有⼀个问题，就是如果当⽹速慢的时候，会有⼀个闪现的问题，针对闪现的问题，我们可以⽤v-clockv-cloak作⽤：处理插值表达式闪现的问题作⽤处理⽅法：在该标签中添加v-cloak。 如果后期项⽬由路由、webpack来挂载的话，那么就不需要v-cloak来解决闪动这个问题了。v-html解释：更新DOM对象的 innerHTML解释 v-bind作⽤：当表达式的值改变时，将其产⽣的连带影响，响应式地作⽤于 DOM作⽤语法：v-bind:title="msg"语法简写：:title="msg"简写缩写符为“：”⽤法介绍参考⽹址：soviya：VUE操作classstyle绑定属性绑定事件事件修饰符-on作⽤：绑定事件作⽤语法：v-on:click="say" or v-on:click="say('参数', $event)"语法：简写：@click="say"简写说明：绑定的事件从methods中获取说明：缩写符为“@”soviya：VUE操作classstyle绑定属性绑定事件事件修饰符-for作⽤：基于源数据多次渲染元素或模板块作⽤：v-for="（site，key ，index)in sites"sites为在data⾥⾯对象名。key为sites⾥⾯的健值名index为sites⾥⾯的序列号（从0开始）。v-for数组⽤法 出⼀个问题，我们如何让它倒序显⽰呢？ 这⾥还简单⽰例了⼀下向数组添加⼀个元素。v-for对象⽤法 v-if 和 v-show这两个都⽤于条件渲染v-if：根据表达式的值的真假条件，销毁或重建元素v-if：销毁或重建元素 v-show：根据表达式之真假值，切换元素的 display CSS 属性v-show： display CSS 属性 我们在审查元素的时候，就可以看到msg内容有加载，只不过dispaly为none了。这两个区别在于v-if只有在条件为真的情况下会去加载⾥⾯内容加载⾥⾯内容，v-show是不管任何值都会去加载⾥⾯内容不管任何值都会去加载⾥⾯内容，然后再根据⾥⾯值真假去操作display是否显⽰。在进⾏频繁操作频繁操作的时候建议使⽤v-show建议使⽤v-show提升性能：v-pre1、说明：跳过这个元素和它的⼦元素的编译过程。可以⽤来显⽰原始 Mustache 标签。跳过⼤量没有指令的节点会加快编译1、说明：2、简单来说，如果使⽤该标签，那么⾥⾯这个标签⾥⾯所元素都不会被编译出来。2、简单来说使⽤⽅法 我们看到页⾯还是{{msg}}，并没有编译出来。提升性能：v-once1、说明：只渲染元素和组件⼀次。随后的重新渲染，元素/组件及其所有的⼦节点将被视为静态内容并跳过。这可以⽤于优化更新性能。1、说明2、简单来说，如果使⽤该标签，那么只渲染当前使⽤者⼀次。之后都不会再被渲染。2、简单来说使⽤⽅法