day02

最新推荐文章于 2021-03-18 21:37:42 发布

qq l vz z

最新推荐文章于 2021-03-18 21:37:42 发布

阅读量123

点赞数

分类专栏： Vue笔记文章标签： Vue笔记品牌列表的实现自定义指令 Vue生命周期

本文链接：https://blog.csdn.net/qq_34362251/article/details/83473601

版权

Vue笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

品牌列表案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.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>
                    Id:
                    <input type="text" class="form-control" v-model='id'>
                </label>
                <label>
                    Name:
                    <input type="text" class="form-control" v-model='name' @keyup.enter='add'>
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click='add'>
                <label>
                    搜索关键字:
                    <!-- 注意：Vue中所有的指令，在调用的时候，都以V-开头 -->
                    <input type="text" class="form-control" v-model='keyWord' v-focus>
                </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>
                <tr v-for="item in search(keyWord)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text='item.name'></td>
                    <td>{{item.ctime | dataForm('YYYY-mm-dd')}}</td>
                    <td><a href="#" @click.prevent='del(item.id)'>删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    Vue.filter('dataForm', function (datastr, pattern = '') {
        var dt = new Date(datastr)
        var y = dt.getFullYear()
        var m = dt.getMonth() + 1
        var d = dt.getDate()



        if (pattern.toLowerCase === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
        } else {
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()

            return `${y}-${m}-${d}-${hh}:${mm}:${ss}`
        }
    })
    //自定义全局按键修饰符
    Vue.config.keyCodes.f2 = 113
    //自定义全局修饰符
    //使用 Vue.directive() 定义全局指令 v-focus
    //其中参数1：指令的名称，注意，在定义的时候，指令的名称在前面，不需要加v-前缀
    //参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus', {
        bind: function (el) {
            //每当指令绑定到元素上的时候，会立即执行bind函数，只执行一次
            //注意：在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的Js对象，恶意调用原生JS的方法
            //在元素刚把绑定了指令的时候，还没有插入到DOM中去，这时候，调用了focus方法没有用
        },
        inserted: function (el) { //inserted表示元素插入到DOM中的时候，会执行inserted函数（触发一次）
            el.focus()
        },
        updated: function () { //当VNode更新的时候，会执行updated，可能会触发多次

        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{
                    id: 1,
                    name: '奔驰',
                    ctime: new Date()
                },
                {
                    id: 2,
                    name: '宝马',
                    ctime: new Date()
                }
            ],
            id: '',
            name: '',
            date: new Date(),
            keyWord: ''
        },
        methods: {
            add() {
                // console.log(1)
                var str = {
                    id: this.id,
                    name: this.name,
                    ctime: new Date()
                }
                this.list.push(str)
                this.id = this.name = ''
            },
            del(id) {
                // //es6新增，找到数组对应下标
                // var index = this.list.findIndex(item => {
                //     if(item.id == id) {
                //         return true
                //     }
                // })
                // this.list.splice(index, 1)
                this.list.some((item, i) => {
                    if (item.id == id) {
                        this.list.splice(i, 1)
                        //在数组的some方法中，如果return true，就会终止数组的后续循环
                        return true
                    }
                })
            },
            search(keyWord) {
                // var newList = []
                // this.list.forEach(item => {
                //     if (item.name.indexOf(keyWord) != -1) {
                //         newList.push(item)
                //     }
                // })
                // return newList

                //注意：foreeach some filter findIndex 这些都是属于数组的新方法
                //都会对你数组的每一项，进行遍历，执行相关操作
                var newList = this.list.filter(item => {
                    if (item.name.includes(keyWord)) {
                        return item
                    }
                })
                //注意es6中为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
                //如果包含则返回ture，窦泽返回false
                return newList
            }
        },

        //局部过滤器
        //如果局部过滤器和全局过滤器重名，采用就近原则，优先调用局部
        filters: {
            dataForm: function (datastr, pattern = '') {
                var dt = new Date(datastr)
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2, '0') //字符串填充
                var d = dt.getDate().toString().padStart(2, '0')



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

    })
</script>

</html>

过滤器

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <p>{{msg | msgFormat('疯狂')}}</p>
    </div>
