zoukankan      html  css  js  c++  java
  • vue key Diff算法 中央bus实现平行组件之间的传值 路由的重定向和别名 vuecli2与vuecli3 RESTFul vue自定义插件

    v-for key

    v-for循环需要添加key属性,唯一标识,这样重新渲染的速度比较快;key的作用==》虚拟DOM的Diff算法 主要作用是快速更新虚拟dom树

    lodash javascript使用工具库

    中央bus实现平行组件之间的传值

    $emit与$on进行组件之间的传值;注意$emit和$on的事件必须在一个公共的实例上,才能够触发
    demo:
    平行组件 A B C 中央bus;实现 A向C传递数据 B向C传递数据;$emit触发 $on接收 必须绑定在同一个实例上
    新建一个Vue实例Event
    在A B组件中传递数据 Event.$emit('sendMsg',msg) 触发事件,
    在c组件的mounted中绑定事件:
    Event.$on('sendMsg',msg=>{
    })

    vue-router导航守卫

    beforeEach afterEach beforeReslove

    beforeRouterEnter(to,from,next)

    在next的回调函数中可以访问this实例

    beforeRouterUpdate(to,from,next)

    在路由切换时,路径改变,但是组件复用的情况下,生命周期钩子不会触发,就可以在这里获取路由参数

    beforeRouterLeave(to,from,next)

    清除定时器
    在离开当前页面时,给用户提示信息,是否确认要离开,next()离开,next(false)留在当前页面

    路由重定向和别名

    别名:就是当前路由的另一种命名方式,与当前路由使用的时同一个模板

    routes=[
        {//在访问/product 或者 /a时,访问的是同一个组件
            path:'/product',
            alias:'/p',//起了个别名
            component:()=>import('../views/product.vue')
        },
        {
            path:'/home',
            component:()=>import('../views/home.vue')
        },
        {//路由重定向,当访问的路径不存在时,直接重定向到首页
            path:'*',
            redirect:'/home'
        }
    ];                

    vuecli2
    vue init webpack demo
    vuecli3
    vue creat demo1
    VueCLI3与Vue CLI2使用了相同的vue命令,所以Vue CLI2被覆盖了,如果你仍然需要使用旧版本的vue init功能,你可以全局安装一个桥接工具:
    vue/cli-init
    cnpm install vue/cli-init -g

    RESTFul

    一 TESTful规范

    一种软件的架构风格,设计风格,而不是标准,为客户端u你和服务端的交互提供一组
    设计原则和约束条件。

    面向资源的编程
    每个URL都代表一种资源

    二 HTTP动词

    对于资源的具体操作类型,由HTTP动词表示,常用的HTTP动词由以下五种:
    GET(SELECT) 从服务器取出资源
    POST(CREATE) 从服务器新建一个资源
    PUT(UPDATE) 在服务器更新资源(客户端提供改变后的完整资源)
    PATCH(UPDATE) 在服务器更新资源(客户端提供改变后的属性)
    DELETE(DELETE) 从服务器删除资源

    三 在URL中体现版本

    四 在URL中体现是否是API

    五 在URL中的过滤条件

    六 尽量使用HTTPS

    七 相应时设置状态码

    1** 信息,服务器收到请求,需要请求者继续执行操作
    2** 成功,操作被成功接收并处理
    3** 重定向,需要进一步的操作以完成请求
    4** 客户端错误,请求包含语法错误或无法完成请求
    5** 服务器错误,服务器在处理请求的过程中发生了错误

    八 返回值

    get请求 返回查到所有或单条数据
    post请求 返回新增的数据
    put请求 返回更新的数据
    patch请求 局部更新,返回更新整条数据
    delete请求,返回值为空

    九 返回错误信息

    如果状态码时4xx,就应该向用户返回出错信息,一般来说,返回信息中将error作为键名,出错信息
    作为键值即可

    nrm

    搭建内网npm,nrm是管理npm源的,决定npm从哪里下载插件

    饿了么ui组件

    移动端:ui框架 mint-ui
    pc:ui框架element-ui

    webpack别名配置

    resolve:{
        //自动补全后缀
        extensions:['.js','.vue','.json']
        //路径别名
        alias:{'@':resolve('src')}
    }

    <!DOCTYPE html>

    是针对ie的一些诡异行为的约束,使用mint-ui移动端,很多是使用document.body,需要把这个声明去掉,不然会导致有些插件使用报错

    vue自定义插件

    vue插件必须具备install函数;
    简单demo:

    function Installer(){
    }
    Installer.install=function(Vue){
        console.log(Vue);
    }
    export default Installer;    

    自定义一个log组件:

    新建Installer.js

    function Installer() {
    
    }
    Installer.install = function(Vue) {
        let log = function() {
                console.log('this is my log');
            }
            //挂载属性
        Object.prototype.$log = log;
        this.$log = 'hahahahaha'; //子类对象可以修改父类的属性
        //给原型定义 设置和获取,设置的时候,提示不可修改,获取的时候直接返回自定义的方法,就避免
        //子元素对父类属性的修改
        Object.defineProperty(Vue.prototype, '$log', {
            set: function() {
                console.log('不可修改');
            },
            get: function() {
                return log;
            }
        });
    }
    export default Installer;

    在main的js中引入:

    import Installer from './installer/installer'
    Vue.use(Installer);

    在组件实例中使用:

     mounted(){
         this.$log();
         this.$log='hahahahahah';
        }

    结果:

  • 相关阅读:
    NOIP2013题解
    NOIP2012题解
    NOIP2011题解
    NOIP2010题解
    【BZOJ2302】[HAOI2011]Problem C(动态规划)
    【BZOJ2299】[HAOI2011]向量(数论)
    【BZOJ2285】[SDOI2011]保密(分数规划,网络流)
    【BZOJ2246】[SDOI2011]迷宫探险(搜索,动态规划)
    【BZOJ2281】[SDOI2011]黑白棋(博弈论,动态规划)
    【BZOJ2245】[SDOI2011]工作安排(费用流)
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/13038165.html
Copyright © 2011-2022 走看看