vue自定义指令获取焦点及过滤器修改时间

 <template id="comp3">
     <div id="app">
         <model :list="selectedlist" :isactive="isActive" v-cloak @change="changeOverlay" @modify="add" @msearch="search"></model>
         <div class="panel panel-primary">
             <div class="panel-heading">
                 <h3 class="panel-title">网课管理</h3>
             </div>
             <div class="panel-body form-inline">
                 <label>
                     搜索名称关键字：
                     <!-- 自定义获取焦点 指令    -->
                     <input type="text" class="form-control" v-focus v-model="keywords" id="search">&nbsp;&nbsp;
                     <input type="button" value="搜索" class="btn btn-primary" />
                 </label>&nbsp;&nbsp;&nbsp;&nbsp;
                 <label>
                     ID:
                     <input type="text" class="form-control" v-model="id">
                 </label>
                 <label>
                     网课名称:
                     <input type="text" class="form-control" v-model="subClassifyName" @keyup.enter="add">
                 </label>
                 <input type="button" value="添加" class="btn btn-primary" @click="add()" />
             </div>
         </div>
         <table class="table table-bordered table-hover table-striped">
             <thead>
                 <tr>
                     <th class="text-center">网课ID</th>
                     <th class="text-center">网课名称</th>
                     <th class="text-center">创建时间</th>
                     <th class="text-center">更新时间</th>
                     <th class="text-center">操作</th>
                 </tr>
             </thead>
             <tbody>
                 <tr v-for="(item, index) of search(keywords)" :key="item.id">
                     <td class="text-center" v-text="item.id"></td>
                     <td class="text-center" v-text="item.subClassifyName"></td>
                     <td class="text-center" v-text="">{{item.createTime | dateFormat}}</td>
                     <td class="text-center" v-text="">{{item.updateTime | dateFormat}}</td>
                     <td class="text-center">
                         <!--data-toggle="modal" data-target="#update"-->
                         <a href="#" @click="showOverlay(index)">
                             <input type="button" data-toggle="modal" data-target="#compmodify_dialog" class="btn btn-primary" value="修改" />
                         </a>
                         <a href="#" @click.prevent="del(item.id)">
                             <input type="button" class="btn btn-danger" value="删除" />
                         </a>
                     </td>
                 </tr>
             </tbody>
         </table>
         <!-- 底部索引 -->
         <div class="box-pagination">
             <ul class="pagination">
                 <li><a href="#" aria-label="Previous" @click="getpageinfo(1)">首页</a></li>
             </ul>
             <ul class="pagination">
                 <li><a href="#" @click="getprepageinfo()">&laquo;</a></li>
             </ul>
             <ul v-for="i in page" class="pagination">
                 <li><a href="#" @click="getpageinfo(i)">{{i}}</a></li>
             </ul>
             <ul class="pagination">
                 <li><a href="#" @click="getaftpageinfo()">&raquo;</a></li>
             </ul>
             <ul class="pagination">
                 <li><a href="#" aria-label="Previous" @click="getpageinfo(page)">尾页</a></li>
             </ul>
         </div>
     </div>
 </template>

template

 // 网课管理 （comp3）
 var register = {
     template: '#comp3',
     data() {
         return {
             isActive: false,
             selected: -1,
             selectedlist: {},
             classifyName: '',
             keywords: '',
             id: '',
             subClassifyName: '',
             creatTime: '',
             updateTime: '',

             pagenum: '',
             page: '',

             list: [],
         }
     },
     props: ['clist'],
     methods: {
         // 修改数据
         showOverlay(index) {
             this.selected = index;
             this.selectedlist = this.list[index];
             this.changeOverlay();
         },
         // 点击保存按钮
         modify(arr) {
             if (this.selected > -1) {
                 Vue.set(this.list, this.selected, arr);
                 this.selected = -1;
             } else {
                 this.list.push(arr);
             }
             this.setSlist(this.list);
             this.changeOverlay();
         },
         // 添加
         add: function() {
             //获取id subClassifyName 加入到数组
             var car = {
                 id: this.id,
                 subClassifyName: this.subClassifyName,
                 createTime: new Date()
             }
             this.list.push(car)
             /*重置id subClassifyName 让对话栏里值空*/
             this.id = this.subClassifyName = ''
         },
         // 发起get请求后通过.then获取服务器返回的内容
         getpageinfo(pagenum) {
             this.pagenum = pagenum;
             this.$http.get('http://10.0.41.100:8096/course/list/' + pagenum).then(function(result) {
                 this.list = result.body.list
                 this.page = Math.ceil(result.body.total / 5)
                 /*alert(Math.ceil(result.body.total/5))*/
             })
         },
         getprepageinfo() {
             if (this.pagenum > 0) {
                 this.pagenum = this.pagenum - 1;
             }
             /*alert(pagenum)*/
             this.$http.get('http://10.0.41.100:8096/course/list/' + this.pagenum).then(function(result) {
                 this.list = result.body.list
                 this.page = Math.ceil(result.body.total / 5)
             })
         },
         getaftpageinfo() {
             if (this.pagenum < this.page) {
                 this.pagenum = this.pagenum + 1;
             }
             /*alert(pagenum)*/
             this.$http.get('http://10.0.41.100:8096/course/list/' + this.pagenum).then(function(result) {
                 this.list = result.body.list
                 this.page = Math.ceil(result.body.total / 5)
             })

         },
         getinfo() {
             this.$http.get('http://10.0.41.100:8096/course/list/' + '1').then(function(result) {
                 this.list = result.body.list
                 this.page = Math.ceil(result.body.total / 5)
                 /*alert(Math.ceil(result.body.total/5))*/
             })

         },
         /*根据id找到数据用list的 splice方法删除*/
         del(id) {
             this.list.some((item, i) => {
                 if (item.id == id) {
                     this.list.splice(i, 1)
                     return true;
                 }
             })
         },
         /*更改覆盖*/
         changeOverlay() {
             // 重置控件状态
             this.selected = -1;
             this.isActive = !this.isActive;
             this.createTime = new Date();
         },
         /*查询*/
         search(keywords) {
             /*includes() 检索该字符串中是否包含指定字符  是  返回*/
             return this.list.filter(item => {
                 if (item.subClassifyName.includes(keywords)) {
                     return item
                 }
             })
         }
     },
     created() { // 模板加载完成后立刻请求数据
         this.getinfo();
     }
 }
 // 网课管理 的模态框
 Vue.component('model', {
     props: ['list', 'isactive', 'selectedlist', ],
     template: "#compmodify",
     computed: {
         modifylist() {
             return this.list;
         }
     },
     methods: {
         changeActive() {
             this.$emit('change');
         },
         modify() {
             this.$emit('add', this.modifylist);
         }
     }
 });

vue

 /*1、日期过虑器--全局*/
 Vue.filter('dateFormat', function(dateStr, pattern = "") {
     // 根据给定字符串 得到特定时间  yyyy-mm-dd
     var dt = new Date(dateStr)
     var y = dt.getFullYear()
     var m = dt.getMonth() + 1 //month从0开始
     var d = dt.getDate()

     if(pattern.toLowerCase() === 'yyyy-mm-dd') { //toLowerCase() 转换成小写
         return `${y}-${m}-${d}`
     } else {
         var hh = dt.getHours()
         var mm = dt.getMinutes()
         var ss = dt.getSeconds()
         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
     }
 })
 /*2、自动获取光标--用Vue.directive()定义全局指令*/
 Vue.directive('focus', {
     inserted: function(el) { // 表示元素插入到DOM中的时候，会执行inserted函数
         el.focus()
     },
 })

Js