VUE【三、指令】

模板指令

1、数据渲染(对应data数据)

  • {{a}}
    当使用v-once指令时,数据会一次绑定,后续修改值不会变化

  • v-text="a"
    等同于{{a}}

  • v-html="a"

2、条件渲染

  • v-if='...' v-else-if='...' v-else
    当if条件为真时,显示v-if标签下的内容,否则显示v-else标签下的内容

    通常v-if需要添加到一个元素上,可以使用template进行渲染,template不会呈现


    默认情况下,被v-if包裹的元素都是同一个元素,可以重用,这样可以使得速度快,且用户输入不被清除

    当不想使用相同的元素时,可以使用 key 来区分元素

  • v-show='isShow'
    与v-if的区别在于,该元素始终存在,只是显不显示的问题

3、循环

  • v-for='item in items'
    v-for还有一个可选的第二参数作为当前元素的索引

    v-for也可以使用template

当迭代的是一个对象时,迭代item是对象的数组,这时第二个参数是key,第三个参数是索引

当迭代的是一个整数时

4、事件绑定(对应method数据)

  • v-on:click="method"
    简写 @click="method"
    click是v-on 的参数

5、属性与Class与Style绑定

  • 属性绑定
    v-bind:src
    简写 :src
    等同于src='...'
    可以给一个值或一个data属性

  • Class绑定
    使用v-bind:class='text-danger'
    简写 :class
    可以给某个标签绑定属性,和直接写 class='text-danger' 一样
    更强大的是,v-bind可以使用一个bool值控制该属性是否生效,若这样写 v-bind:class="{'text-danger':hasError}"
    则当hasError为true时,'text-danger'才会生效

    这里也可以绑定一个对象,或一个计算属性,或一个对象数组

  • Style绑定
    v-bind:style="..."
    简写:style
    等同于 style="..."
    可以给一个值,或一个对象,或一个数组

6、过滤器(昨天刚学了过滤器,今天就用上了,开心~~)
可以被用在数据绑定或v-bind中,用于文本转换

  • in mustaches
    {{ message | filterA('arg1', arg2) }}
    表达式message的值会作为过滤器的第一个参数,后续参数会依次传入,如arg1为第二个参数
  • in v-bind

缩写

  • v-bind缩写--:
    v-bind:href == :href
  • v-on:click缩写-- @
    v-on:click == @click

数组更新检测

  • 变异方法(会改变原始数组)
    pop/push--shift/unshift 用法相似,区别只在于开头和结尾
    push() --结尾增加一个元素,并返回索引
    pop() --结尾弹出一个元素,并返回元素
    shift() --开头弹出一个元素,并返回元素
    unshift() --开头增加一个元素,并返回索引
    splice(index,howmany,item1,itemx...)
    --向数组中添加或删除元素,第一个参数为索引位置(必须);第二个为删除个数(必须),为0则不删除;第三-第n个为添加元素(可选)
    sort() --排序
    reverse() --倒转

  • 非变异方法(不会改变原始数组,而是返回一个新数组)
    filter()
    concat()
    slice()

表单控件绑定

  • v-model
    可以双向绑定数据与控件
    控件可以是input、checkbox、radio、select等

  • 修饰符
    .lazy

    .number

    .trim

posted @ 2017-05-26 07:42  l.shane  阅读(237)  评论(0编辑  收藏  举报