码迷,mamicode.com
首页 > 其他好文 > 详细

vue的指令

时间:2019-09-02 10:09:49      阅读:96      评论:0      收藏:0      [点我收藏+]

标签: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

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

 

vue的指令

标签:cli   构建   enter   als   参数   model   dex   display   mode   

原文地址:https://www.cnblogs.com/DavidKennen/p/11444632.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!