Vue

vue基础(二)

Nick · 1月27日 · 2020年本文6785字 · 阅读17分钟670

Vue调试工具vue-devtools的安装步骤和使用

Vue.js devtools - 翻墙安装方式 - 推荐
在这里插入图片描述

过滤器

概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;

私有过滤器

  1. HTML元素:
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

  1. 私有 filters 定义方式:
filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用

    dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值,防止报错

      var dt = new Date(input);

      // 获取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');



      // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日

      // 否则,就返回  年-月-日 时:分:秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } 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}`;

      }

    }

  }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串;

全局过滤器

// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 获取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日

  // 否则,就返回  年-月-日 时:分:秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } 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}`;

  }

});

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

键盘修饰符以及自定义键盘修饰符

x中自定义键盘修饰符

  1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:
Vue.config.keyCodes.f2 = 113;
  1. 使用自定义的按键修饰符:
<input type="text" v-model="name" @keyup.f2="add">

自定义指令

## 自定义全局和局部的自定义指令:

    // 自定义全局指令 v-focus,为绑定的元素自动获取焦点:

    Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

        el.focus();

      }

    });



    // 自定义局部指令 v-color 和 v-font-weight,为绑定的元素设置指定的字体颜色 和 字体粗细:

      directives: {

        color: { // 为元素设置指定的字体颜色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

        'font-weight': function (el, binding2) { // 自定义指令的简写形式,等同于定义了 bind 和 update 两个钩子函数

          el.style.fontWeight = binding2.value;

        }

      }

自定义指令的使用方式:

在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

品牌管理案例

该案例用运用vue基础(一)和vue基础(二)的所有内容实现的小案例,实现的功能有
1.添加新品牌
2.删除品牌
3.根据条件筛选品牌
4.其中也运用到了bootstrap插件

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css" rel="nofollow noopener"  />
    <script src="./lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="box">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="panel-title">添加品牌</h4>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id" />
                </label>
                <label>
                    Name:
                    <!-- //keyup.13="add" -->
                    <input type="text" class="form-control" v-model="name" @keyup.enter="add" />
                </label>
                </label>
                <label>
                    <!-- 加了小括号,就可以为元素传参数 -->
                    <input type="button" value="添加" class="btn bg-primary" @click="add" />
                </label>
                <label>
                    搜索名称关键字:
                    <input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'" />
                </label>

            </div>

        </div>



        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 之前, v-for 中的数据,都是直接从 data 上的list中直接渲染过来的 -->
                <!-- 现在, 我们自定义了一个 search 方法,同时,把 所有的关键字,通过传参的形式,传递给了 search 方法 -->
                <!-- 在 search 方法内部,通过 执行 for 循环, 把所有符合 搜索关键字的数据,保存到 一个新数组中,返回 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dateFormat}}</td>
                    <td><a href="" rel="nofollow noopener"  @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>


    </div>
    <div id="box2">
        <h2 v-color="'deeppink'" v-fontsize="'30'" v-fontfamily="'华文行楷'">{{ dt | dateFormat}}</h2>
    </div>
    <script type="text/javascript">
        //全局过滤器,实现时间格式化,所有的vue对象都能共享
        Vue.filter("dateFormat", function(dataStr, pattern = "") {
            // 根据时间字符串的到特定的时间
            var dt = new Date(dataStr);
            //yyyy-mm-dd
            var y = dt.getFullYear();
            var m = dt.getMonth() + 1;
            var d = dt.getDate();
            //正则表达式
            // return `${y}-${m}-${d}`;
            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } 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.f2 = 113;

        //使用Vue.directive()定义去全局的指令
        // 其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀,
        // 但是: 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用
        // 参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
        Vue.directive('focus', {
            bind: function(el) { // 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
                // 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象
                // 在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用
                // 因为,一个元素,只有插入DOM之后,才能获取焦点
                // el.focus()
            },
            inserted: function(el) { // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】
                el.focus()
                    // 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效
            },
            updated: function(el) { // 当VNode更新的时候,会执行 updated, 可能会触发多次

            }
        });

        //设置一个自定义绑定颜色的指令
        Vue.directive("color", {
            // 样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联的样式
            // 将来元素肯定会显示到页面中,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素
            bind: function(el, binding) {
                // el.style.color = "lightgreen";
                //和样式相关的操作一般可以在band中设置
                //通过参数来设置颜色
                el.style.color = binding.value;
            }
        })



        var vu = new Vue({
            el: "#box",

            data: {
                id: "",
                name: "",
                keywords: "", //搜索關鍵字
                list: [{
                    id: 1,
                    name: "奔驰",
                    ctime: new Date()
                }, {
                    id: 2,
                    name: "宝马",
                    ctime: new Date()
                }]
            },
            methods: {
                add() {
                    // 1.获取id和name,直接从data里面获取
                    // 2.组织一个对象
                    // 3.把这个对象调用数组的方法,添加到data上额list中
                    // 4.在vue中已经实现了数据的双向绑定,会自动监听到数据的改动把新的数据应用到页面中
                    var car = {
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    };
                    this.list.push(car);
                    this.id = this.name = "";
                },
                del(id) { //根据id删除数据
                    //1.根据id找到对应的索引
                    //2.直接迪奥弄数组的splice方法
                    /*  this.list.some((item,i)=>{
                            if(item.id==id){
                                this.list.splice(i,1);
                                //在some方法中,如果return true机会终止这个数组的后续循环
                                return true;
                            }
                        }) */
                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    })

                    // console.log(index)
                    this.list.splice(index, 1)

                },
                search(keywords) { //根据关键字进行数据搜索
                    /*  var newList = [];
                     this.list.forEach(item => {
                         if (item.name.indexOf(keywords) != -1) {
                             newList.push(item);
                         }
                     });
                     return newList; */


                    // 注意: forEach some filter findIndex 这些都属于数组的新方法,
                    // 都会对数组中的每一项,进行遍历,执行相关的操作;
                    // 注意 : ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')
                    // 如果包含,则返回 true ,否则返回 false
                    // js中的contain方法也可以返回包含指定关键字的元素
                    return this.list.filter(item => {
                        if (item.name.includes(keywords)) {
                            return item;
                        }
                    })
                }
            }

        });

        var vu2 = new Vue({
            el: "#box2",

            data: {
                dt: new Date()
            },
            methods: {},
            filters: {
                dateFormat: function(dataStr, pattern = "") {
                    // 根据时间字符串的到特定的时间
                    var dt = new Date(dataStr);
                    //yyyy-mm-dd
                    var y = dt.getFullYear();
                    var m = dt.getMonth() + 1;
                    var d = dt.getDate();
                    //正则表达式
                    // return `${y}-${m}-${d}`;
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                    } 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}+++++++`
                    }
                }
            },
            directives: {
                fontsize: { //设置字体大小
                    bind: function(el, binding) {
                        el.style.fontSize = parseInt(binding.value) + "px";
                    }
                },
                fontfamily: function(el, binding) { // 注意:这个 function 等同于 把 代码写到了 bind 和 update 中去
                    el.style.fontFamily = binding.value
                }

            }
        })
    </script>
</body>

</html>

实现效果

在这里插入图片描述

0 条回应
在线人数:1人 来访统计
隐藏