vue随笔

1.数据筛选

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

2.文本格式化

 
<template>
  <div>
    <!--使用过滤器-->
    {{ dateStr | formatDate }}
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <!--在v-for中使用过滤器-->
        {{ item.date | formatDate }}
      </li>
    </ul>
  </div>
</template>
<script>
import { format } from '@/utils/date'
export default {
  filters: {
    formatDate(value) {
      return format(value, 'yyyy-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      dateStr : Date.now(),
      list: [
        {
          date: Date.now()
        }
      ]
    }
  }
}
</script>

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()
            }
        }
    })

9.Vue.set: 解决新增属性无法触发数据响应

/**
* target 要修改的对象
* prpertyName 要添加的属性名称
* value 要添加的属性值
*/
this.$set(target, propertyName, value)

10.Vue.use：安装插件

/**
* plugin: 要安装的插件 如 ElementUI
* options: 插件的配置信息 如 {size: 'small'}
*/
Vue.use(plugin, options)
//例如 Vue.use(ElementUI,{size: 'small'});