Vue2基础

  • 前端技术了解（了解）
  • ES6常见语法（掌握）
  • Vue入门（掌握）
  • Vue表达式（掌握）
  • Vue指令（掌握）
  • 计算属性与侦听器（了解）

一、前端技术了解（了解）

  1. 前端发展历史

1. 静态页面

1990 html css

2. 异步刷新-操作dom

1995 javascprint

3. 动态页面

Asp/jsp（java）,php等，后台臃肿

4. Ajax成为主流 - jQuery

ajax - jQuery

5.Html5

单页面春天了

6. NodeJs：js运行环境

异步编程风格也深受开发人员的喜爱。Node.js 的出现不仅在于 JavaScript 代码可以在服务器端运行

7. npm：Node包管理器

2010年，npm（node package manager - node包管理器/工具）作为node.js的包管理系统,目前已经是世界最大的包模块管理系统。 NPM相当于java 中的 maven。

JDK、JRE(java开发、运行平台)Nodejs(JS运行平台)
后端服务器开发前端服务器开发
Maven：管理jar包NPM：管理JS库
SSM架构开发项目VUE+ElementUI 前段框架
  1. 主流前端框架

前端框架三巨头：

  • Vue.js：vue.js以轻量易用著称

  • React.js：发展速度最快， 集web前端与app于一身技术

  • AngularJS：AngularJS还是曾今老大

二. ES6常见语法

  1. 概念：ES是ECMAScript的简写，是浏览器脚本语言的规范。JavaScript是ECMAScript的一种实现（VUE是基于ES6的）

  2. 申明变量和常量

  • var：申明变量的方式：函数作用域
  • let：申明变量：块级作用域有效，不能二次申明，和Java申明变量很相似
  • const：定义常量的，无法二次赋值
  1. 解构表达式

概念：解构表达式就是将数组或者对象向变量赋值的一种简易写法，这样做的目的是为了方便取值。

数组解构用[ ]

let arr = ["好","大"];
------------------------------------
console.debug(arr[0],arr[1]);	//以前的取值是这种方式
------------------------------------
let [a,b] = arr;	//解构表达式数组赋值,定义了变量a,b并按照索引赋值。
console.debug(a,b);

对象解构用{ }

var user = {id: 1,username:"zs",age: 11
}
--------------------------------------
console.debug(user.id,user.username,user.age);	//以前的取值
--------------------------------------
var {id,username,age} = user;	//解构表达式，对象赋值，按照属性名赋值。
console.debug(id,username,age);
  1. 箭头函数

概念：箭头函数是函数的一种简写：一般用来做参数传递

语法：

var 函数名 = function(参数列表){   // 原版函数体
}
var 函数名 = (参数列表) => {函数体}等价于一下代码  // 新写法如果参数只有一个可以省略()，但是如果没有参数不能省略
如果函数体只有一句代码可以省略{}，return;除外

例子：

