vue-常用指令

什么是vue指令

指令就是带有 v- 前缀 的特殊属性，不同的属性对应不同的功能。

分类汇总

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

v-cloak

【作用】解决浏览器在加载页面时因存在时间差而产生的闪动问题
【原理】先隐藏元素挂载位置，处理好渲染后再显示最终的结果
【注意】需要与CSS规则一起使用

如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上（id="app"顶级的div上）。

<style>[v-cloak] {display: none;}
</style>

<div v-cloak>{{ message }}
</div

v-text

v-text：直接输出属性值，相当于 innerText。

【语法】hi，意思是将 username值渲染到 p 标签中

v-text 填充纯文本

相比插值表达式更加简洁

不存在插值表达式的闪动问题

v-html

v-html：解析标签型数据，相当于innerHTML。

【语法】hi，意思是将 showInfo值渲染到 p 标签中
使用该语法，会覆盖 p 标签原有内容
使用该语法，能够将HTML标签的样式呈现出来。

v-pre

v-pre指令用于跳过这个元素和它的子元素的编译过程。可以用于显示原始的Mustache标签。

【语法】{{ raw }} 通过v-pre指令，可以让span元素及其子元素跳过Vue的编译过程，从而显示原始的{{ raw }}内容。
跳过编译
显示原始内容

v-show /v-if

v-show

【语法】 v-show = “表达式” 表达式值为 true 显示， false 隐藏
【作用】控制元素显示隐藏
【原理】切换 display:none 控制显示隐藏
【场景】频繁切换显示隐藏的场景

v-if

【语法】 v-if= “表达式” 表达式值 true显示， false 隐藏
【作用】控制元素显示隐藏（条件渲染）
【原理】基于条件判断，是否创建或移除元素节点
【场景】要么显示，要么隐藏，不频繁切换的场景

v-else/v-else-if

【语法】 v-else v-else-if= “表达式”
【作用】辅助v-if 进行判断渲染
【注意】要紧挨着v-if使用

v-on

【语法】v-on:事件名='内联语句' v-on:事件名='methods中的函数名'
【作用】注册事件 = 添加监听 + 提供处理逻辑
【简写】@事件名（事件名：click、change、submit等等）

<body><div id="app"><!-- 内联语句 --><button @click="count--">-</button><span>{{ count }}</span><!-- methods中的函数 --><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">java</h1></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100.isShow: true},methods: {fn() { this.isShow = !this.isShow }}})</script>
</body>

v-bind

【语法】v-bind:属性名='表达式'
【作用】动态设置html标签——>src、url、title
【简写】:属性名='表达式'

v-for

【语法】v-for="(item,index)in 数组'
【作用】基于循环多次渲染整个元素——>可以是‘数组’、‘对象’、数字...
【参数】item是每一项、index是下标。
【注意】v-for中的key，给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

1.key 的值只能是字符串或数字类型。
2.key 的值必须具有唯一性。
3.推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)。