美文网首页
vue.js 的常用指令

vue.js 的常用指令

作者: 紫由袅 | 来源:发表于2017-08-22 17:13 被阅读13次

v-if v-else v-show 指令

v-if:判断是否加载,可以减轻服务器的压力,在需要时加载。

v-show:调整css display属性,可以使客户端操作更加流畅。

 v-for指令

解决模板循环问题v-for指令是循环渲染一组data中的数组,v-for 指令需要以item in item 形式的特殊语法,items是原数据数组并且item,是数组元素迭代的别名你的需求是需要哪个标签循环

在上一篇文章《v-for指令:解决模板循环问题》有讲

v-text 和 v-html

当网速慢的时候会出现bug ,可以使用v-text直接输出html标签

 v-html,在项目中尽量少用,会引起黑客攻击

 v-on 指令

@的简写

 v-model 数据源绑定

经常使用在表单里面修饰符:

v-model.lazy  延迟出现v

-model.number  只有里面是数字才可以被绑定,一开始输入为计算

v-model.trim  把前后的空格删除

文本框、文本域、多选框、单选框的双向数据绑定

多选按钮绑定一个值多选绑定一个数组,记得代码里面要绑定一个value 

value值跟id值是一样的,

v-model="name1",

数据源绑定的是同一个数组data:{name1:[],}

 v-bind 指令标签属性绑定

简写 冒号:绑定的标签属性:绑定的时候都需要在data里面进行声明绑定class 中的属性和绑定class 中的判断 :

class绑定class中的数组    

:class 绑定class中的三元运算符:

class绑定Style      :style

绑定style

在data里面声明的代码:data:{yellow:'yellow',font:'30px',}

对象绑定Style  :style

绑定style对象

在data里面的代码:

  styleObject:{                    

    color:'orange',                    

    fontSize :'40px',                                    

        }

在vue里面不支持-的写法,比如front-size,要写成frontSize

 其他指令

这几个指令都是直接使用,直接在div或者其他标签里面加入v-pre就可以了

v-pre 原样输出

  v-cloak  渲染完成后,才显示

  v-once 只在第一次的时候渲染

相关文章

  • Vue基础知识介绍

    本节主要介绍Vue.js开发中的常用指令介绍,后续会持续补充 1. vue中常用的v-指令 v-text // 是...

  • 03Vue.js的常用指令

    Vue.js常用指令 使用 v-cloak 要特别注意:因为该指令需要配合样式(style) 才可以生效,如下所示...

  • Vue.js常用指令

    (一)vue常用的指令 1.数据渲染:v-text、v-html、{{}} 2.条件渲染 控制模板隐藏:v-sho...

  • Vue.js 指令与事件

    指令(Directives)是 Vue.js 模板中最常用的一项功能,它带有前缀v-,在前文我们已经使用过不少指令...

  • vue.js 的常用指令

    v-if v-else v-show 指令 v-if:判断是否加载,可以减轻服务器的压力,在需要时加载。 v-sh...

  • vue常见函数大全*基础

    VUE.JS常用函数大全 1、目录记忆 2、安装相关 3、内部指令 4、全局API 5、reverse() ; 数...

  • 10-Vue的常用指令

    Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on Vue.js的指...

  • Vue.js(2)----常用指令

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vu...

  • Vue.js中常用指令

    指令(directive)是带有v-前缀的特殊属性。 vue.js中的循环 (v-for)、判断(v-if / v...

  • Vue.js中常用的指令缩写

    Vue.js为两个最为常用的指令提供了特别的缩写:一、强制绑定 → v-bind缩写 : 二、事件监听...

网友评论

      本文标题:vue.js 的常用指令

      本文链接:https://www.haomeiwen.com/subject/qrvldxtx.html