前端框架---Vue2学习教程（上）

从HTML到现在一路跟过来的小伙伴们，坚持固然不容易，但我相信大家已经学到了不少，那么我们开始马不停蹄的进入前端的框架吧，下面讲的是Vue2，大家继续加油鸭！！！！

Vue2

Vue2官方文档地址，喜欢阅读文档的小伙伴可以点击进入官网。

1、Vue2 简介

Vue是什么？
官网的Vue的解释如下：
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的两个特性：

1、数据驱动视图

  • 数据的变化会驱动视图自动更新
  • 好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来

2、双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据

  • js数据变化，会被自动渲染到页面上
  • 页面上表单采集的数据发生变化，会被vue自动获取到，并更新到js数据中

注意：数据驱动视图和双向数据绑定的底层原理是MVVM（Model数据源、View视图、ViewModel就是vue的实例）

学了JS的小伙伴应该都知道，有很多操作都是基于DOM元素进行的，需要获取DOM元素，Vue则不需要获取DOM元素就可以对DOM元素进行操作，下面我们就进入Vue的正式学习吧！

1.1、Vue Devtools

在使用 Vue 时，推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
在这里插入图片描述

1.2、安装引入Vue2

命令行运行
npm install vue@^2

或者引入Vue2

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2、插值表达式

插值表达式 {{ }} 是一种Vue的模版语法

作用：利用表达式进行插值，渲染到页面中

​ 语法:{{表达式}}

​ 注意点：(1) 使用的数据必须存在

​ (2)支持的是表达式，而非语句

