前端框架开始学习Vue
Posted skyda
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端框架开始学习Vue相关的知识，希望对你有一定的参考价值。
1 根据关键字实现数组的过滤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css3.3.7/bootstrap.css"/> </head> <script src="vue.js"></script> <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 for=""> id: <input type="text" class="form-control" v-model="id"/> </label> <label for=""> name: <input type="text" v-model="name" /> </label> <!--在Vue中，使用事件绑定机制，为元素指定处理函数， 如果加了小括号，就可以传参 --> <input type="button" value="添加" class="btn-primary" @click="add()"/> <input type="text" v-model="keyword"/> </div> </div> <table border="" cellspacing="" cellpadding="" class="table table-bordered table-hover table-striped"> <thead> <tr><th>id</th> <th>name</th> <th>time</th> <th>operation</th> </tr> </thead> <tbody> <!--之前 v-for中的数据，都是直接从data上的list中直接渲染的--> <!--现在，我们自定义serarch方法，通过传参形式传递给serarch--> <!--在serarch方法内部通过执行for 循环，把符合的返回--> <tr v-for="item in serarch(keyword)" :key="item.id"> <td>{{item.id}}</td> <td v-text="item.name"></td> <td>{{item.ctime}}</td> <td><a href="" @click.prevent="dele(item.id)">删除</a></td> </tr> </tbody> </table> </div> <script type="text/javascript"> var vm=new Vue({ el:‘#app‘, data:{ id:‘‘, name:‘‘, keyword:"", list:[ {id:1,name:‘灰蒙蒙1‘,ctime:new Date()}, {id:2,name:‘宝‘,ctime:new Date()}, ] }, methods:{ add(){ this.list.push({id:this.id,name:this.name, ctime:new Date()}) this.id=this.name=‘‘ }, dele(id){//根据id 找到并删除数据 // this.list.some((item,i)=>{ // this.list.splice(i,1) // if(item.id==id){return true} // } // ) var index= this.list.findIndex(item=>{ if(item.id==id){ return true } }) this.list.splice(index,1) }, serarch(keyword){ // var newList=[] // this.list.forEach(item=>{ // if(item.name.indexOf(keyword)!=-1){ // newList.push(item) // } // // }) // return newList // 注意：forEach some filter findIndex这些都属于数组的新方法 // 都会对数组的每次进行遍历执行相关的操作 return this.list.filter(item=>{ // 注意：Es6中，为字符串提供了一个新方法，叫做 // String:prototype.includes(‘要包含的字符串‘) // 如果包含，则返回 true,反之 if(item.name.includes(keyword)){ return item } }) } } }) </script> </body> </html>
2 全局过滤器使用
// 过滤器定义语法 // Vue.filter(‘过滤器名‘,function(){}) // 过滤器中的function，第一个参数，已经被规定死了， // 永远都是过滤器管道符传递过来的数据 Vue.filter(‘过滤器名‘,function(data){ return data+‘123‘ }) </script> </body> </html> <!--过滤器调用时候的格式 {{name | 过滤器名}}-->
<body> <div id="app"> <p>{{msg | msgFormat(‘疯狂‘)}}</p> </div> <script type="text/javascript"> Vue.filter(‘msgFormat‘,function(data,arg){ // 字符串的 replace 方法，第一个参数，除了可写一个字符之外， // 还可以定义一个正则 return data.replace(/单纯/g,arg) }) var vm=new Vue({ el:"#app", data:{ msg:‘曾经，我也是一个单纯的少年,单纯的我也一直很单纯‘ } }) </script> </body>
自定义私有过滤器
调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，
优先调用私有过滤器
3 Es6 方法 padStart 方法
var m =(dt.getMonth()+1).toString().padStart(2,‘0‘)
4 按键修饰符（按键事件）
参考官方文档 https://cn.vuejs.org/v2/guide/events#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
也可以输入键码值 @keyup.113="add"
以上是关于前端框架开始学习Vue的主要内容，如果未能解决你的问题，请参考以下文章