vue的指令

Posted 2022-09-21 davidkennen

vue指令

　　vue和react是有一定区别的，vue提供内部api指令，而react是构建用户界面的一个javascript库，所以react基本不提供内部方法，而是靠社区来提供，所以vue更简单易学。

　　1.v-text

　　　　我们常用的innerText原理一致，但是在vue中v-text可以作为数据渲染以及数据逻辑运算处理，可以在v-text里写javascript逻辑运算以及数据渲染。简写：(与v-html区别不可渲染html结构，会以文本内容展示)

　　2.v-html

　　　　有文本渲染，那肯定必不可少的标签渲染，v-html本质就是可以渲染html结构。

　　3.v-show

　　　　作为页面结构的显示与隐藏操作指令，会给判断为false的值的结构添加display:none，相反则是添加display:block；

　　4.v-if

　　　　同上作为页面结构的现实隐藏操作指令，会给判断为false的值的结构隐藏直接无视dom的生成，相反则是生成dom结构。

　　　　v-else以及v-else-if同理

　　5.v-for

　　　　作为循环操作的指令，可以实现页面数据遍历循环展示，会有两个参数(item,index)，第一个参数为数据渲染所取值，第二个则是每个数据的下标数字

　　6.v-on

　　　　作为事件绑定的指令，可以做点击事件，使用方法为 v-on:click="方法名"以及v-on:click="方法名(参数名)" 简写可@click="";

　　7.v-bind

　　　　作为标签属性绑定的指令，我们标签可以进行属性与数据层的数据绑定,写法 v-band:style="",简写:style="";

　　8.v-model

　　　　作为Vue最大亮点的指令，双向数据绑定，我们可以在表单组件以及组件上进行双向数据绑定，如何理解这句话，可以这么说，我们模型层对数据层数据进行绑定，当我们模型层所绑定的数据进行改变时，数据层相对应的值也会跟着改变。使用方法,v-model="（填写data里的数据）"；

　　9.v-slot

　　　　封装组件时，我们有时候需要在封装好的组件使用的时候再进行添加结构，那我们就可以用插槽进行实现;