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';
    }

结果：

来源：oschina

链接：https://my.oschina.net/u/4266023/blog/4300182

标签

Vue CLI

Vue.js

javascript

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