​ (3)不能在标签属性中使用{{}}插值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!--构建用户界面 基于数据渲染页面--><!-- 2 准备dom --><div id="app">{{ info}}-{{arr}}</div></body><!-- 1 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 3 创建vue实例new Vue({// 元素el: '#app',// 数据data: {info: 'hello vue',arr: [1, 2, 3],},})</script>
</html>

data中的数据最终会被添加到实例上

① 访问数据：“实例.属性名”

② 修改数据：“实例.属性名” = “值”

3、Vue指令

Vue 会根据不同的指令，针对标签实现不同的功能
指令：带有 v-前缀 的特殊标签属性， 不同的指令，完成不同的功能

3.1、v-if、v-else、v-else-if

v-if 作用：控制元素显示隐藏（条件渲染）

语法：v-if = “表达式” 表达式值true显示，false隐藏

v-else、v-else-if 作用：辅助v-if进行判断渲染

语法：v-else v-else-if = “表达式”

注意：需要紧挨着 v-if 一起使用

原理：基于条件判断，是否创建或移除元素节点

场景：要么显示，要么隐藏，不频繁切换的场景

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><p v-if="score > 90">A</p><p v-else-if="score >=80">B</p><p v-else="score >60">C</p></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>new Vue({el: '#app',data: {},})</script>
</html>

浏览器页面只显示了一个A
在这里插入图片描述控制台查看元素，只创建了一个满足条件的p元素
在这里插入图片描述

3.2 v-show

作用：控制元素显示隐藏

语法：v-show = “表达式” 表达式值true显示，false隐藏

原理：切换 display：none / block控制显示隐藏

场景：频繁切换显示隐藏的场景

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><div v-show="5  ==  3">456</div><div v-show="5  ==  5">654</div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>new Vue({el: '#app',},})</script>
</html>

浏览器页面只显示了654
在这里插入图片描述浏览器控制台查看元素，发现两个div都存在，只是具有不同的样式
在这里插入图片描述这里就可以看出来，v-if与v-show都可以控住元素的显示和不显示，但是也存在区别：
v-if控制元素显示与隐藏，通过js创建dom元素或删除元素
v-show通过css的display显示与隐藏

区分：频繁切换元素显示与隐藏用v-show,其余可以用v-if

3.3、 v-on

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：

① v-on：事件名 = “内联语句” => 简写： @事件名 = "内联语句 "

② v-on：事件名=“methods中的函数名” => 简写： @事件名 = “methods中的函数名”

​ 调用函数时不传递参数，事件对象（$event）就是默认的第一个形参

​ v-on 调用参数，当涉及到参数传递时 ，改写为 事件名 = “methods中的函数名（参数1，参数2）”

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 2 准备dom --><div id="app"><p>{{ num }}</p><button v-on:click="num++">+1</button><button @click="num--">-1</button><button @click="fn">按钮</button><button @click="fn2(10,$event)">按钮2</button></div></body><!-- 1 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 3 创建vue实例new Vue({// 元素el: '#app',// 数据data: {num: 0,},// 方法methods: {//  fn: function() {}fn(e) {// 调用方法不传递任何参数，默认第一个形参就是事件对象console.log(e)console.log(this) // 指向vue实例this.num += 10console.log('按钮被点击')// TODO},fn2(x, e) {// 传递参数，实参通过$event console.log(x, e)},},})</script>
</html>

3.4、v-for

作用：基于数组循环，多次渲染整个元素

遍历数组语法：v-for = “(item,index) in 数组“

​ item 表示每一项 index 表示下标

​ 当参数只有一个时，可以省略括号

v-for 中的 key

语法：key属性 = “唯一标识”

key的作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 2 准备dom --><div id="app"><a href="https://www.baidu.com">百度</a><a v-bind:href="link">京东</a><a :href="link" :x="10" y="20">京东</a><ul><li v-for="(item, index) in arr" :key="item.id">{{index}}-{{ item.bookName }}</li></ul><ul><li v-for="i in 8">{{i}}</li></ul></div></body><!-- 1 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 3 创建vue实例new Vue({// 元素el: '#app',// 数据data: {link: 'http://www.jd.com',arr: [{id: 1,bookName: '活法',author: '稻盛和夫',},{id: 2,bookName: '羊脂球',author: 'somebody',},{id: 3,bookName: '钢铁如何炼成的',author: 'somebody',},],}})</script>
</html>

在这里插入图片描述

注意点：1.key的值只能是字符串或数字类型

​ 2.key的值必须具有唯一性

​ 3.推荐使用id作为key的唯一值，不推荐使用index作为key

4.v-for 不建议与 v-if 一起使用，v-for优先级更高，消耗性能

3.5、 v-bind

作用：动态的设置html的标签属性 -> src、url、title ……

语法：v-bind：属性名 = “表达式” —> 简写 ：属性名 = “表达式”

对于样式控制的增强

(1)、操作class

​ 语法：:class = “对象/数组”

​ ①对象 --> 键就是类名，值是布尔值。如果值是true，有这个类，否则没有这个类

<div class='box' :class='{类名1:布尔值,类名2:布尔值}'></div>

​ ②数组 --> 数组中所有的类，都会添加到盒子上，本质就是一个class列表

<div class='box' :class='[类名1，类名2，类名3]'></div>

(2)、操作style

​ 语法：:style = ‘样式对象’

<div class='box' :style='{css属性名1: css属性值,css属性名2: css属性值}'></div>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.theme {background-color: black;}.box {font-size: 30px;font-weight: 700;}.active {border: 2px dashed pink;}</style></head><body><!-- 2 准备dom --><div id="app"><divclass="box"style="width: 100px; height: 100px; background-color: red"></div><!-- 1 行内式 :style="样式对象" --><div:style="{width:'100px',height:'100px', backgroundColor: 'blue'}"></div><!-- 2 :class="['类名','类名']" --><div class="box" :class="[activeClass]" :style="styleObj">div</div><div class="box" :class="['active']" :style="styleObj">div</div><div class="box" :class="activeClass" :style="styleObj">div</div><div class="box" :class="'active'" :style="styleObj">div</div><div :class="['box', activeClass]" :style="styleObj">div1111</div><!-- <div class="box active" :style="styleObj">div</div> --><div>-----------------</div><!-- 3 :class="{类名1: 布尔值,类名2:布尔值}" --><div :class="{active: false}">div</div><div :class="{theme: bool}">div区域</div></div></body><!-- 1 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 3 创建vue实例new Vue({// 元素el: '#app',// 数据data: {info: 'hello vue',arr: [1, 2, 3],// 样式对象styleObj: {width: '200px',height: '200px',backgroundColor: 'red',},activeClass: 'active',bool: true,},})</script>
</html>

3.6、v-on

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：

① v-on：事件名 = “内联语句” => 简写： @事件名 = "内联语句 "

② v-on：事件名=“methods中的函数名” => 简写： @事件名 = “methods中的函数名”

​ 调用函数时不传递参数，事件对象（$event）就是默认的第一个形参

​ v-on 调用参数，当涉及到参数传递时 ，改写为 事件名 = “methods中的函数名（参数1，参数2）”

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 2 准备dom --><div id="app"><p>{{ num }}</p><button v-on:click="num++">+1</button><button @click="num--">-1</button><button @click="fn">按钮</button><button @click="fn2(10,$event)">按钮2</button></div></body><!-- 1 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 3 创建vue实例new Vue({// 元素el: '#app',// 数据data: {num: 0,},// 方法methods: {//  fn: function() {}fn(e) {// 调用方法不传递任何参数，默认第一个形参就是事件对象console.log(e)console.log(this) // 指向vue实例this.num += 10console.log('按钮被点击')// TODO},fn2(x, e) {// 传递参数，实参通过$event console.log(x, e)},},})</script>
</html>

3.7、v-model

作用：给表单元素使用，双向数据绑定 —> 可以快速获取或设置表单元素内容

​ 数据变化 —> 视图自己更新

​ 视图变化 —> 数据自动更新

语法：v-model = “变量”

原理： v-model本质上是一个语法。例如应用在输入框上，就是 value属性和input事件的和写。

<template><div id='app'><input v-model='msg' type='text'><input :value='msg' @input='msg = $event.target.value' type='text'></div>
</template>

注意：$event用于在模版中，获取事件的形参

应用于其他表单元素

v-model会根据控件类型自动选取正确的方法来更新元素

输入框 input:text -----> :value + @input

文本域 textarea -----> :value + @input

复选框 -----> :checked + @change

单选框 -----> :checked + @change

下拉菜单 -----> :value + @change

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!--v-model 双向绑定 用于表单元素--><div id="app">用户名 <input type="text" v-model="username" /> 密码<input type="text" v-model="pwd" /><!--v-model="数据" 等价于 :value="数据" + @input="数据=$event.target.value"--><input type="text" :value="username" @input="fn" /><input type="checkbox" name="" id="" v-model="checked" /><!-- <inputtype="checkbox"name=""id="":checked="checked"@change="checked = $event.target.checked"/> --><button @click="login">登录</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>new Vue({el: '#app',data: {username: 'zs',pwd: '',checked: true,},methods: {fn(e) {this.username = e.target.value},login() {console.log(this.username, this.pwd)},},})</script></body>
</html>

3.8、指令修饰符

通过 “.” 指明一些指令后缀，不同后缀封装了不同的处理操作 --> 简化代码

① 按键修饰符

​ @keyup.enter ----> 键盘回车监听

​ @keyup.esc -------> 键盘esc监听

② v-model修饰符

​ v-model.trim ----> 去除首位空格

​ v-model.number ------> 转数字

​ v-model.lazy ------------> 失去焦点，才收集数据

③ 事件修饰符

​ @事件名.stop —> 阻止冒泡

​ @事件名.prevent ----> 阻止默认行为

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- 按键修饰符.enter 只有按下Enter才触发 --><input type="text" @keyup.enter="fn" /><!-- 指令修饰符 .trim 去掉首尾空格 .number转数字 --><input type="text" v-model.trim="username" /><input type="text" v-model.number="age" /><!-- 事件修饰符 .stop阻止冒泡--><div @click="fa"><div @click.stop="son">son</div><a href="https://www.baidu.com" @click.stop.prevent="handleClick">百度</a></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>new Vue({el: '#app',data: {username: '',age: 0,},methods: {fn(e) {console.log(e)console.log('ok')},fa() {console.log('father')},son() {console.log('son')},handleClick() {alert('6666')},},})</script></body>
</html>

4、计算属性 computed

概念：基于现有的数据，计算出来的新属性。

优势：依赖的数据变化，才自动重新计算；计算属性，自带缓存效果

语法：①声明在 computed 配置项中，一个计算属性对应函数

​ ②使用起来和普通属性一样使用 {{计算属性名}}

computed:{计算属性名(){基于现有的数据，编写求值逻辑return 结果}
}

计算属性完整写法

计算属性默认简写，只能访问，不能修改

如果要修改，需要写计算属性的完整写法

computed:{计算属性名:{get(){一段代码逻辑（计算逻辑）return 结果}set(修改的值){一段代码逻辑（修改逻辑）}}
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 2 准备dom --><div id="app"><p>计算属性 {{ avegeScore }}</p><p>计算属性 {{ avegeScore }}</p><p>计算属性 {{ avegeScore }}</p><p>方法 {{ avegeScore2() }}</p><p>方法 {{ avegeScore2() }}</p><p>方法 {{ avegeScore2() }}</p><button @click="avegeScore  = 100">按钮</button></div></body><!-- 1 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 3 创建vue实例new Vue({// 元素el: '#app',// 数据data: {v: 0,arr: [{id: 1,name: 'zs',score: 80,},{id: 2,name: 'ls',score: 85,},{id: 3,name: 'wangwu',score: 78,},],},// 计算属性-本质是一个函数computed: {// 不能与data中数据同名// arr() {//   return 1// },/* avegeScore() {console.log('computed')const sum = this.arr.reduce((current, next) => {return current + next.score}, 0)return (sum / this.arr.length).toFixed(2)}, */// 计算属性完整用法// avegeScore: {//  设置值走set//   set(newV) {//     this.v = newV//   },//   使用计算属性走get//   get() {//     // const sum = this.arr.reduce((current, next) => {//     //   return current + next.score//     // }, 0)//     // return (sum / this.arr.length).toFixed(2)//     return this.v//   },// },},methods: {avegeScore2() {console.log('methods')const sum = this.arr.reduce((current, next) => {return current + next.score}, 0)return (sum / this.arr.length).toFixed(2)},},})</script>
</html>

computed 计算属性 VS methods 方法

(1)、computed 计算属性：

作用：封装了一段对于数据的处理，求得一个结果。

语法：写在computed配置项中；作为属性，直接使用 ----> this.计算属性 {{ 计算属性 }}

缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变了，会自动重新计算 —> 并再次缓存

(2)、methods 方法：

作用：给实例提供一个方法，调用以处理业务逻辑

语法：写在methods配置中；作为方法，需要调用 --> this.方法名() {{ 方法名() }} @事件名=‘方法名’

5、侦听器 watch

作用：监视数据变化，执行一些业务逻辑 或 异步操作

语法：

① 简单写法 --> 简单类型数据，直接监视

watch:{数据属性名(newValue,oldvalue){一些业务逻辑 或 异步操作}，'对象.属性名'(newValue,oldValue){一些业务逻辑 或 异步操作}
}

② 完整写法 --> 添加额外配置项

​ （1）deep：true , 对复杂类型深度监视

​ （2）immediate：true , 初始化立刻执行一次handler方法

watch:{数据属性名:{deep:true,immediate:true,handler(newValue){一些业务逻辑 或 异步操作}}	
}

watch的应用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="watch-example"><p>Ask a yes/no question:<input v-model="question" /></p><p>{{ answer }}</p></div><!-- 1 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script><script>new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!',},watch: {question() {this.fn()},},// 生命周期钩子函数 vue应用执行的时候自动帮我们调用created() {this.fn = _.debounce(this.getAnswer, 500)},methods: {async getAnswer() {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'// 发请求const {data: { answer },} = await axios.get('https://yesno.wtf/api')this.answer = answer},},})</script></body>
</html>

后面我们接着讲Vue的生命周期以及后面的内容！！！

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

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

相关文章

Springboot使用数据库连接池druid

Springboot使用数据库连接池druid

springboot框架中可以使用druid进行数据库连接池&#xff0c;下面介绍druid在springboot中使用和参数配置介绍。 数据库连接池&#xff08;Druid&#xff09;是一种用于管理数据库连接的机制&#xff0c;其工作原理和常见使用方法如下&#xff1a; 原理&#xff1a;数据库连接…
阅读更多...
awk命令使用方法

awk命令使用方法

简介 awk 是一种强大的文本处理工具&#xff0c;可以用于处理结构化的文本数据。它可以根据指定的模式和动作来筛选、处理和格式化文本。 下面是一些常见的 awk 命令使用方法。 详细介绍 基本语法&#xff1a; awk pattern { action } filename其中&#xff0c;pattern 是用…
阅读更多...
短视频界的变革者：上海 AI lab 发布 Vlogger，几句话生成分钟级视频

短视频界的变革者：上海 AI lab 发布 Vlogger，几句话生成分钟级视频

现如今&#xff0c;vlog 已经成为我们日常生活的重要组成部分。无论是看视频学习休闲、记录珍贵瞬间还是分享生活见闻&#xff0c;视频已经成为人们表达创意和观点的独特媒介。 然而&#xff0c;与几秒钟的短视频不同&#xff0c;要创作出引人入胜、生动有趣的长视频&#xff…
阅读更多...
微信积分系统怎么做_开启用户忠诚度之门

微信积分系统怎么做_开启用户忠诚度之门

积分系统&#xff1a;开启用户忠诚度之门 在数字化时代&#xff0c;积分系统已经成为了企业与消费者之间互动的桥梁。它不仅是一种奖励机制&#xff0c;更是提升用户忠诚度、促进消费的重要手段。本文将深入探讨如何将积分系统作为主题&#xff0c;撰写一篇高质量的营销软文&a…
阅读更多...
数据结构--顺序表的基本操作[王道]

数据结构--顺序表的基本操作[王道]

截图来自王道数据结构公开课 目录 1.插入操作 代码 时间复杂度分析 2.删除操作 代码 时间复杂度分析 3.按值寻找(顺序查找) 代码 时间复杂度 4.按位寻找(按序号查找) 代码 快速回顾顺序表的定义以及特点&#xff1a;数据结构-顺序表的实现 [王道]-CSDN博客 本篇博…
阅读更多...
二、防御保护---防火墙基础知识篇

二、防御保护---防火墙基础知识篇

二、防御保护---防火墙基础知识篇 一、什么是防火墙二、防火墙的发展史1.包过滤防火墙(一个严格的规则表)2.应用代理防火墙(每个应用添加代理)3.状态检测防火墙(首次检查建立会话表)3.入侵检测系统(IDS)-----网络摄像头4.入侵防御系统(IPS)-----抵御2-7层已知威胁5.防病毒网关(…
阅读更多...
Unity中使用Ultraleap的InteractionButton组件

Unity中使用Ultraleap的InteractionButton组件

本节在上一节基础上进行&#xff0c;上一小结参考如下&#xff1a; Unity中创建Ultraleap 3Di交互项目 本节工程文件如下&#xff1a; Unity中使用Ultraleap的InteractionButton组件 本节结构有所更改&#xff0c;主要是参考官方示例结构进行重新调整&#xff0c;和上一小节相…
阅读更多...
wordpress找不回密码怎么办？4种方法设置新密码

wordpress找不回密码怎么办？4种方法设置新密码

有些WordPress站长太久不登录后台了&#xff0c;所以就忘记了管理员登录密码&#xff0c;这种情况我们应该怎么找回密码呢&#xff1f;或者设置一个新密码呢&#xff1f;下面boke112百科就跟大家分享4种方法设置WordPress新密码。 方法一、登录页面的“忘记密码&#xff1f;”…
阅读更多...
Shell中正则表达式

Shell中正则表达式

1.正则表达式介绍 1、正则表达式---通常用于判断语句中&#xff0c;用来检查某一字符串是否满足某一格式 2、正则表达式是由普通字符与元字符组成 3、普通字符包括大小写字母、数字、标点符号及一些其他符号 4、元字符是指在正则表达式中具有特殊意义的专用字符&#xff0c…
阅读更多...
Hack The Box-Pov

Hack The Box-Pov

信息收集&端口利用 先使用nmap对主机进行端口扫描 nmap 10.10.11.251只开放了80端口 访问网站后发现没有什么功能点，尝试目录扫描 并没有什么能够利用的点 使用gobuster进行子域名扫描 gobuster dns -d pov.htb -w /usr/share/wordlists/seclists/Discovery/DNS/subdo…
阅读更多...
Vue之初识Vue CLI 脚手架

Vue之初识Vue CLI 脚手架

Vue CLI 是Vue 官方提供的一个全局命令工具 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】 脚手架有什么好处&#xff1f; 1.开箱即用&#xff0c;零配置 2.内置 babel 等工具 3.标准化 使用步骤: 1.全局安装(一次):yarn globaladd vue/cli …
阅读更多...
自然语言处理（NLP）技术使用

自然语言处理（NLP）技术使用

自然语言处理&#xff08;NLP&#xff09;技术使用 以下是一些自然语言处理&#xff08;NLP&#xff09;技术的例子&#xff1a;以上只是一些NLP技术的例子&#xff0c;还有许多其他的技术和应用&#xff0c;如文本分类、文本生成、问答系统等。NLP技术的发展正逐渐改变人们与计…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023