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，一经查实，立即删除！

相关文章

工程师、产品经理、数据工程师是如何一起工作的？

工程师、产品经理、数据工程师是如何一起工作的？

做为一名工程师&#xff0c;免不了与产品经理打交道&#xff0c;如果公司大一些&#xff0c;数据量多一些&#xff0c;还会有数据工程师这个角色。今天会和你主要聊一聊在工作中&#xff0c;产品经理和数据工程师在哪些方面对我们工程师的帮助最大&#xff0c;以及我从他们身上…
阅读更多...
linux-buff/cache过大导致内存不足-程序异常

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

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

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内核源码）

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：内嵌函数和闭包

课时20：内嵌函数和闭包

目录&#xff1a; 一、global关键字 二、内嵌函数 三、闭包 四、课时20课后习题及答案 ******************** 一、global关键字 ******************** 全局变量的作用域是整个模块&#xff08;整个代码段&#xff09;&#xff0c;也就是代码段内所有的函数内部都可以访问到全局…
阅读更多...
从零开始学产品第六篇：更强大的测试，自动化测试和性能测试

从零开始学产品第六篇：更强大的测试，自动化测试和性能测试

本篇为【从零开始学产品】系列课第1章第5节欢迎到公众号菜单栏&#xff0c;获取产品经理课程更多资料 “测试就是拿点鼠标在电脑上瞎点&#xff0c;或者是用手机随便戳几下么&#xff1f;” “不&#xff0c;是有计划有意图的测试&#xff0c;比如说&#xff0c;边界测试&#…
阅读更多...
Get 了滤镜、动画、AR 特效，速来炫出你的短视频开发特技！

Get 了滤镜、动画、AR 特效，速来炫出你的短视频开发特技！

在滤镜美颜、搞怪特效、炫酷场景等各种新奇玩法驱动下&#xff0c;短视频开始让人上瘾。 12 月 3 日&#xff0c;七牛云联合八大短视频特效平台共同推出了中国短视频开发者创意大赛&#xff08;China Short Video Contest&#xff09;&#xff0c;面向全国邀请广大开发者&#…
阅读更多...
匿名函数、冒泡排序，二分法， 递归

匿名函数、冒泡排序，二分法， 递归

匿名函数 lambda 匿名函数 格式 lambda 参数&#xff1a;返回值 函数名统一叫lambda&#xff0c;最多只能写一行普通的正常的函数 def func(n):return n * n lambda匿名函数写法 a lambda n : n**2 print(a(3)) 当有多个返回值时suiyi lambda x, y : (1, 2) # 笔试题 …
阅读更多...
Redis源码剖析

Redis源码剖析

Redis源码剖析和注释&#xff08;一&#xff09;---链表结构 Redis源码剖析和注释&#xff08;二&#xff09;--- 简单动态字符串 Redis源码剖析和注释&#xff08;三&#xff09;--- Redis 字典结构 Redis源码剖析和注释&#xff08;四&#xff09;--- 跳跃表(skiplist) Redis…
阅读更多...
Android Activity生命周期

Android Activity生命周期

Android生命周期 Android的生命周期&#xff1a;onCreate() -> onStart() -> onResume() -> onPause() -> onStop() -> onDestroy() 如下图所示&#xff1a; 1.当activity启动时系统会先调用onCreate(),然后调用onStart(),最后调用**onResume()**方法&#xff0…
阅读更多...
date数据存入mysql_Date对象存入mysql数据库

date数据存入mysql_Date对象存入mysql数据库

java.sql.Date,java.sql.Time和java.sql.Timestamp三个都是java.util.Date的子类(包装类)。java.sql.Date是java.util.Date的子类&#xff0c;是一个包装了毫秒值的瘦包装器&#xff0c;允许 JDBC 将毫秒值标识为 SQL DATE 值。毫秒值表示自 1970 年 1 月 1 日 00:00:00 GMT 以…
阅读更多...
盛严谨,严谨,再严谨。_评估员工调查的统计严谨性

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

盛严谨,严谨,再严谨。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 …
阅读更多...
复权就是对股价和成交量进行权息修

复权就是对股价和成交量进行权息修

* 所谓复权就是对股价和成交量进行权息修复,按照股票的实际涨跌绘制股价走势图, * 并把成交量调整为相同的股本口径。股票除权、除息之后&#xff0c;股价随之产生了变化&#xff0c; * 但实际成本并没有变化。 * 如&#xff1a;原来20元的股票&#xff0c;十送十之…
阅读更多...
前端校验和后端校验

前端校验和后端校验

问&#xff1a;到底是前端校验好还是后端校验好呢&#xff1f; 答&#xff1a;后端校验比前端校验更安全&#xff0c;更可靠&#xff0c;前端校验可以增加用户体验&#xff0c;一般来说&#xff0c;在前端校验的东西在后端也必须校验&#xff08;比如登陆用户名、密码&#xff…
阅读更多...
[MySQL] INFORMATION_SCHEMA 数据库包含所有表的字段

[MySQL] INFORMATION_SCHEMA 数据库包含所有表的字段

sql注入后可以通过该数据库获取所有表的字段信息1. COLLATIONS表 提供有关每个字符集的排序规则的信息。 COLLATIONS表包含以下列&#xff1a;COLLATION_NAME 排序规则名称。 CHARACTER_SET_NAME 与排序规则关联的字符集的名称。 ID 排序规则ID。 IS_DEFAULT 排序规则是否为其字…
阅读更多...
开根号的笔算算法图解_一个数的开根号怎么计算

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

一个数的开根号怎么计算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 预测模型_预测未来：学习使用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 …
阅读更多...
net程序员的iPhone开发-MonoTouch

net程序员的iPhone开发-MonoTouch

net程序员的iPhone开发-MonoTouch iPhone软件的Native开发除了使用Apple推荐的Objective-C Cocoa之外&#xff0c;也有其他的一些工具和SDK提供 基于WEB的形式的一些框架在下面这个文章介绍过 各种SmartPhone上的跨平台开源框架的总结 http://www.cnblogs.com/2018/archive/20…
阅读更多...
ASP防止SQL注入

ASP防止SQL注入

防止SQL注入http://0.0.0.0/bzhs/login.asp?logTypeedit;WAITFOR DELAY 0:0:5 --logType Replace(Replace(Replace(Replace(logType,"-",""),"",""),"&",""),";","")fcdm Replace(Rep…
阅读更多...
protobuf java 生成_protobuf代码生成

protobuf java 生成_protobuf代码生成

windows :1,两个文件&#xff1a;proto.exe, protobuf-java-2.4.1.jar2,建立一个工程TestPb&#xff0c;在下面建立一个proto文件件&#xff0c;用来存放【。proto】文件3&#xff0c;将proto,exe放在工程下&#xff0c;4&#xff0c;建立一个msg.proto文件&#xff1a;option …
阅读更多...
最新文章

Copyright @ 2022~2023