vue笔记

1.数据筛选

新数组=原数组.filter(p=>p.name.indexOf(筛选条件)>=0)

<p>{{number|过滤器名称}}</p>
Vue.filter('过滤器名称',function (value) {
        return value>0      //返回大于0的数据
    })

2.数据排序

原数组.sort(function(p1,p2){	
	return p1.age-p2.age   //升序
	//降序  return p2.age-p1.age 
})

3.组止事件冒泡

<div @click="parent">
	<div @click.stop="children">
		点我
	</div>
</div>

4.组止事件默认行为

<a href="http://www.baidu.com" @click.prevent="children"> 点我 </a>

5.点击回车提交

<input type="text" @keyup.enter="submit">

6.表格文字居中对齐

在el-table中增加

:cell-style="cellStyle"
:header-cell-style="rowClass"

在methods中增加

methods:{
            //表内容居中
            cellStyle({row,column,rowIndex,columnIndex}){
                return "text-align:center"
            },
            //表头居中
            rowClass({row,rowIndex}){
                return "text-align:center"
            }
}

6.获得当前行的数据 v-model=“scope.row”

				    <el-table-column
				            label="待还日期"
                            width="240%">
                        <template slot-scope="scope">
                            <el-date-picker
                            		//获得当前行的数据
                                    v-model="scope.row.daihuanshijian"
                                    type="date"
                                    placeholder="选择日期"
                                    size="mini"
                                    :picker-options="selectDate"
                                    @change="changeDate(scope.row)">
                            </el-date-picker>
                        </template>
                    </el-table-column>                       

7.获得某一个元素对象

<p ref="content">hello word</p>
<button @click="getP()"></button>
 methods:{
    getP(event){
    	event.target              //获得当前元素对象
        this.$refs.content         //获得p元素对象
    }  
}

8.自定义指令

自定义全局指令

<p v-upper-text="msg"></p>
 Vue.directive('upper-text',function (el,binding) {
        // el:指令所在的标签对象
        // binding:包含指令相关信息数据的对象
        //将msg的值转换成全大写
        el.textContent=binding.value.toUpperCase()     
    })

自定义局部指令

 <p v-lower-text="msg"></p>
  new Vue({
        directives:{
            'lower-text'(el,binding) {
                // el:指令所在的标签对象
                // binding:包含指令相关信息数据的对象
                //将msg的值转换成全小写
                el.textContent=binding.value.toLowerCase()
            }
        }
    })