14.vue路由脚手架

一.vue路由:https://router.vuejs.org/zh/

1、定义

let router = new VueRouter({mode:"history/hash",base:"基本路径" 加一些前缀  必须在history模式下有效linkActiveClass:"active", 范围选择linkExactActiveClass:"exact", 精确选择routes:[{path,component}]
});

2、注入Vue实例中

new Vue({router})

3、渲染

内容
默认翻译成a标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let Index = {template:`<div>首页</div>`};
let User = {template:`<div>用户</div>`};
let News = {template:`<div>新闻</div>`};
let About = {template:`<div>关于我们</div>`};
let Login = {template:`<div>用户登陆</div>`};
let Info = {template:`<div>用户信息</div>`}let router = new VueRouter({//mode:"history",//hash//mode:"hash",//hash,linkActiveClass:"active",linkExactActiveClass:"exact",//base:"/base/",// 在历史模式下运行routes:[//配置路由 {path,component}{path:"/index",component:Index},{path:"/user",component:User},{path:"/user/login",component:Login},{path:"/user/login/info",component:Info},{path:"/news",component:News},{path:"/about",component:About},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><a class="nav" href="#/index">首页</a><a class="nav" href="#/user">用户</a><a class="nav" href="#/user/login">用户登陆</a><a class="nav" href="#/user/login/info">用户信息</a><a class="nav" href="#/news">新闻</a><a class="nav" href="#/about">关于我们</a><hr /><router-link class="nav" to="/index">首页</router-link><router-link class="nav" to="/user">用户</router-link><router-link class="nav" to="/user/login">用户登陆</router-link><router-link class="nav" to="/user/login/info">用户信息</router-link><router-link class="nav" to="/news">新闻</router-link><router-link class="nav" to="/about">关于我们</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image

跳转:

window.history.forward/back();

vm.$router.forward/back();
vm.$router.go(+-n);

vm.$router.push(path);
vm.$router.push({path});

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let Index = {template:`<div>首页</div>`};
let User = {template:`<div>用户</div>`};
let News = {template:`<div>新闻</div>`};
let About = {template:`<div>关于我们</div>`};let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/index",component:Index},{path:"/user",component:User},{path:"/news",component:News},{path:"/about",component:About},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, methods:{back(){//window.history.back();//this.$router.back();this.$router.go(-1);},forward(){//window.history.forward();//this.$router.forward();this.$router.go(1);},gohome(){//location = "http://localhost/20180727/%E8%B7%AF%E7%94%B14.html#/index"//this.$router.push("/index");this.$router.push({path:"/index"});}}}); 
};
</script>
</head><body>
<div id="app"><input @click="back" type="button" value="后退"/><input @click="forward" type="button" value="前进"/><input @click="gohome" type="button" value="回到首页"/><hr /><router-link class="nav" to="/index">首页</router-link><router-link class="nav" to="/user">用户</router-link><router-link class="nav" to="/news">新闻</router-link><router-link class="nav" to="/about">关于我们</router-link><router-view></router-view>
</div>
</body>
</html>

user?id=123   req.query     /user
/user/123     req.params    /user/:id


4.路由传参:

{path:"/user/:id"}   {{$route.params.id}}  
{path:"/user"}    {{$route.query.id}}   

exp1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用户id:{{$route.params.id}}---{{a}}--{{b}}</div>`,data(){return {a:1,b:2}   },updated(){console.log("updated",this.$route.params.id);   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用户1</router-link><router-link class="nav" to="/user/222">用户2</router-link><router-link class="nav" to="/user/333">用户3</router-link><router-view></router-view>
</div>
</body>
</html>

res:

https://upload-images.jianshu.io/upload_images/12200279-5b1f57650ddb67ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

exp2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用户id:{{$route.query.id}}</div>`,updated(){console.log("updated",this.$route.query.id);    }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user?id=111">用户1</router-link><router-link class="nav" to="/user?id=222">用户2</router-link><router-link class="nav" to="/user?id=333">用户3</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image

高级用法:把参数变成组件的属性

{path:"/user/:id",props:true}    props:["id"] ---> this.id   {{id}}      params
{path:"/user",props:true}      props:["id"] ---> this.id   {{id}}   错误的 query

props格式:

1、布尔值 true变成组件属性
2、对象 {不会改变的值}
3、函数

props(router){  return {router.params/query}    
}

query只能用3.函数传参

exp1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {props:["id"],template:`<div>用户id:{{$route.params.id}}---{{id}}</div>`,updated(){console.log("updated",this.$route.params.id,this.id);   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}//{path:"/user/:id",component:User,props:true},//{path:"/user/:id",component:User,props:{id:123}},{path:"/user/:id",component:User,props(router){console.log(router);return {id:router.params.id}}},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body><div id="app"><router-link class="nav" to="/user/111">用户1</router-link><router-link class="nav" to="/user/222">用户2</router-link><router-link class="nav" to="/user/333">用户3</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image

exp2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {props:["id"],template:`<div>用户id:{{$route.query.id}}---{{id}}</div>`,updated(){console.log("updated",this.$route.query.id,this.id);    }
};
let router = new VueRouter({routes:[//配置路由 {path,component}//{path:"/user",component:User,props:true},//{path:"/user",component:User,props:{id:123}},{path:"/user",component:User,props(router){console.log(router);return {id:router.query.id} ;}},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user?id=111">用户1</router-link><router-link class="nav" to="/user?id=222">用户2</router-link><router-link class="nav" to="/user?id=333">用户3</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image
----------------------------------

5.路由监听

==watch==:可以加给1、Vue实例,2、组件
watch(){$route(to,from){}
}
==beforeRouteUpdate==
beforeRouteUpdate (to,from,next){next();next(false);禁止路由跳转next(path);next({path});next({path,query});next({name,params});
}

exp1:
watch:全局监听

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用户id:{{$route.params.id}}</div>`
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, watch:{$route(to,from){console.log("from:",from);console.log("to:",to);      }   }}); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用户1</router-link><router-link class="nav" to="/user/222">用户2</router-link><router-link class="nav" to="/user/333">用户3</router-link><router-view></router-view>
</div>
</body>
</html>

exp1:
watch:局部监听

<script>
let User = {template:`<div>用户id:{{$route.params.id}}</div>`,watch:{$route(to,from){console.log("from:",from);console.log("to:",to);      }   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>

exp3:
beforeRouteUpdate :
exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用户id:{{$route.params.id}}</div>`,beforeRouteUpdate (to,from,next){console.log("from:",from);console.log("to:",to);  //next();//next(false);if(to.fullPath == "/user/111"){//next("/index");   //next({path:"/news",query:{id:123}});  //next({path:"/news/:id",params:{id:123}});//错误的    next({name:"user",params:{id:123}});    } else {next(); }   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",name:"user",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用户1</router-link><router-link class="nav" to="/user/222">用户2</router-link><router-link class="nav" to="/user/333">用户3</router-link><router-view></router-view>
</div>
</body>
</html>

6.命名路由:

主要的用途在路由传参

{name,params}
{path,query}


7.路由嵌套 命名视图

组件template取名字,router-link标签中要加name="名字",默认default,可不写

VueRouer({routes:[{name,component,children:[{name,componet,children:[{name,component.....}]}]}{name:components:[default:{template:xxxx}xxx:{template:xxxx}]}]
});
<router-view><router-view> name="default"   
<router-view name="xxx"><router-view>

exp1:路由嵌套

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",name:"user",component:{template:`<div>用户id:{{$route.params.id}} <router-view></router-view></div>`},children:[//{path,component}{path:"info",component:{template:`<div>info</div>`}},{path:"pass",component:{template:`<div>pass</div>`}}]},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用户1</router-link> <router-link class="nav" to="/user/222/info">用户2</router-link> <router-link class="nav" to="/user/333/pass">用户3</router-link> <router-view></router-view>
</div>
</body>
</html>

res:
image

exp2:
命名视图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/index",name:"index",component:{template:`<div>首页</div>`},},{path:"/user",name:"user",components:{default:{template:`<div>用户</div>`},info:{template:`<div>用户info</div>`},pass:{template:`<div>用户pass</div>`},    },},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/index">首页</router-link> <router-link class="nav" to="/user">用户</router-link> <router-view></router-view><router-view name="info"></router-view><router-view name="pass"></router-view>
</div>
</body>
</html>

res:
image


二.vue-cli脚手架

https://www.npmjs.com/package/vue-cli

1、先安装 npm i -g vue-cli
2、创建项目 vue init
vue init webpack myvue
安装模块

相当于安卓软件的不同的应用商城
1、npm
2、yarn https://yarnpkg.com/zh-Hans/
3、bower https://bower.io/

3、启动项目

cd myvue
npm start 或者 npm run dev


作业:
1.Vue.config.productionTip = false

Vue.config.productionTip的意思

生产模式需要在main.js中关闭 :Vue.config.productionTip = false,
作用是阻止 vue 在启动时生成生产提示。
即,不设false会在生产环境依旧提示:
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

2.import/export http://es6.ruanyifeng.com/#docs/module

引入模块 require               import
导出模块 exports/moudel.exports    export

let fs = require("fs");

import fs from "fs"

exports.a = 12;
module.exports = {
a:12
}

export {a:12}

export default {a:12}


require/exports/moudel.exports/import/export

转载于IMWeb社区

ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。

不把require和import整清楚,会在未来的标准编程中死的很难看。

require时代的模块

node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。

node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。

// a.js// -------- node -----------
module.exports = {a : function() {},b : 'xxx'
};// ----------- AMD or CMD ----------------
define(function(require, exports, module){module.exports = {a : function() {},b : 'xxx'};
});

可以看出,为了保持风格的高度统一,除了在浏览器端的模块中要使用一个define函数来提供模块的闭包以外,其他代码可以完全一致。

// b.js// ------------ node ---------
var m = require('./a');
m.a();// ------------ AMD or CMD -------------
define(function(require, exports, module){var m = require('./a');m.a();
});

在使用上,也非常相似。虽然AMD or CMD提供了更加丰富的风格,但是我们本文主要是讨论node环境下,所以不做扩展。

ES6中的module

ES6发布的module并没有直接采用CommonJS,甚至连require都没有采用,也就是说require仍然只是node的一个私有的全局方法,module.exports也只是node私有的一个全局变量属性,跟标准半毛钱关系都没有。

export导出模块接口

export的用法挺复杂的,具体有哪些可以看这里。这里举几个例子:

// a.js
export default function() {}
export function a () {}var b = 'xxx';
export {b}; // 这是ES6的写法,实际上就是{b:b}
setTimeout(() => b = 'ooo', 1000);
export var c = 100;

在要导出的接口前面,加入export指令。

在export之后,b还可以被修改,这和CommonJS有着巨大不同,关于内部机理的东西,本文就无耻的省略了。

注意,下面的语法有严重错误:

// 错误演示
export 1; // 绝对不可以
var a = 100;
export a;

export在导出接口的时候,必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义,也不可能在import的时候有一个变量与之对应。export a虽然看上去成立,但是a的值是一个数字,根本无法完成解构,因此必须写成export {a}的形式。即使a被赋值为一个function,也是不允许的。而且,大部分风格都建议,模块中最好在末尾用一个export导出所有的接口,例如:

export {fun as default,a,b,c};

import导入模块

import的语法跟require不同,而且import必须放在文件的最开始,且前面不允许有其他逻辑代码,这和其他所有编程语言风格一致。

import的使用和export一样,也挺复杂,可以在这里大致了解。举几个例子:

import $ from 'jquery';
import * as _ from '_';
import {a,b,c} from './a';
import {default as alias, a as a_a, b, c} from './a';

这里有一些坑,暂时不透露,下面会讲到。

import后面跟上花括号的形式是最基本的用法,花括号里面的变量与export后面的变量一一对应。这里,你必须了解对象的解构赋值的知识,没这知识,你根本没法在这里装逼。了解了解构赋值,这里的“一一对应”的关系就能具体理解了。

as关键字

编程的同学对as都容易理解,简单的说就是取一个别名。export中可以用,import中其实可以用:

// a.js
var a = function() {};
export {a as fun};// b.js
import {fun as a} from './a';
a();

上面这段代码,export的时候,对外提供的接口是fun,它是a.js内部a这个函数的别名,但是在模块外面,认不到a,只能认到fun。

import中的as就很简单,就是你在使用模块里面的方法的时候,给这个方法取一个别名,好在当前的文件里面使用。之所以是这样,是因为有的时候不同的两个模块可能通过相同的接口,比如有一个c.js也通过了fun这个接口:

// c.js
export function fun() {};

如果在b.js中同时使用a和c这两个模块,就必须想办法解决接口重名的问题,as就解决了。

default关键字

其他人写教程什么的,都把default放到export那个部分,我觉得不利于理解。在export的时候,可能会用到default,说白了,它其实是别名的语法糖:

// d.js
export default function() {}// 等效于:
function a() {};
export {a as default};

在import的时候,可以这样用:

import a from './d';// 等效于,或者说就是下面这种写法的简写,是同一个意思
import {default as a} from './d';

这个语法糖的好处就是import的时候,可以省去花括号{}。简单的说,如果import的时候,你发现某个变量没有花括号括起来(没有*号),那么你在脑海中应该把它还原成有花括号的as语法。

所以,下面这种写法你也应该理解了吧:

import $,{each,map} from 'jquery';

import后面第一个${defalut as $}的替代写法。

*符号

*就是代表所有,只用在import中,我们看下两个例子:

import * as _ from '_';

在意义上和import _ from '_';是不同的,虽然实际上后面的使用方法是一样的。它表示的是把'_'模块中的所有接口挂载到_这个对象上,所以可以用_.each调用某个接口。

另外还可以通过*号直接继承某一个模块的接口:

export * from '_';// 等效于:
import * as all from '_';
export all;

*符号尽可能少用,它实际上是使用所有export的接口,但是很有可能你的当前模块并不会用到所有接口,可能仅仅是一个,所以最好的建议是使用花括号,用一个加一个。

该用require还是import?

require的使用非常简单,它相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数……再把require的结果赋值给某个变量,相当于把require和module.exports进行平行空间的位置重叠。

而且require理论上可以运用在代码的任何地方,甚至不需要赋值给某个变量之后再使用,比如:

require('./a')(); // a模块是一个函数,立即执行a模块函数
var data = require('./a').data; // a模块导出的是一个对象
var a = require('./a')[0]; // a模块导出的是一个数组

你在使用时,完全可以忽略模块化这个概念来使用require,仅仅把它当做一个node内置的全局函数,它的参数甚至可以是表达式:

require(process.cwd() + '/a');

但是import则不同,它是编译时的(require是运行时的),它必须放在文件开头,而且使用格式也是确定的,不容置疑。它不会将整个模块运行后赋值给某个变量,而是只选择import的接口进行编译,这样在性能上比require好很多。

从理解上,require是赋值过程,import是解构过程,当然,require也可以将结果解构赋值给一组变量,但是import在遇到default时,和require则完全不同:var $ = require('jquery');import $ from 'jquery'是完全不同的两种概念。

上面完全没有回答“改用require还是import?”这个问题,因为这个问题就目前而言,根本没法回答,因为目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require。这也是为什么在模块导出时使用module.exports,在引入模块时使用import仍然起效,因为本质上,import会被转码为require去执行。

但是,我们要知道这样一个道理,ES7很快也会发布,js引擎们会尽快实现ES6标准的规定,如果一个引擎连标准都实现不了,就会被淘汰,ES6是迟早的事。如果你现在仍然在代码中部署require,那么等到ES6被引擎支持时,你必须升级你的代码,而如果现在开始部署import,那么未来可能只需要做很少的改动。

转载于:https://www.cnblogs.com/zhongchao666/p/9463020.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/388843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux-buff/cache过大导致内存不足-程序异常

2019独角兽企业重金招聘Python工程师标准>>> 问题描述 Linux内存使用量超过阈值&#xff0c;使得Java应用程序无可用内存&#xff0c;最终导致程序崩溃。即使在程序没有挂掉时把程序停掉&#xff0c;系统内存也不会被释放。 找原因的过程 这个问题已经困扰我好几个月…

Android 适配(一)

一、Android适配基础参数1.常见分辨率&#xff08;px&#xff09;oppx 2340x1080oppR15 2280x1080oppor11sp 2160*10801080*1920 (主流屏幕16&#xff1a;9)1080*216018:9 手机主流分辨率&#xff1a; 1080*2160高端 16:9 手机主流分辨率&#xff1a; 1080P (1080*1920) 或 2K …

Source Insight 创建工程(linux-2.6.22.6内核源码)

1. 软件设置 安装完Source Insight&#xff0c;需要对其进行设置添加对“.S”汇编文件的支持&#xff1a; 2. 新建linux-2.6.22.6工程 1&#xff09;选择工程存放的路径&#xff1a; 2&#xff09;下载linux-2.6.22.6内核源码&#xff0c;并解压。在Source Insight中 指定源码的…

课时20:内嵌函数和闭包

目录&#xff1a; 一、global关键字 二、内嵌函数 三、闭包 四、课时20课后习题及答案 ******************** 一、global关键字 ******************** 全局变量的作用域是整个模块&#xff08;整个代码段&#xff09;&#xff0c;也就是代码段内所有的函数内部都可以访问到全局…

盛严谨,严谨,再严谨。_评估员工调查的统计严谨性

盛严谨,严谨,再严谨。The human resources industry relies heavily on a wide range of assessments to support its functions. In fact, to ensure unbiased and fair hiring practices the US department of labor maintains a set of guidelines (Uniform Guidelines) to …

开根号的笔算算法图解_一个数的开根号怎么计算

一个数的开根号怎么计算2020-11-08 15:46:47文/钟诗贺带根号的式子可以直接进行开平方的运算。一些特殊的根号运算有;√2≈1.414、1/2-√3≈0.5-1.732≈-1.232、2√5≈22.236≈4.236、√7-√6≈2.646-2.449≈0.197。开平方的笔算方法1&#xff0e;将被开方数的整数部分从个位起…

arima 预测模型_预测未来:学习使用Arima模型进行预测

arima 预测模型XTS对象 (XTS Objects) If you’re not using XTS objects to perform your forecasting in R, then you are likely missing out! The major benefits that we’ll explore throughout are that these objects are a lot easier to work with when it comes to …

bigquery_在BigQuery中链接多个SQL查询

bigqueryBigquery is a fantastic tool! It lets you do really powerful analytics works all using SQL like syntax.Bigquery是一个很棒的工具&#xff01; 它使您能够使用像语法一样SQL来进行真正强大的分析工作。 But it lacks chaining the SQL queries. We cannot run …

大理石在哪儿 (Where is the Marble?,UVa 10474)

题目描述&#xff1a;算法竞赛入门经典例题5-1 1 #include <iostream>2 #include <algorithm>3 using namespace std;4 int maxn 10000 ;5 int main()6 {7 int n,q,a[maxn] ,k0;8 while(scanf("%d%d",&n,&q)2 && n &&q…

mysql 迁移到tidb_通过从MySQL迁移到TiDB来水平扩展Hive Metastore数据库

mysql 迁移到tidbIndustry: Knowledge Sharing行业&#xff1a;知识共享 Author: Mengyu Hu (Platform Engineer at Zhihu)作者&#xff1a;胡梦瑜(Zhhu的平台工程师) Zhihu which means “Do you know?” in classical Chinese, is the Quora of China: a question-and-ans…

XCode、Objective-C、Cocoa 说的是几样东西

大部分有一点其他平台开发基础的初学者看到XCode&#xff0c;第一感想是磨拳擦掌&#xff0c;看到 Interface Builder之后&#xff0c;第一感想是跃跃欲试&#xff0c;而看到Objective-C的语法&#xff0c;第一感想就变成就望而却步了。好吧&#xff0c;我是在说我自己。 如果…

递归函数基例和链条_链条和叉子

递归函数基例和链条因果推论 (Causal Inference) This is the fifth post on the series we work our way through “Causal Inference In Statistics” a nice Primer co-authored by Judea Pearl himself.这是本系列的第五篇文章&#xff0c;我们通过“因果统计推断”一书进行…

java lock 信号_java各种锁(ReentrantLock,Semaphore,CountDownLatch)的实现原理

先放结论&#xff1a;主要是实现AbstractQueuedSynchronizer中进入和退出函数&#xff0c;控制不同的进入和退出条件&#xff0c;实现适用于各种场景下的锁。JAVA中对于线程的同步提供了多种锁机制&#xff0c;比较著名的有可重入锁ReentrantLock&#xff0c;信号量机制Semapho…

Intent.ACTION_MAIN

1 Intent.ACTION_MAIN String: android.intent.action.MAIN 标识Activity为一个程序的开始。比较常用。 Input:nothing Output:nothing 例如&#xff1a; 1 <activity android:name".Main"android:label"string/app_name">2 <intent-filter…

足球预测_预测足球热

足球预测By Aditya Pethe通过阿蒂亚皮特(Aditya Pethe) From September to January every year, football takes over America. Games dominate TV Sunday and Monday nights, and my brother tears his hair out each week over his consistently underperforming fantasy te…

C#的特性Attribute

一、什么是特性 特性是用于在运行时传递程序中各种元素&#xff08;比如类、方法、结构、枚举、组件等&#xff09;的行为信息的声明性标签&#xff0c;这个标签可以有多个。您可以通过使用特性向程序添加声明性信息。一个声明性标签是通过放置在它所应用的元素前面的方括号&am…

python3中朴素贝叶斯_贝叶斯统计:Python中从零开始的都会都市

python3中朴素贝叶斯你在这里 (You are here) If you’re reading this, odds are: (1) you’re interested in bayesian statistics but (2) you have no idea how Markov Chain Monte Carlo (MCMC) sampling methods work, and (3) you realize that all but the simplest, t…

【转载】移动端布局概念总结

布局准备工作及布局思想及概念: 一个显示器&#xff08;pc端显示器 及 手机屏显示器&#xff09;&#xff0c;既有物理像素&#xff0c;又有独立像素&#xff08;独立像素也叫作css像素&#xff0c;用于前端人员使用&#xff09;&#xff1b; -->重要 首先确定设计稿的尺寸…

深入浅出:HTTP/2

上篇文章深入浅出&#xff1a;5G和HTTP里给自己挖了一根深坑&#xff0c;说是要写一篇关于HTTP/2的文章&#xff0c;今天来还账了。 本文分为以下几个部分&#xff1a; HTTP/2的背景HTTP/2的特点HTTP/2的协议分析HTTP/2的支持 HTTP/2简介 HTTP/2主要是为了解决现HTTP 1.1性能不…

画了个Android

画了个Android 今晚瞎折腾&#xff0c;闲着没事画了个机器人——android&#xff0c;浪费了一个晚上的时间。画这丫还真不容易&#xff0c;为那些坐标&#xff0c;差点砸了键盘&#xff0c;好在最后画出个有模有样的&#xff0c;心稍安。 下面来看看画这么个机器人需要些什么东…