Vue必备知识点

箭头函数

在ES6中如果出现匿名函数,则省略function,在参数后添加=>

                                           如果存在一个参数,则省略括号,没有参数或一个参数以上不能省略

                                           如果函数只有一句或只有return语句,则去掉大括号和return关键字

原:

let demo = function(val){

cl(val)

}

现:

let demo = val=>cl(val)

1:v-bind(绑定元素的属性)

<tagName :属性名="初始化的值" />
<tagName :src="mySrc" />

2:v-on(绑定元素的动作)

<tagName @事件="函数" />
<tagName @click="handleAdd" />

3:大胡子表达{{}}

4:计算属性:双向绑定,不能异步

侦听器:单项绑定,可以异步

函数:单项绑定,可以异步

5:v-if:载入消耗小,切换消耗大

v-show:载入消耗大,切换消耗小

6:列表渲染

v-for:迭代数组

<tr v-for="(person,index) in persons" :key="person.id">

v-for="(alias,index) in 数组"

alias:别名

index:索引

:key绑定主键进行排序

数组必须是Vue实例化的数据,在data里

v-for:迭代对象

<ul>
  <li v-for="(value,name,index) in hero" :key="index">
     第{{ index }}个属性名是{{ name }},属性值是{{ value }}
  </li>
</ul>

v-for="(value,name,index) in 对象"

value:属性值

name:属性名

index:索引

7:过滤器(不能使用this)

        大胡子表达式

 <!-- {{ 被过滤的值 | 过滤器名 | 过滤器名 }} -->
<td>{{ person.payType | payFilter }}</td>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
以下为正确写法
<input type="text" :value="被过滤的内容|过滤器名">

        数据源,要实例化(真实项目可不写)

/* 设置数据源 payType:支付方式 1|2|3|4 */
const persons = [
    { id: 1, name: 'elena', payType: 1, },
    { id: 2, name: 'penny', payType: 2, },
    { id: 3, name: 'tommy', payType: 3, },
    { id: 4, name: 'matt', payType: 3, },
    { id: 5, name: 'aleric', payType: 4, },
    { id: 6, name: 'jack', payType: 2, },
    { id: 7, name: 'bonnie', payType: 4, },
    { id: 8, name: 'raj', payType: 1,},
]

        数据字典

/* 书写一个数据字典 */
const payOptions = [
    { id: 1, payName: '现金支付', },
    { id: 2, payName: '银行卡支付', },
    { id: 3, payName: '微信支付', },
    { id: 4, payName: '支付宝支付', }
]

        过滤器

filters:{
    /* 过滤器名 val:形参,表示被过滤的值 1|2|3|4 四选一 */
    payFilter(val){
        //console.log(this)     window
        /* 
        const arr = [1,2,3,4]
        let value = arr.find(a => a>=2) //2
        */
        const payObj = 
        payOptions.find( payOption => payOption.id === val )
        return payObj?payObj.payName:''
    },
},

        非箭头函数版本过滤器

filters:{
    /* 过滤器名 val:形参,表示被过滤的值 1|2|3|4 四选一 */
    payFilter(val){
        //console.log(this)     window
        /* 
        const arr = [1,2,3,4]
        let value = arr.find(a => a>=2) //2
        */
        const payObj = payOptions.find(function(payOption) {
           return payOption.id === val;
        });
        return payObj ? payObj.payName : '';
        },
},