前端框架---Vue2学习教程(上)

news2025/4/6 20:51:57

从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 += 10
          console.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">
      <div
        class="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 += 10
          console.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" />
      <!-- <input
        type="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.coloradmin.cn/o/1418816.html

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

相关文章

遗传算法优化最大化效应的某些需求点可不配送的vrptw问题

标题&#xff1a;遗传算法优化最大化效应的某些需求点可不配送的vrptw问题 摘要&#xff1a; 在可不配送的车辆路径配送问题&#xff08;VRPTW&#xff09;中&#xff0c;我们面临着优化路径规划以最大化效用的挑战。本文提出了一种基于遗传算法的方法&#xff0c;旨在解决具…

【Shell实战案例面试题】输入网卡的名字,来输出网卡的IP

1.问题 参数后判断要加"" 名字为空时显示ip 2.分析 把本机的所有网卡名列出来&#xff0c;来引导用户输入 使用命令列出所有网卡信:ifconfig/ip a 设计一个函数&#xff0c;把网卡名作为参数&#xff0c;函数返回网卡的IP 在获取某个网卡IP时&#xff0c;考虑网…

Redis面试(三)

1.Redis报内存不足怎么处理 Redis内存不足的集中处理方式&#xff1a; 修改配置文件redis.cof的maxmemory参数&#xff0c;增加Redis的可用内存通过命令修改set maxmemory动态设置内存上限修改内存淘汰策略&#xff0c;及时释放内存使用Redis集群&#xff0c;及时进行扩容 2…

基于springboot的美发管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

让Unity迭代器性能提升5倍

最近在研究Unity il2cpp的代码生成和编译优化&#xff0c;结合之前遇到过的一个优化案例&#xff0c;给大家讲讲在Unity中迭代器相关代码生成的底层原理&#xff0c;以及在写代码过程中需要注意的一些特殊情况。 案例 首先我们来看一个非常简单的案例&#xff0c;代码如下&am…

3338 蓝桥杯 wyz的数组IV 简单

3338 蓝桥杯 wyz的数组IV 简单 //C风格解法1&#xff0c;通过率50% #include<bits/stdc.h>int main(){std::ios::sync_with_stdio(false);std::cin.tie(nullptr);std::cout.tie(nullptr);int n; std::cin >> n;int ans 0;std::vector<int>a(n);for(auto &am…

Docker本地部署APITable结合内网穿透实现公网访问

文章目录 前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台&#xff0c;是一款面向 API 的智能多维表格。它将复杂的可视化数据库、电子表格、实时在线协同、低代码开发技术四合为一&am…

【C语言】socket编程接收问题

一、recv()函数接收到的返回值为0表示对端已经关闭 在TCP套接字编程中&#xff0c;通过recv()函数接收到的返回值为0通常表示对端已经关闭了套接字的发送部分。这是因为TCP是一个基于连接的协议&#xff0c;其中有定义明确的连接建立和终止流程&#xff1b;当对端调用close()或…

C语言指针进阶(1)(超详细)

前言&#xff1a; 指针其实就是地址&#xff0c;而凡是存储在内存中的值都会有属于自己的地址&#xff0c;指针指向地址&#xff0c;这样我们就能通过指针间接操作变量。我们在指针初阶中介绍了指针的基本概念&#xff1a;如指针大小、野指针问题、指针间的关系运算等&#xff…

Hugging Face创始人分享:企业如何在ChatGPT浪潮下实现战略布局

Hugging Face创始人兼首席执行官 Clem Delangue在IBM一年一度的 THINK大会中研讨了当前人工智能发展趋势&#xff0c;特别是ChatGPT模型以及其对行业的影响。他的演讲还涉及到一个关键的议题&#xff0c;在ChatGPT这样的通用模型出现后&#xff0c;企业如何在人工智能领域找到自…

自定义vue通用左侧菜单组件(未完善版本)

使用到的技术: vue3、pinia、view-ui-plus 实现的功能: 传入一个菜单数组数据,自动生成一个左侧菜单栏。菜单栏可以添加、删除、展开、重命名,拖动插入位置等。 效果预览: 代码: c-menu-wrap.vue <template><div class="main-container">&l…

【嵌入式学习】C++QT-Day3-C++基础

笔记 见我的博客&#xff1a;https://lingjun.life/wiki/EmbeddedNote/19Cpp 作业 设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函…

当包容结构体遇见灵活的内存管理

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;c语言从基础到进阶 &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于c语言的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到小田代码世界~ &#x…

课时7:shell基础_shell简介

1.3.1 shell简介 学习目标 这一节&#xff0c;我们从 运维、shell语言、小结 三个方面来学习。 运维 简介 运维是什么&#xff1f;所谓的运维&#xff0c;其实就是公司的内部项目当中的一个技术岗位而已&#xff0c;它主要做的是项目的维护性工作。它所涉及的内容范围非常…

方法、数组

方法 是语句的集合&#xff0c;在一起执行一个功能 它是解决一类问题的步骤的有序集合 包含于类或对象中 在程序中创建&#xff0c;在其他地方被引用 设计方法的原则&#xff1a;方法的本意是功能块&#xff0c;就是实现某一个功能的语句块的集合。设计时&#xff0c;最好保持…

基于go mod模式创建项目最佳实践

希望能带给你成功的喜悦&#xff01; 除go get、vendor这两种方式外&#xff0c;Go版本在1.11之后推出了go module模式来管理依赖&#xff0c;使用go mod时下载的依赖文件在$GOPATH/pkg/mod/下。本文以两种办法介绍如何创建go mod项目。 目录 goland开启玩法 本地手动创建项目…

###C语言程序设计-----C语言学习(6)#

前言&#xff1a;感谢老铁的浏览&#xff0c;希望老铁可以一键三连加个关注&#xff0c;您的支持和鼓励是我前进的动力&#xff0c;后续会分享更多学习编程的内容。 一. 主干知识的学习 1. while语句 除了for语句以外&#xff0c;while语句也用于实现循环&#xff0c;而且它…

shell脚本自动化备份网络设备配置教程

由于局域网内存在多台网络设备&#xff0c;如防火墙、路由器、交换机等&#xff0c;数量众多&#xff0c;且品牌不同&#xff0c;手工备份配置需要相当长的时间&#xff0c;现需要实现自动化导出备份配置。 经查询&#xff0c;该局域网内存在华为及阿尔卡特两种品牌&#xff0…

Android Studio 下载安装配置使用入门【2024年最新】

前言&#xff1a; Android Studio 是谷歌官方提供的主要集成开发环境&#xff08;IDE&#xff09;&#xff0c;专为 Android 平台应用开发而设计。它基于 JetBrains 的 IntelliJ IDEA 软件&#xff0c;并在此基础上增加了大量针对 Android 开发的定制功能。Android Studio 通过…

CMake 完整入门教程(一)

1 前言 每一次学习新东西都是很有乐趣的&#xff0c;虽然刚开始会花费时间用来学习&#xff0c;但是实践证明&#xff0c;虽然学习新东西可能会花费一些时间&#xff0c;但是它们带来的好处会远远超过这些花费的时间。学习新东西是值得的&#xff0c;也是很有乐趣的。 网络上…