通过动态列表了解—vue自定义指令、过滤器和事件修饰符等

最新推荐文章于 2024-08-07 09:03:59 发布

何迟

最新推荐文章于 2024-08-07 09:03:59 发布

阅读量734

点赞数 1

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82844079

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

提要：

1.最重要能够理解Vue的设计好处，浏览器持续监视model实例的改变而做出相应的改变。所以前端开发人员，不需要考虑数据改变以后浏览器该如何重新渲染页面，只需关注业务逻辑代码。

2.查询功能，只需返回索引即可（Vue好处）

3.全局过滤器和私有过滤器的定义

4.全局自定义指令和私有自定义指令的定义

5.键盘修饰符的定义

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
      <div id="app">
          
          <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-model="name">
                  </label>
                  
                  <label>
                      qq号:
                      <input type="text" class="form-control" v-model="qq" v-on:keyup.o="add">
                      <!--keyup响应键盘弹起事件.enter按键修饰符-->
                  </label>
                  
                  <input type="button" value="插入" class="btn btn-primary" v-on:click="add">

                  <label>
                      寻找名字关键字:
                      <input type="text" class="form-control" v-model="keyWord" id="search" v-style="'cornflowerblue'" v-focus>
                      <!--双引号里面颜色还需要用单引号引起来，因为不加单引号，Vue当作data内的属性-->
                  </label>
              </div>
          </div>
          
          <table class="table table-bordered table-hover table-striped">
              <thread>
                  <tr>
                      <th>姓名</th>
                      <th>qq号</th>
                      <th>时间</th>
                      <th>操作</th>
                  </tr>
              </thread>
              <tbody>
                  <tr v-for="item in search(keyWord)" :key="item.name">
                      <td>{{ item.name }}</td>
                      <td>{{ item.qq }}</td>
                      <td>{{ item.ctime | dateFormat('')}}</td>
                      <td>
                          <a href="#" v-on:click.prevent="del(item.name)">删除</a>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>
      
      <div id="app2" v-style="'darkorange'" v-fontweight="650" v-italic>
          {{ dt | dateFormat}}
      </div>

      <script>
          Vue.filter('dateFormat',function (dateStr,pattern="") {
              //这里定义pattern防止没有接收到时间字符串
              var dt = new Date(dateStr);
              //接收时间字符串
              var y = dt.getFullYear();
              var m = (dt.getMonth() + 1).toString().padStart(2,'0');
              //从零开始，所以加上1
              var d = dt.getDate().toString().padStart(2,'0');
              //padStart()和padEnd()都是ES6新特性添加的方法，将不足的字符串补全
              
              if(pattern.toLowerCase() ==='yyyy-mmm-dd'){
                  return `${y}-${m}-${d}`
                  //相当于`yyyy-mmm-dd`，Tab上面那个键的符号   
              }else{
                  var hh = dt.getHours().toString().padStart(2,'0');
                  var mm = dt.getMinutes().toString().padStart(2,'0');
                  var ss = dt.getSeconds().toString().padStart(2,'0');
                  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
              }
          });
          <!--定义一个全局的过滤器，达成时间的格式化-->
          
          Vue.config.keyCodes.o = 79;
          //键盘上字母o的键盘码，对应79，并且不在默认提供的里面，取ok的意思

    
          Vue.directive('focus',{
              // bind:function (el) {
              //     el.focus();
              //     //这里只添加到DOM树中，还没有添加到DOM中，这里所以不能使用    
              //},
              inserted:function (el) {
                  el.focus();
              }
          });
          //自定义全局指令用此方法，第一个参数是自定义的指令的名字，这时不用添加v-前缀。第二个是钩子函数，将方法设置好
          
          Vue.directive('style',{
              bind:function (el,binding) {
                  el.style.color = binding.value;
                  el.style.fontStyle = 'italic';
              }
              //这里可以用v-bind是因为绑定是样式，在页面渲染时。浏览器就会找到对应的对象进行渲染
              //同时这样el和binding两个钩子函数的两个参数的联合使用，可以为用户自定义一个用户接口，可以为用户提供个性的Style
          });
          
          var vm = new Vue({
             el:'#app',
             data:{
                 name:null,
                 qq:null,
                 keyWord:'',
                 //这里如果用null，表示没有任何数值，若用''，表示有东西，但是为空，所以一个查不到隐藏了，一个全部显示
                 list:[
                     { name:'陈小帅',qq:3199578835,ctime:new Date()},
                     { name:'chenxiaoshuai',qq:2323010676,ctime:new Date()},
                     { name:'chensmallcool',qq:3199578835,ctime:new Date()},
                     { name:'陈da帅',qq:2323010676,ctime:new Date()}
                 ]
             },
             methods:{
                 add(){
                     var someone = {name:this.name,qq:this.qq,ctime:new Date()};
                     //获取新的对象
                     this.list.push(someone);
                     //在列表最后中添加对象
                     this.name=this.qq=null;
                     //清空数据    
                 },
                 // del(name){
                 //     this.list.some((item,i) => {
                 //         if(item.name == name){
                 //             this.list.splice(i,1)
                 //             return true;
                 //         }
                 //     })
                 // }  老版本方式
                 del(name){
                     var index = this.list.findIndex(item =>{
                         //新版本中，提供的快速找到对应的索引，并返回
                         if(item.name == name){
                             return true;
                         }
                     });
                     this.list.splice(index,1)
                 },
                 // search(keyWord){
                 //     var newList = []
                 //     this.list.forEach(item=>{
                 //         if(item.name.indexOf(keyWord)!=-1){
                 //             newList.push(item)
                 //         }
                 //     })
                 //     return newList
                 // }
                 
                 search(keyWord){
                     var newList = this.list.filter(item =>{
                         if(item.name.includes(keyWord)){
                             return item;
                         } 
                     });
                     return newList;
                 }
                 //体现了Vue的好处，一直监控着model实例的改变，而做出改变，程序员只需要关注业务逻辑    
             } 
          });
          
          var vm2 = new Vue({
             el:'#app2',
             data:{
               dt: new Date()   
             }, 
              methods:{},
              filters:{ 
                 dateFormat:function (dateStr,pattern='') {
                     var dt = new Date(dateStr);
                     var y = dt.getFullYear().toString().padStart(2,'0');
                     var m = (dt.getMonth() + 1).toString().padStart(2,'0');
                     //从零开始，所以加上1
                     var d = dt.getDate().toString().padStart(2,'0');
                     
                     return `${y}-${m}-${d}`
                     //以作区分
                 }
              },
              //Vue()新的实例化的，在内部这个filters是这个Vue实例的私有的过滤器
              
              directives:{
                 'fontweight':{
                     bind:function (el,binding) {
                         el.style.fontWeight = binding.value;
                         el.style.fontSize = '40px';
                     }
                 },
                 'italic':function (el) {
                     el.style.fontStyle = 'normal';   
                 }
              }
              //app2私有的指令,原来的app2时间默认是斜体
          });
      </script>
</body>
</html>

效果：