Vue(一)

Vue指令

 

v-model:用于数据双向绑定（一般用于input）

 

v-for:用于循环（数组与json同理）

只需要json的value

想要循环获得json的value、key、index

事件

v-on简写(@)：用于触发事件

事件冒泡：

        阻止事件冒泡：@click.stop

        阻止默认行为：@contextmenu.prevent

键盘

        @keydowm

        @keyup

        常用键:
            回车
                a). @keyup.13  //按回车才触发事件
                b). @keyup.enter
            上、下、左、右
                @keyup/keydown.left
                @keyup/keydown.right
                @keyup/keydown.up

                @keyup/keydown.down

属性

例子：v-bind:src=""  简写(:)  :src=""

class:

        :class="[red]"   //red是vue里面定义的数据

        :class="[red,blue]"

        :class="{red:a,blue:false}"  // a里面放boolean值，在Vue的数据里面定义

        :class="json"  

                data{

                    josn:{red:true,blue:flase}

                }

style:

        :style="[c]"  //c里面必须为json  

            data{

                    c:{color:red,background:blue}

             }

        :style="[c,d]"
                注意:  复合样式，采用驼峰命名法

        :style="json"

过滤器

过滤器用于：

 

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

定义方式

 

你可以在一个组件的选项中定义本地的过滤器：

filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

 第一个参数为要操作的数，第二个为参数