标签:cli 构建 enter als 参数 model dex display mode
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
封装组件时,我们有时候需要在封装好的组件使用的时候再进行添加结构,那我们就可以用插槽进行实现;
标签:cli 构建 enter als 参数 model dex display mode
原文地址:https://www.cnblogs.com/DavidKennen/p/11444632.html