var user = {username:"zs",age:22,show1:function(){	//以前定义方法的方式console.debug(this.username+" "+this.age);},show2(){	//老版本定义方法的简写 - 常用console.debug(this.username+" "+this.age);        },//--------------------------------------show3:()=>{	//es6定义方法的方式//注意：这里的this指的是window对象了。不能用this.usenameconsole.debug(user.username+" "+user.age);        },
}
user.show1();
user.show2();
user.show3();
  1. Promise对象（了解）

概念：Promise是ES6中异步编程的一种解决方案，语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果**（通过axios发送ajax异步请求）**

以前发送异步请求：js：XMLHttpRequest对象（代码量多）jQuery：$.post()/$.ajax() -> 封装了XMLHttpRequest对象
vue框架中推荐使用axios:axios -> promise对象 -> 封装了XMLHttpRequest对象

Promise的三种状态

  • pending：等待中，或者进行中，表示还没有得到结果
  • resolved：已经完成，表示得到了我们想要的结果，可以继续往下执行 就相当于success
  • rejected：也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行
    注意：这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆

例子：

//定义axios对象：模拟axios底层源码
let axios = {get(){const p = new Promise((resolve,reject) => {//以后可以再这里使用ajax发送异步请求const num = Math.random();if(num<0.5){resolve("成功!num:"+num);}else{reject("失败!num:" + num);}});return p;}
}
//调用axios对象发送异步请求：Promise对象中有then和catch方法
axios.get().then(function(msg){console.log(msg);
}).catch(function(msg){console.log(msg);
});

三. VUE入门

概念：Vue是一前端渐进式JS框架（就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用）

特点：

  • 轻量：Vue.js库的体积非常小的，并且不依赖其他基础库

  • 数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便

  • 指令：内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM

  • 插件化：Vue.js核心不包含Router、axios【Promise - ajax】、表单验证等功能，但是可以非常方便地根据需要加载对应插件

  • 组件化，他支持自定义标签：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

  1. MVVM思想

概念：Vue是一款开源的JavaScript MVVM框架，数据模型和视图的双向绑定，只要数据变化，视图会跟着变化，只要视图被修改，数据也会跟着变化（依赖于v-model指令进行绑定）

特征：

  • M ：即Model，模型，包括数据和一些基本操作【js代码】
  • V ：即View，视图，页面渲染结果【页面】
  • VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

注意：1. 只要我们Model发生了改变，View上自然就会表现出来 2. 当用户修改了View，Model中的数据也会跟着改变。

  1. Vue安装
  1. npm init -y 初始化
  2. npm i vue@2.7.14
  1. Vue实例对象详情

3.1. 挂载属性el

概念：每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载（注意：实例上的属性和方法只能够在当前实例挂载的标签中使用。）

<div id="app"><h1>{{message}}</h1>
</div>
<div class="vueClz"><h1>{{message}}</h1>
</div>/* 
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"*/
//id挂载方式：
var app = new Vue({el : "#app",data : {message : "我是id挂载方式"}
});
//class挂载方式：
var app2 = new Vue({el : ".vueClz",data : {message : "我是class挂载方式"}
});

3.2. 模型数据data

概念：Vue实例的数据保存在配置属性data中, data自身也是一个对象。

    <div id="app"><h1>{{ message }}</h1><h1>{{user.name}},今年才:{{user.age}}岁.{{user.color}} <font color="pink">是一个很美丽的颜色</font></br></h1></div><script>//vue的数据绑定在data属性上，data本身也是一个对象var app = new Vue({el: "#app",data: {message: "我是一个很单纯的p",user: {name: "隔壁老王",age: 17,color: "pink"}}});</script>

3.3. 方法定义methods

概念：Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体**（方法都是被Vue对象调用,所以方法中的this代表Vue对象）** 注意：使用json格式来写的

调用方式：

  1. 直接在html模板标签中调用 {{方法名字()}}

    例：{{swim( )}}

  2. 通过Vue对象实例调用方法 vue对象.方法名字( );

    例：app.swim(); // app就是上方div 声明的id

  1. 生命周期钩子函数

概念：每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等，其中每个状态都设置了钩子函数（监听函数）

钩子函数有8个（目前只了解一个mounted）：

mounted函数:页面加载完成之后会自动调用此方法

注意事项：

  • 用普通函数【常规写法或简写写法】，this是指向vue实例
  • 用箭头函数，this指向window对象

四. VUE表达式

  1. 表达式语法

  • VueJS表达式写在双大括号内：{{ expression }}

  • VueJS表达式把数据绑定到 HTML

  • VueJS将在表达式书写的位置"输出"数据

  • VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量

  1. 简单表达式

在{{ }}中可以进行简单的运算：

<div id="app"><!--简单表达式  --><h1>{{num1+num2}}</h1><!-- +:运算，字符串连接 -->     因为是+号，它分辨不出来你是计算还是拼接，就默认拼接<h1>{{5+"v5"}}</h1><h1>{{5+"5"}}</h1><!-- -：减法 --><h1>{{"5"-"5"}}</h1><h1>{{5*5}}</h1><!-- *:乘 --><h1>{{"5"*"5"}}</h1><!-- / 除--><h1>{{5/5}}</h1><h1>{{5/5}}</h1></div>
  1. 三目运算符
<div id="app"><!-- 三目运算 -->{{ show1?"真":"假"}}
</div><script>
var app = new Vue({el : "#app",data : {show1 : true}
});
</script>
  1. 字符串操作
<div id="app">{{"这是字面值"}}<br/>{{"这是字面值".length}}<br/>{{message.length}}<br/>{{message.substring(1,5)}}<br/>{{message.substring(2,6).toUpperCase()}}<br/>
</div><script>
var app = new Vue({el: "#app",data: {message: "这是data中的数据"}
});
</script>
  1. 对象操作
<div id="app">{{user}}<br/>{{JSON.stringify(user)}}<br/>{{user.toUserString()}}<br/>{{user.name}}<br/>{{user.age}}<br/>{{user.getAge()}}<br/>
</div><script>
var user = {name: "张三",age: 29,getAge: function () {return this.age},toUserString:function(){return "姓名:" + this.name + ",年龄:" + this.age;}
};
var app = new Vue({el: "#app",data: {user: user}
});
</script>
  1. 数组操作
<div id="app">{{hobbys}}<br/>{{hobbys[0]}}<br/>{{hobbys.length}}<br/>{{hobbys.toString()}}<br/>{{hobbys.join("------")}}<br/>
</div><script>
var app = new Vue({el: "#app",data: {hobbys:["打游戏","踢足球",'泡MM',"泡GG"]}
});
</script>

五. VUE指令

  1. 什么是指令

概念：指令是一个带有v-前缀的特殊标签属性，指令属性的值预期是单个JavaScript表达式。

  • 当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

  • 一个标签元素上可以出现多个指令属性

  • 指令只能够出现在Vue对象所挂载的标签范围内的标签中

  1. 常见的指令

  • v-text=“表达式”：设置标签中的纯文本，主要是指双标签。与vue表达式效果一样{{ }}

    // 语法：
<标签名 v-text="表达式"></标签名>
// 作用：
通过data中的数据更新标签标签中的textContent属性的值（标签中的文本内容）<div id="app"><span v-text="message"></span><br/><span v-text="user.username"></span><br/>
</div>var app = new Vue({el: "#app",data: {message: "<h1>这是一个Span!</h1>",user: {username: "lw"},}
});// 注意事项： 如果值是html的值，会作为普通的文本使用。标签中的属性值必须是data中的一个属性

  • v-html=“表达式”：设置标签中的html文本，主要是指双标签

    // 语法
<标签名 v-html="表达式"></标签名>
// 作用
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)<div id="app"><div v-html="message"></div>
</div>var app = new Vue({el: "#app",data: {message: "<h1>这是HTMl代码</h1>"}
});// 注意事项:
1. 如果值是html的值,不会作为普通的文本使用,要识别html标签。
2. {{表达式}} 可以插入的标签的内容中
3. v-text和v-html更改标签中的所有内容

  • v-bind=“表达式：绑定属性值 - 简写:src=”"

    // 将data中的数据绑定到标签上,作为标签的属性,为一个标签属性绑定一个值
// 语法:
<标签 v-bind:标签属性名字="表达式"></标签>
// 简写形式:
<标签 :标签属性名字="表达式"></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind="对象"></标签><div id="app"><img v-bind:src="imgsrc" v-bind:title = "title"/><img :src="imgsrc" :title = "title"/><input v-bind="props"/>
</div>var app = new Vue({el: "#app",data: {imgsrc: "./img/1.jpg",title: "二哈!",props :{type: "text",name: "username",}}
});// 注意事项
将一个对象键和值作为标签的属性的名字和值时,  在v-bind后不需要指定属性的名字

  • v-show=“”：是否显示

    // 语法:
<标签名 v-show="表达式"></标签名>
// 作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时,  会在标签的css中添加 display: none :<div id="app"><div v-show="show">你看到我了!</div><div v-show="hidden">你看不到我了!</div><div v-show="score>=90">优秀</div>
</div>var app = new Vue({el: "#app",data: {"show":true,"hidden":true,"score":90,}
});// 注意事项:
- 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
- 标签的值会自动转换为boolean类型的值

  • v-on=“表达式”：注册事件 - 简写@click=“”
    v-if(else else if)=“表达式”：条件判断

    // 语法:
<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
// 简写方式：
<标签 @事件句柄="表达式或者事件处理函数"></标签>// 例1
<div id="app"><h1>结果</h1>{{num}}<h1>表达式的写法</h1><button οnclick=。。。。>按钮</button><br/><h1>事件处理函数</h1><button v-on:click="myclick">按钮</button><br/><button @click="myclick">按钮</button><br/>
</div>var app = new Vue({el: "#app",data: {num:0},methods:{myclick:function(){app.num++;console.log(this);}}
});// 例2
<div id="app">
<button v-on:click="say('hello')">hello</button><br/>
<button @click="say('hi')">hi</button><br/>
</div>var app = new Vue({el: "#app",data: {},methods:{say:function(message){//this指向当前vue对象：appconsole.log(message);//this当前vue对象console.log(this);//获取事件源// 获取触发事件 event// 通过事件获取事件源console.log(event.target);}}
});
// 注意事项：
事件处理函数作为事件句柄的值不需要调用

  • v-if ( else else if )=“表达式”：条件判断

    // 语法:
<标签名 v-if="表达式"></标签名>
// 作用:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
// 注意事项:当表达式中的值是false时, 是从页面上删除.标签的值会自动转换为boolean类型的值<div id="app"><div v-if="show">你看到我了!</div><div v-if="hidden">你看不到我了!</div><div v-if="score>=90">优秀</div>
</div>var app = new Vue({el: "#app",data: {"show":true,"hidden":true,"score":90,}
});

  • v-for=“表达式”：循环

    // 语法:
<标签 v-for="元素 in 数据源"></标签>数据源:  数组,元素:  数组中的一个元素数据源:  对象元素:  对象中的一个属性名<标签 v-for="(元素,索引|键) in 数据源"></标签>当数据源是数组时,  ()的第二个参数值索引当数据源是对象时,  ()的第二个参数值键<标签 v-for="(元素,键,索引) in 对象"></标签>// 作用:
基于数据源多次循环达到多次渲染当前元素<div id="app"><h1>循环数组</h1><ul><li v-for="hobby in hobbys">{{hobby}}</li></ul><h1>遍历对象</h1><ul><li v-for="value in student">{{value}}</li></ul><h1>带索引循环数组</h1><ul><li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li></ul><h1>带键遍历对象</h1><ul><li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li></ul>
</div>var app = new Vue({el: "#app",data: {hobbys : ["爬山","游泳","打豆豆","睡觉"],student : {name: "小毛",age: 29,sex: "男",},num : 10,str : "itsource",}
});

  • v-model=“表达式”：数据双向绑定

    // 语法:
<标签 v-model="表达式"></标签>
在表单控件上创建双向绑定，表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定//  v-model只作用于以下表单:
//  input，select，textarea
<div id="app"><input type="text" v-model="msg"/> {{msg}}<hr/><input value="lq" type="checkbox" v-model="hobbys"/>篮球<input value="zq" type="checkbox" v-model="hobbys"/>足球<input value="ymq" type="checkbox" v-model="hobbys"/>羽毛球<input value="blq" type="checkbox" v-model="hobbys"/>保龄球{{hobbys}}<hr/><input value="1" type="radio" v-model="sex"/>男<input value="0" type="radio" v-model="sex"/>女{{sex}}<hr/><select v-model="country"><option value="zh">中国</option><option value="usa">美国</option><option value="jp">日本</option></select>{{country}}
</div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{msg:"",hobbys:["lq","zq"],sex:1,country:"zh"}});
</script>// 注意事项：- 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.- 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显

六. 计算属性和侦听器

  1. 计算属性computed

原方案：

data:{birthday:1529032123201 // 毫秒值   表达式的内容很长，显得不够优雅，后期维护不方便
}<h1>您的生日是：{{new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()}}
</h1>

新方案：Vue中提供了计算属性，来替代复杂的表达式：

var vm = new Vue({el:"#app",data:{birthday:1429032123201 // 毫秒值},computed:{birth(){// 计算属性本质是一个方法，但是必须返回结果   ----->const d = new Date(this.birthday);return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();}}
})// 页面渲染时，可以把这个方法当成一个变量来使用  就是上面返回的对象  ----->
<div id="app"><h1>您的生日是：{{birth}} </h1>
</div>
  1. 侦听器watch

概念：watch可以让我们监控一个值的变化。从而做出相应的反应。

 <div id="app"><input type="text" v-model="message"></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{message:""},watch:{message(newVal, oldVal){console.log(newVal, oldVal);}}})</script>

总结：

1. 前端发展历史：htmlcss - js - jsp/asp/php - ajax - jQuery - h5[单页面] - nodejs/npm 
2. ES6新语法:声明变量：let和var，const解构表达式：对数组解构[]，对对象解构{}箭头函数：在对象定义函数可以使用箭头函数：()=>{}发送异步请求：axios - Promise - ajax
3. Vue概述：前端js渐进式【js本身比较下，你需要什么插件直接安装】框架vue特点：1.轻量，体积比较20kb 2.vue指令 3.提供了很多插件，安装即用 4.组件-自定义标签
4. Vue入门：1.安装 2.引入 3.div用于挂载 4.newVue实例 5.再使用注意事项：Vue实例属性：el，data，methods，mounted，computed，watch
5. Vue表达式：{{}} ：计算，运算符，字符串操作，数组操作，对象操作
6. Vue指令v-text: 操作存文本 - {{}}v-html: 操作html文本v-bind: 绑定属性值，简写：v-show: 控制元素是否显示v-on: 绑定事件，简写@v-if: 判断v-for: 遍历v-model: 双向绑定 - 绑定value属性值MVVM模式：Model-模型数据vue实例中的数据【data,methods】,view视图页面，View-Model做双向绑定的

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

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

相关文章

小林Coding_操作系统_读书笔记

小林Coding_操作系统_读书笔记

一、硬件结构 1. CPU是如何执行的 冯诺依曼模型&#xff1a;中央处理器&#xff08;CPU&#xff09;、内存、输入设备、输出设备、总线 CPU中&#xff1a;寄存器&#xff08;程序计数器、通用暂存器、指令暂存器&#xff09;&#xff0c;控制单元&#xff08;控制CPU工作&am…
阅读更多...
[word] word页面视图放大后，影响打印吗？ #笔记#学习方法

[word] word页面视图放大后，影响打印吗？ #笔记#学习方法

word页面视图放大后&#xff0c;影响打印吗&#xff1f; word文档的页面视图又叫普通视图&#xff0c;又叫打印视图&#xff0c;是系统默认的视图&#xff0c;是用户用的最多最常见的视图。 问&#xff1a;怎样打开页面视图&#xff1f; 答&#xff1a;两种方法 方法一、点…
阅读更多...
JS 基本语句

JS 基本语句

函数调用&#xff0c;分支&#xff0c;循环&#xff0c;语句示例。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&g…
阅读更多...
【Funny guys】龙年专属测试鼠标寿命小游戏...... 用Python给大家半年了......

【Funny guys】龙年专属测试鼠标寿命小游戏...... 用Python给大家半年了......

目录 【Funny guys】龙年专属测试鼠标寿命小游戏...... 用Python给大家半年了...... 龙年专属测试鼠标寿命小游戏用Python给大家半年了贪吃龙游戏 文章所属专区 码农新闻 欢迎各位编程大佬&#xff0c;技术达人&#xff0c;以及对编程充满热情的朋友们&#xff0c;来到我们的程…
阅读更多...
【项目实践03】【布隆过滤器】

【项目实践03】【布隆过滤器】

文章目录 一、前言二、项目背景三、实现方案1. 谷歌 布隆过滤器2. Redis 布隆过滤器 四、思路延伸1. 布隆过滤器的实现原理2. 布隆过滤器的一些扩展3. 布谷鸟过滤器 五、参考内容 一、前言 本系列用来记录一些在实际项目中的小东西&#xff0c;并记录在过程中想到一些小东西&a…
阅读更多...
基于python+控制台的车辆信息管理系统

基于python+控制台的车辆信息管理系统

基于python控制台的车辆信息管理系统 一、系统介绍二、效果展示三、其他系统实现四、获取源码 一、系统介绍 打印功能菜单、添加车辆信息、删除车辆信息、修改车辆信息、显示车辆信息、退出系统&#xff0c;并且需要接收用户的输入&#xff0c;在根据输入内容调用相应函数实现…
阅读更多...
Docker部署Grafana+Promethus监控Mysql和服务器

Docker部署Grafana+Promethus监控Mysql和服务器

一、Grafana部署所需资源 Grafana 需要最少的系统资源&#xff1a; 建议的最小内存&#xff1a;512 MB建议的最低 CPU&#xff1a;1 官方文档&#xff1a;https://grafana.com/docs/grafana/latest/getting-started/build-first-dashboard/ 可以看到&#xff0c;我的这台服务…
阅读更多...
有了Future为什么还要CompletableFuture?

有了Future为什么还要CompletableFuture?

文章目录 Future 接口理论知识复习Future 接口概述场景描述小结 Future 接口常用实现类 FutureTask 异步任务Future 的作用Futrue 编码测试优缺点分析优点缺点小结 面对一些复杂的任务对于简单的业务场景使用 Future 接口完全 OK回调通知创建异步任务多个任务前后依赖可以组合对…
阅读更多...
PaddleDetection学习4——使用Paddle-Lite和OpencCV在 Android 上实现实时的人脸检测（java）

PaddleDetection学习4——使用Paddle-Lite和OpencCV在 Android 上实现实时的人脸检测（java）

使用Paddle-Lite在 Android 上实现人脸检测 1 环境准备2. 部署步骤2.1 下载PaddleLite-android-demo2.2 运行face_detection_demo项目3 导入OpenCV进行优化3.1 Android Studio配置OpenCV3.2 预处理代码3.3 后处理代码3.4 优化结果1 环境准备 参考前一篇在 Android 上使用Paddl…
阅读更多...
DFS——连通性和搜索顺序

DFS——连通性和搜索顺序

dfs的搜索是基于栈&#xff0c;但一般可以用用递归实现&#xff0c;实际上用的是系统栈。有内部搜索和外部搜索两种&#xff0c;内部搜索是在图的内部&#xff0c;内部搜索一般基于连通性&#xff0c;从一个点转移到另一个点&#xff0c;或者判断是否连通之类的问题&#xff0c…
阅读更多...
[Python] opencv - 什么是直方图？如何绘制图像的直方图？

[Python] opencv - 什么是直方图？如何绘制图像的直方图？

什么是直方图&#xff1f; 直方图是一种统计图&#xff0c;用于展示数据的分布情况。它将数据按照一定的区间或者组进行划分&#xff0c;然后计算在每个区间或组内的数据频数或频率&#xff08;即数据出现的次数或占比&#xff09;&#xff0c;然后用矩形或者柱形图的形式将这…
阅读更多...
C++学习Day03之构造函数和析构函数

C++学习Day03之构造函数和析构函数

目录 一、程序及输出1.1 构造函数1.2 析构函数1.3 构造和析构必须要声明在全局作用域 二、分析与总结 一、程序及输出 1.1 构造函数 构造函数 没有返回值 不用写void 函数名 与 类名相同 可以有参数 &#xff0c;可以发生重载 构造函数 由编译器自动调用一次 无须手动调用 创建…
阅读更多...
C语言——Q/编译和链接

C语言——Q/编译和链接

目录 一、翻译环境和运⾏环境 二、翻译环境 1、预处理&#xff08;预编译&#xff09; 2、编译 2.2.1 词法分析&#xff1a; 2.2.2 语法分析 2.2.3 语义分析 3、汇编 4、链接 三、运行环境 一、翻译环境和运行环境 在ANSI C 的任何⼀种实现中&#xff0c;存在两个不…
阅读更多...
CentOS7局域网内搭建本地yum源

CentOS7局域网内搭建本地yum源

CentOS7.6 局域网内搭建本地yum源 一、背景 客户机房服务器无法直连公网&#xff0c;远程通过堡垒机部署环境&#xff0c;因为机器比较多&#xff0c;最终选择通过安装自定义yum源进行部署。以下为自己部署yum源过程&#xff0c;以备后续使用。 二、准备yum源Packages 网上…
阅读更多...
【刷题题解】最长回文子序列

【刷题题解】最长回文子序列

给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列 这道题&#xff0c;一眼动态规划&#xff0c;但是即使动起来也规划…
阅读更多...
突破编程_C++_面试（基础知识（5））

突破编程_C++_面试（基础知识（5））

面试题9&#xff1a;什么是内存地址 内存地址是指计算机内存中存储变量或对象的地址。内存空间大小就是寻址能力&#xff0c;即能访问到多少个地址&#xff0c;比如 32 位机器内存空间大小就是 2^32 4294967296&#xff0c;也就是 4 GB 。每个变量或对象在内存中都有一个唯一…
阅读更多...
python_蓝桥杯刷题记录_笔记_全AC代码_入门3

python_蓝桥杯刷题记录_笔记_全AC代码_入门3

前言 记录我的解法以及笔记思路&#xff0c;谢谢观看。 题单目录 1.P2141 [NOIP2014 普及组] 珠心算测验 2.P1567 统计天数 3.P1055 [NOIP2008 普及组] ISBN 号码 4.P1200 [USACO1.1] 你的飞碟在这儿 Your Ride Is Here 5.P1308 [NOIP2011 普及组] 统计单词数 6.P1047 […
阅读更多...
2024.2.3日总结（animate.css）

2024.2.3日总结（animate.css）

animate.css animate.css是一个动画库&#xff0c;可以方便快速的制作出常见的动画效果&#xff0c;很适合强调&#xff0c;主页&#xff0c;滑块和注意力引导提示。 它预设了弹跳&#xff08;bounce&#xff09;&#xff0c;摇摆&#xff08;swing&#xff09;&#xff0c;颤…
阅读更多...
CF1538 补题报告

CF1538 补题报告

CF1538补题报告&#xff08;A.B.C.D.F.G.&#xff09; Codeforces Round 725 (Div. 3) A. Stone Game A. 石头游戏 题意 给定一个序列&#xff0c;每次只能删除最左边或最右边的元素&#xff0c;求出删除最大和最小值需要多少次删除操作。 思路 找到最大值和最小值所在的…
阅读更多...
C#创建lnk快捷方式

C#创建lnk快捷方式

1&#xff0c;引用Com组件:Windows Script Host Object Model。 2&#xff0c;获取开始目录路径、桌面路径&#xff0c;并创建相应文件夹。 //获取当前开始目录,桌面//当前值为:C:\Users\admin\AppData\Roaming\Microsoft\Windows\Start Menu//实际需要的路径是:C:\Users\adm…
阅读更多...
最新文章

Copyright @ 2022~2023