vue的第二天

最新推荐文章于 2024-04-05 18:13:34 发布

好运连连炜   

最新推荐文章于 2024-04-05 18:13:34 发布

阅读量149

点赞数

分类专栏：前端文章标签： vue

原文链接：https://www.bilibili.com/video/av27969216/?p=58

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的一些关键概念，包括如何通过搜索关键词匹配列表，使用过滤器进行替换和填充操作，键盘监听及自定义修饰符的实现，以及自定义指令的创建。此外，还深入探讨了Vue的生命周期，解析了各个阶段的主要函数，帮助开发者更好地理解和掌握Vue应用的创建和管理过程。

摘要由CSDN通过智能技术生成

通过搜索关键词，匹配列表

 <label >
                    输入关键字搜索
                    <input type="text" class="form-control" v-model="keywords">
                </label>
               
               <tbody>
                    <tr v-for="item in search(keywords)" :key='item.id'> 
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ctime}}</td>
                        <td>
                            <a href="" @click.prevent='del(item.id)'>删除</a>
                        </td>
                    </tr>
            </tbody>
//forEach，some,filter,findIndex属于新数组方法
           //indexOf(item) !=-1属于包含，item.name.includes(),也属于包含，有就返回true
            //根据关键字搜索，1.使用forEach，some,filter,findIndex来遍历数组
            // 2.使用indexOf(item).includes()查找包含的数组，
            // 3.返回数组类型东西

            search(keywords){
                var newList=[];
               return newList= this.list.filter(item=>{
                    if(item.name.includes(keywords)){
                        return item;

                    }
                })

            }
            // 方法一

        //    search(keywords){
        //     var newList=[];
        //        return newList = this.list.filter(item=>{
        //            if(item.name.includes(keywords)){
        //                return item
        //            }
        //        })

        //    }
               
        //方法2      
//             var newList=[];
// var newList= this.list.filter(item=>{
//     if(item.name.indexOf(item) !=-1){
//         newList.push(item)
//     }
// })
// return newList;
//方法三
// var newList=[];
// this.list.forEach(item=>{
//     if(item.name.indexOf(item) !=-1){
//         newList.push(item);
//     }
// })
// return newList;

过滤器，替换

全局：
1.新建一个 Vue.filter（‘过滤器名字’，方法）
2。标签内容里面放 | 方法名字，如下
3./帅气/g，为正则全局匹配
4.记得函数里面要放参数

 <p>{{shuaiqi | bian}}</p>
        
    </div>
    
</body>


<script>
    Vue.filter('bian',function(shuaiqi){
        return shuaiqi.replace(/帅气/g,'颜值高') 
    })
    var ve = new Vue({
        el: '#app',
        data: {
            id:'',
            name:'',
            keywords:'',
            shuaiqi:'帅气的熊本熊就是帅气的我',

私有的就写在
var ve2= new Vue（{
filters：
{
名称：函数}
}）

填充

.padstart(数量，‘内容’)
例如 y.tostring().padstart(2,‘0’)

键盘监听，自定义修饰符

@click.enter=“add()”
按回车就生效

<p @click.f2="show">
Vue.config.keyCodes.f2 =113;

自定义指令

Vue.directive(‘名称’，{三个函数
bind：function(el){}，
inserted：function(el){},
update:(){}})

和样式相关，在bind中执行
与JS有关，会在inserted中执行

生命周期

生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类：

创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。