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 方法（字符串独有的方法）

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"

 5 自定义指令函数简写（相当于把代码写到了bind update中去）

'fontsize':function(el,binding='12px'){

                        el.style.fontSize=parseInt(binding.value)+'px'

                    }

6 Vue实例的生命周期

　　生命周期钩子= 生命周期函数=生命周期事件

*如果要通过某些插件操作页面上的Dom节点了，最早要在mounted中进行

只要执行完了mounted，就表示整个Vue实例 已经初始化完毕了;此时组件已经脱离了创建阶段

<script type="text/javascript">

            var vm=new Vue({

                el:'#app',

                data:{msg:"okok"},

                methods:{

                    show(){

                        console.log('lo被创建执行')

                    }

                },

                beforeCreate(){

                    // 这是我们遇到的第一个生命周期函数，完全被创建出来之前，会执行它

                    // 注意 在beforeCreate生命周期函数执行的时候，其它所有都没初始化

                    //     相当于__init___()

                    console.log(this.msg,'befor')

                    },

                created(){

                    console.log(this.msg)

                    // 在created中 data和methods都已经初始化好了

                },

                beforeMount(){

                    //这是第3个生命周期函数，表示模板已经在内存中编辑完成，但是尚未把模板渲染到页面中

                },

                mounted(){

                    //这是第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经

                    // 可以看到渲染好的页面了

                    // 注意：mounted是实例创建期的最后一个生命期函数，当执行完mounted就表示，

                    //         实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就存在我们的内存中

                }

            })

        </script>

---生命周期初始化阶段解释

                beforeUpdate(){

                    // 当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面

                    //  尚未和最新的数据保持同步

                },

                updated(){

                    // 最后执行销毁阶段

                }

--实例销毁阶段

7 get post jsonp请求

Vue-resource 依赖于Vue,所以先后顺序要注意，http://www.zymseo.com/js/vue-resource.js

options : 具体看Vue github的说明

成功的回调函数必须要写，，失败为可写，

前端框架开始学习Vue(二)的更多相关文章

  1. 前端框架开始学习Vue(三)

    初步安装.与搭建    https://www.cnblogs.com/yanxulan/p/8978732.html ----如何搭建一个vue项目 安装 nodejs,,, npm i == np ...

  2. 前端框架开始学习Vue(一)

    MVVM开发思想图(图片可能会被缩小,请右键另存查看,图片来源于网络)   定义基本Vue代码结构   1 v-text,v-cloak,v-html命令 默认 v-text没有闪烁问题,但是会覆盖元 ...

  3. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  4. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  5. 前端框架对比之vue与regular(一)

    每次一写到Regular总是忍不住先介绍一下,Regualr是网易杭州研究所的一位叫郑海波的大神写的一款前端框架,目前 这款框架推广的不深,加上其和angular过于相似的框架名,导致接受力并不大,其 ...

  6. 前端框架——AmazeUI学习

    AmazeUI官网: http://amazeui.org/ 前后台模板下载:链接:链接:http://pan.baidu.com/s/1c2uVfk0 密码:zuva 十大前端框架参考链接:http ...

  7. 最受欢迎的前端框架 —— Bootstrap学习

    Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便. 首先,要基本掌握Bootstrap框 ...

  8. 前端小白webpack学习（二）

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  9. Reactive UI -- 反应式编程UI框架入门学习（二）

    前文Reactive UI -- 反应式编程UI框架入门学习(一)  介绍了反应式编程的概念和跨平台ReactiveUI框架的简单应用. 本文通过一个简单的小应用更进一步学习ReactiveUI框架的 ...

随机推荐

  1. Django中models定义的choices字典使用get_FooName_display()在页面中显示值

    问题 在django的models.py 中,我们定义了一些choices的元组,类似一些字典值,一般都是下拉框或者单多选框,例如 0对应男 1对应女等等 看下例子: class Area(model ...

  2. LeetCode_383. Ransom Note

    383. Ransom Note Easy Given an arbitrary ransom note string and another string containing letters fr ...

  3. [转]Ubuntu 上创建常用磁盘阵列

    链接地址:https://www.jianshu.com/p/9a458510593a

  4. css样式writing-mode垂直书写测试

    writing-mode:控制文字的属性方向,但是不是所有的浏览器都兼容,在网页上使用时,有的浏览器显示不出该样式.该文测试的是垂直书写:网上对于测试的属性值的解释是:tb-rl:上-下,右-左.对象 ...

  5. SQL Delta实用案例介绍，很好的东西，帮了我不少忙

    SQL Delta实用案例介绍 概述 本篇文章主要介绍SQL DELTA的简单使用.为了能够更加明了的说明其功能,本文将通过实际项目中的案例加以介绍. 主要容 Ÿ   SQL DELTA 简介 Ÿ   ...

  6. web端自动化——Remote应用

    Selenium Grid允许同时并行地.在不同的环境上运行多个测试任务.这里主要演示一下怎么使用Selenium Grid. 准备: 1. 需要两台机子 2.两台机子分别安装好JDK环境 3.两台机 ...

  7. Ubuntu18.04 root 登录

    默认安装Ubuntu18.04都是不允许以root用户进行登录的,想要以root用户进行登录需要进行一些操作,主要是以下几个步骤:第一步:以普通用户登录系统,创建root用户的密码在终端输入命令:su ...

  8. dockerui 安装

    meiya@meiya:~$ docker pull abh1nav/dockerui Using default tag: latest latest: Pulling from abh1nav/d ...

  9. mysql 严格模式 Strict Mode

    mysql 严格模式 Strict Mode 找到MySQL安装目录下的my.cnf(windows系统则是my.ini)文件 在sql_mode中加入STRICT_TRANS_TABLES则表示开启 ...

  10. Kylin系列（一）—— 入门

          因为平常只会使用kylin而不知其原理,故写下此篇文章.文章不是自己原创,是看过很多资料,查过很多博客,有自己的理解,觉得精华的部分的一个集合.算是自己对Kylin学习完的一个总结和概括吧 ...