• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 Vue常见指令有哪些?

发布时间:2020-04-27 11:15:29 浏览 4683 来源:博学谷 作者:照照

    Vue常见指令有哪些?一般来讲有v-model、v-on、v-for、v-if等等。下面我们一起来看看指令的定义、插值表达式以及各种Vue常见指令的例子~

     

    Vue常见指令

     

    1、指令的定义

     

    在我们逐一学习Vue常见指令之前,我们首先要明白,什么是指令?简单概括起来,指令是带有v-前缀的特殊属性。例如v-model,代表双向绑定。

     

    2、插值表达式

     

    1)花括号

     

    格式是:{{表达式}}

     

    该表达式支持JS语法,可以调用js内置函数(必须有返回值);表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1。可以直接获取Vue实例中定义的数据或函数。

     

    例子:

     

    Vue常见指令

     

    2)插值闪烁

     

    使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}} ,加载完毕后才显示正确数据,称为插值闪烁。

     

    3v-textv-html

     

    使用v-textv-html指令来替代{{}}v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出。v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染。改造原页面内容为:

     

    Vue常见指令

     

    效果:

     

    Vue常见指令

     

    并且不会出现插值闪烁,当没有数据时,会显示空白。

     

    3Vue常见指令

     

    1v-model

     

    v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。目前v-model的可使用元素有:inputselect、Textareacheckboxradiocomponents。基本上除了最后一项,其它都是表单的输入项。

     

    示例:

     

    Vue常见指令Vue常见指令

     

    多个checkbox 对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型;radio对应的值是inputvalue值;input textarea 默认对应的model是字符串;select 单选对应字符串,多选对应也是数组。

     

    2v-on

     

    v-on指令用于给页面元素绑定事件。语法是:v-on:事件名="js片段或函数名"。简写语法:@事件名="js片段或函数名"。例如 v-on:click='add' 可以简写为@click='add'

     

    示例:

     

    Vue常见指令

     

    3v-for

     

    遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。语法:v- for="item in items"items:要遍历的数组,需要在vuedata中定义好;item:循环变量。在遍历的过程中,如果需要知道数组角标,可以指定第二个参数。语法是:v-for="(item,1 index) in items"v-for除了可以迭代数组,也可以迭代对象。语法基本类似:

     

    v-for="value in object"

     

    v-for="(value,key) in object"

     

    v-for="(value,key,index) in object"

     

    4v-if

     

    -if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。语法:v-if="布尔表达式"。示例:

     

    Vue常见指令

     

    以上就是Vue常见指令的介绍,大家如果想深入学习Vue的更多内容,欢迎上博学谷进行在线视频课程的免费学习~

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 零基础入门Java从哪里开始? 下一篇: Java高级程序员需要学习什么?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码