</body>
<script>
    //全局过滤器
    Vue.filter('msgFormat', function (msg, forM) {
        //字符串的replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则
        return msg.replace(/曾经/g, forM)
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '曾经我也疯狂过，但是那只是曾经，我已经回不去那个曾经了'
        }
    })
</script>

</html>

全局过滤器，就是所有的VM实例都共享的
过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候就先调用私有过滤器
全局过滤器在Vue实例化之前定义（filter），私有过滤器在Vue实例内部定义（filters）

字符串填充（es6）

使用es6的字符串新方法String.prototype.padStart(maxLength,filString=‘’)或者String.prototype.padEnd(maxLength,filString=‘’)

var m = (dt.getMonth() + 1).toString().padStart(2, '0') //字符串填充

自定义按键事件

//自定义全局按键修饰符

    Vue.config.keyCodes.f2 = 113

<input type="text" class="form-control" v-model='name' @keyup.f2='add'>

自定义全局指令

//自定义全局修饰符
    //使用 Vue.directive() 定义全局指令 v-focus
    //其中参数1：指令的名称，注意，在定义的时候，指令的名称在前面，不需要加v-前缀
    //参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus', {
        bind: function (el) {
            //每当指令绑定到元素上的时候，会立即执行bind函数，只执行一次
            //注意：在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的Js对象，恶意调用原生JS的方法
            //在元素刚把绑定了指令的时候，还没有插入到DOM中去，这时候，调用了focus方法没有用
        },
        inserted: function (el) { //inserted表示元素插入到DOM中的时候，会执行inserted函数（触发一次）
            el.focus()
        },
        updated: function () { //当VNode更新的时候，会执行updated，可能会触发多次

        }
    })

钩子函数参数

钩子函数被赋予以下参数

el: 指令所绑定的元素，可以用来直接操作DOM
binding：一个对象，包含以下属性
- name: 指令名，不包括V-前缀
- value：指令的绑定值，例如：v-color=‘1+1’,value的值时2
- expression：绑定值得字符串形式，例如v-color=‘1+1’，expresson的值时‘1+1’
- ，，，，，其他不常用的，oldValue，arg,modifies,vnode,oldVnode等
除了el之外，其他参数都应该是只读的。如果需要在钩子之间共享数据，建议通过元素的dataset来进行
函数简写
- 大多数情况下，我们可能在bind和update钩子上做重复动作，并且不关心其他的钩子函数，可以这样写
```
Vue.directive('color-smatch', function(el,bind) {
    el.style.background = binding.value
})
```

Vue实例的生命周期

什么是生命周期：从Vue实例创建，运行，到销毁期间，总是伴随着各式各样的事件，这些事件统称为生命周期
生命周期钩子：就是生命周期别名而已
生命周期钩子=生命周期函数=生命周期事件
主要的生命周期函数分类
- 创建期间的生命周期函数
  - beforeCreate:实例刚在内存中创建出来，此时，还没有初始化好data和methods属性
  - created：实例已经在内存中创建，此时data已经methods已经创建，此时还没有开始编译模板
  - beforeMount：此时已经完成了模板的编译，但还没有挂载到页面中而已
  - mounted：此时，已经编译好了模板，挂载到了页面指定的容器中显示，用户已经可以看到渲染好的页面了，mounted是实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经被创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在内存中移动不动如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行，只要执行了mounted就表示整个Vue实例已经初始化完了：此时，组件已经脱离了创建阶段：进入到了运行阶段
- 运行期间的生命周期函数：下面两个事件，会根据data数据的改变，有选择的触发0次或者多次
  - beforeUpdate：状态更新之前执行此函数，此时的data中的数据是最新的，但是界面上显示的数据还是旧的，因此还没有开始重新渲染DOM节点，页面尚未和最新的数据保持同步，数据肯定被更新了
  - updated：实例更新完毕后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了
- 销毁期间的生命周期函数：
  - beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可以用，Vue实例已经从运行阶段，进入到销毁阶段，实例身上的所有data和所有methods，以及过滤器，指令。。。。。都处于可用状态，此时还没有真正执行销毁过程
  - destroyed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会被解绑。所有的事件监听器会被移除，所有的子实例也会被销毁

qq l vz z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day02

品牌列表案例&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫

专栏目录