Vue+Vue CLI学习

1、Vue基础

1.1、Vue简介

（1）Javascript框架

（2）简化Dom操作

（3）响应式数据驱动

vue基础；vue-cli;vue-router;vuex;element-ui;vue3

vue文件包括html、css、js

1.2、第一个Vue程序

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方文档： https://cn.vuejs.org/

vue特点

（1）采取组件化模式，提高代码复用率、且让代码更好维护；

（2）声明式编码，让编码人员无需直接操作DOM，提高开发效率。

npm i -g @vue/cli //安装一次vue-cli
//1.基于命令行的方式创建vue项目
vue create project-name
//2.基于图形化界面的方式创建vue项目
vue ui

cd project-name
npm run serve

举例：

命令式编码

<!--展示人员列表的容器-->
<ul id="list"></ul>
<script>
    //一些人的数据
    let persons = [
        {id:'001',name:'张三',age:18},
        {id:'002',name:'李四',age:19},
        {id:'003',name:'王五',age:20}
    ]
//准备html字符串
let htmlstr = ''
//遍历数据拼接html字符串
persons.forEach(p=>{
    htmlStr +='<li>${p.id} - ${p.name} - ${p.age}</li>'
});
//获取list元素
let list = document.getElementById('list')
//修改内容（亲自操作DOM）
list.innerHTML = htmlStr
</script>

声明式编码

<ul id = 'list'>
    <li v-for = 'p in persons'>
    {{p.id}}-{{p.name}}-{{p.age}}
    </li>
</ul>

3、使用 虚拟DOM+优秀的 Diff算法，尽量复用DOM节点。

1.3、vue的安装

1、script标签引入，这也是我们学习中比较常用的一种方式，vue.js文件有生产者和开发者两种版本， 我们初学要使用开发版本， 生产者版本包含了包含完整的警告和调试模式，而开发者版本删除了所有的警告信息，体积更小。

<script type="text/javascript" src="../js/vue.js"></script>

引入这个文件后，就会多了一个Vue的全局对象

介绍 — Vue.js (vuejs.org)

2、CDN方式引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.4、Vue的初体验

前面我们说过Vue是一个全局的对象，那我们要使用Vue就必须要先new出来一个对象，对这个对象进行一些配置，我们传入一个配置对象作为Vue的构造函数的参数。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>vue基础1</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>

<body>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时生产提示
    </script>
    <div id = "app">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{message:"你好小黑"}
        })
    </script>
</body>

</html>

配置对象中的属性名不能乱写，要按照原有的属性名写。我们先建立了一个div的容器，附上id，id为app，在配#置对象里，我们这样写：

  1. el：element，表示挂载，将容器与vue联系起来，接着我们就可以在容器里使用vue了，也可以用类名挂载。可以支持所有的双标签，单标签不支持，建议使用div。el是用来设置Vue实例挂载（管理）的元素

  2. data:数据对象

    data：顾名思义，既数据，vue能将内部的数据显示在容器中，上面的例子用了插值语法实现，既{{}}(可以理解为模板的语法)，中间放上数据的名字。

    1. Vue中用到的数据定义在data中
    2. data中可以写 复杂类型的数据
    3. 渲染复杂类型数据时，遵守js的 语法即可

注意问题：

（1）Vue实例的作用范围是什么呢？

Vue会管理el选项 命中的元素及其内部的 后代元素

（2）是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用 ID选择器

（3）是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和 BODY

pnpm build
npm-run-all
//"build":"run-p type-check build-only"

一种可以并行的或顺序的运行多个给定npm脚本的工具。

run-p;//==npm-run-all-s顺序(senquentially)运行npm-scripts
run-s;//==npm-run-all-p并行(parallel)运行npm-scripts

2、本次应用

  • 通过Vue实现常见的网页效果
  • 学习Vue指令，以案例巩固知识点
  • Vue指令指的是，以v-开头的一组特殊语法

（1）内容绑定，事件绑定：v-text，v-html，v-on基础

（2）显示切换，属性绑定：v-show，v-if，v-bind

（3）列表循环，表单元素绑定：v-for，v-on补充，v-model

2.1、v-text指令

设置标签的文本值（textContent）

<div>
		<ul id="app">
            <h2 v-text = "message+'!'">好棒</h2>
            <h2 v-text = "info+'!'">pretty good</h2>
            <h2>{{ message+"!" }}</h2>
        </ul>
</div>
var app = new Vue({
          el:"#app",
          data:{
            message:"你好，小楠",
            school:{
              name:"nannan",
              mobile:"123456",
            },
            campus:["北京校区","山东校区","广东校区","上海校区"],
            info:"前端教研"
          }
        })
  • v-text指令的作用是：设置标签的内容
  • 默认写法会替换全部内容，使用 **差值表达式{{}}**可以替换指定内容
  • 内部支持写 表达式

2.2、v-html指令

设置标签的innerHTML

	<div>
            <h2 v-html="content"></h2>
        	<h2 v-text="content"></h2>
	</div>
		var app = new Vue({
          el:"#app",
          data:{
           content:"<a href = 'http://www.baidu.com'>good</a>"
          }
        })

在这里插入图片描述

  • v-html指令的作用是：设置元素的 innerHTML
  • 内容中有 html结构会被解析为 标签
  • v-text指令无论内容是什么，只会解析为文本

2.3、v-on指令基础

2.3.1、

为元素绑定事件

v-on:==@

 <div id="app">
        <p>v-on 实践</p>
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
     <!-- 每次点击food（即西红柿炒蛋）后面都会加真好吃-->
        <h2 @click = "changeFood">{{ food }}</h2>
 </div>
<script>
        // 创建Vue实例
        var app = new Vue({
            el: "#app",
            data
                food: "西红柿炒蛋",
            },
            methods: {
                doIt: function() {
                    alert("做IT");
                },
                changeFood: function() {
                    // console.log(this.food);
                    this.food+="真好吃";
                }
    }
</script>

在这里插入图片描述

  • v-on指令的作用是：为元素绑定 事件
  • 事件名不需要写 on
  • 指令简写可以为 @
  • 绑定的方法定义在 methods属性中
  • 方法内部通过 this关键字可以访问定义在 data中数据

2.3.2、补充

传递自定义参数，事件修饰符

常见的修饰符：

https://cn.vuejs.org/v2/api/#v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on补充</title>
    <div id = "app">
        <input type="button" value="点击" @click="doIt(666,'lll')">
        <input type="text" @keyup.enter="sayHi">
    </div>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            methods:{
            doIt:function(p1,p2){
                console.log("做IT");
            },
            sayHi:function(){
                alert("吃了吗");
            }
        }
        })
    </script>
</body>
</html>
  • 事件绑定的方法写成 函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义 形参来接收传入的实参
  • 事件的后面跟上 .修饰符可以对事件进行限制
  • .enter可以限触发的按键为回车
  • 事件修饰符有多种

2.4、计数器

实现逻辑

  1. data中定义数据：比如num
  2. methods中添加两个方法：比如 add(递增),sub(递减)
  3. 使用v-text将num设置给span标签
  4. 使用v-on将add，sub分别绑定为+,-按钮
  5. 累加的逻辑：小于10累加，否则提示
  6. 递减的逻辑：大于0递减，否则提示
<div id="app">
        <button @click="sub">-</button>
        <span v-text="num"></span>
        <button @click="add">
            +
        </button>
</div>
<script>
        // 创建Vue实例
        var app = new Vue({
            el: "#app",
            data
                num: 1,
            },
            methods: {
                add:function(){
                    if(this.num>=10){
                        alert("别点了，最大啦");
                    }
                    else{
                        this.num+=1;
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num-=1; 
                    }
                    else{
                        alert("别点啦，最小啦");
                    }
                  }
</script>

箭头函数没有this，所以箭头函数获取不了this，箭头函数代表的事匿名函数，也就是没有function直接就是一个括号，所以没有this，但是有名函数有function关键字，所以箭头函数没有this

  • 创建vue示例时： el（挂载点）， data（数据）， methods（方法）
  • v-on指令的作用是绑定事件，简写为 @
  • 方法中通过 this，关键字获取 data中的数据

2.5、v-show指令

根据表达式的真假，切换元素的显示和隐藏

  • 原理是修改元素的display，实现显示隐藏
  • 指令后面的内容，最终都会解析为 布尔值
  • 值为 true元素显示，值为 false元素隐藏
  • 数据改变之后，对应元素的显示状态会 同步更新

2.6、v-if指令

根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>buedemo2</title>
</head>
<body>
    <div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <h1 v-if="isShow">小楠同学</h1>
    <h1 v-if="temperature<255">hello,beautiful girl</h1>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:20,
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>
</html>

通过点击切换显示，会切换是否出现小楠同

在这里插入图片描述

  • v-if指令的作用是：根据表达式的真假切换元素的显示状态
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树种移除
  • 频繁的切换v-show，反之使用v-if，前者的切换消耗小

2.7、v-bind指令

设置元素的属性（比如：src,title,class）

v-bind:属性名 = 表达式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuedemo2</title>
    <style>
        .active {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <input type="button" value="切换显示" @click="toggleIsShow"> -->
        <!-- <h1 v-if="isShow">小楠同学</h1> -->
        <h1 v-if="temperature<255">hello,beautiful girl</h1>
        <img v-bind:src="imgsrc" alt="">
        <br>
        <img v-bind:src="imgsrc" alt="" :title="imgtitle+'!!!'" :class="isShow?'active':''" @click="toggleIsShow">
        <br>
        <img :src="imgsrc" alt="" :title="imgtitle" :class="{active:isShow}" @click="toggleIsShow">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgsrc: "./assets/logo.png",
                isShow: false,
                temperature: 20,
                imgtitle: "heihei",
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

  • v-bind指令的作用是：为元素绑定属性
  • 完整写法是 v-bind:属性名
  • 简写的话可以直接省略v-bind，只保留:属性名
  • 需要动态的增删class建议使用对象的方式

2.8、案例：图片切换

实现步骤：

  1. 定义图片数组
  2. 添加图片索引
  3. 绑定src属性
  4. 图片切换逻辑
  5. 显示状态切换
<div id = "app">
    <img src = "imgArr[index]">
    <a href = "#" @click="prev" v-show="条件">上一张</a>
    <a href = "#" @click="next" v-show="条件">下一张</a>
</div>

var app = new Vue({
el:"#app",
data:{
imgArr:[],//路径，路径，，，，，，
idnex:0
},
methods:{
prev:function(){this.index++;},
next:function(){}
}
})

列表数据建议使用数组

2.9、v-for指令

根据数据生成列表结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuedemo2</title>
    <style>
        .active {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="add">添加数据</button>
        <button @dblclick="remove">双击减少数据</button>
        <!-- <input type="button" value="切换显示" @click="toggleIsShow"> -->
        <!-- <h1 v-if="isShow">小楠同学</h1> -->
        <h1 v-if="temperature<255">hello,beautiful girl</h1>
        <!-- <img v-bind:src="imgsrc" alt="">
        <br>
        <img v-bind:src="imgsrc" alt="" :title="imgtitle+'!!!'" :class="isShow?'active':''" @click="toggleIsShow">
        <br>
        <img :src="imgsrc" alt="" :title="imgtitle" :class="{active:isShow}" @click="toggleIsShow">
        -->
        <ul>
            <li v-for="(item,index) in arr" :title="item">{{ index }}+小楠：{{ item }}</li>

        </ul>
        <h1 v-for="item in objArr" v-bind:title="item.name">{{ item.name }}</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgsrc: "./assets/logo.png",
                isShow: false,
                temperature: 20,
                imgtitle: "heihei",
                arr: [1, 2, 3, 4, 5],
                objArr: [
                    { name: "joker" },
                    { name: "rose" }
                ]
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                },
                add:function(){
                    this.objArr.push({name:"xi"});
                },
                remove:function(){
                    this.objArr.shift();
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

  • v-for指令的作用是：根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是(item,index) in 数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的

3、小黑记事本

功能：新增，删除，统计，清空，隐藏

3.1、新增

  1. 生成列表结构（v-for数组）
  2. 获取用户输入（v-model）
  3. 回车，新增数据（v-on .enter添加数据）

小结：

  • 列表结构可以用过 v-for指令结合数据生成
  • v-on结合事件修饰符可以对事件进行限制，比如 .enter
  • v-on在绑定事件时可以传递自定义参数
  • 通过v-model可以快速的设置和获取表单元素的值
  • 基于数据的开发方式

4、网络应用

vue结合网络数据开发应用

axios：功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=value2(查询字符串)).then(function(response){},function(err){})
axios.post(地址,(参数对象){key:value,key2:value2}).then(function(response){},function(err){})

4.1、示例axios+vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios+vue</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoker">
        <p> {{joke }} </p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的axios的在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /**
         * 接口：随机获取一条笑话
         * 请求地址：https://autumnfish.cn/api/joke
         * 请求方法：get
         * 请求参数：无
         * 响应内容：随机笑话
        */
       var app = new Vue({
        el:"#app",
        data:{
            joke:"很好笑的笑话",
        },
        methods:{
            getJoker:function(){
                var that = this;
                // console.log(this.joke); joke会变
                axios.get("https://autumnfish.cn/api/joke").then(function(response){
                    // console.log(response)
                    console.log(response.data)
                    // console.log(this.joke)
                    that.joke = response.data;
                },function(err){});
            }
        }
       })
    </script>
</body>
</html>

点击一次，在屏幕中变一次

在这里插入图片描述

  • axios回调函数中的this已经改变，无法访问到data中数据
  • 把 this保存起来，回调函数中直接使用保存的this即可
  • 和本地应用的最大区别就是改变了 数据来源

4.2、网络应用–天知道

4.2.1、回车查询

  1. 按下回车（v-on .enter）
  2. 查询数据（axios 接口 v-model）
  3. 渲染数据（v-for 数组 that）

天气接口

请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方式：get
请求参数：city（查询的城市名）
响应内容：天气信息
  • 自定义参数可以让代码的复用性更高
  • methods中定义的方法内部，可以通过this关键字点出其他方法

4.2.2、点击查询

5、vue CLI脚手架conmmand-line interface

万物皆组件

5.1、什么是CLI

CLI是 Command-Line Interface 的缩写，也就是命令行界面。是在图形用户界面（GUI）得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（character user interface, CUI）。

5.2、什么是Vue CLI

Vue CLI是一个基于Vue.js进行快速开发的完整系统，使用Vue脚手架之后，我们开发的页面将是一个完整系统（项目）。

官方文档：[介绍 | Vue CLI (vuejs.org)](https://cli.vuejs.org/zh/guide/)

5.3、Vue CLI优势

  • 通过 @vue/cli 实现的交互式的项目脚手架。bootstrap css js jquery js 通过执行命令方式下载相关依赖。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。vue页面，vuejs vuerouter axios axios(一条命令)

  • 一个运行时依赖

     (@vue/cli-service)

    该依赖：

    • 可升级；=一条命令=
    • 基于 webpack 构建，并带有合理的默认配置； == webpack 项目打包方式 编译好的项目源码=>部署到服务器上直接使用 ==
    • 可以通过项目内的配置文件进行配置；默认配置文件，通过修改默认的配置文件，达到自己想想要的项目环境
    • 可以通过插件进行扩展。 vue vue-charts elementui

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。Nodejs{tomcat} Vue VueRouter webpack yarn

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

5.4、第一个vue脚手架项目

#设置环境
npm config set registry https://registry.npm.taobao.org
npm get registry
#https://registry.npm.taobao.org/
npm config set cache "D:/Programming/node_cache"
npm config set prefix "D:/Programming/node_global"

#安装vue-cli
npm install -g @vue/cli
#检查其版本是否正确
vue --version
#升级
npm update -g @vue/cli

 vue create hello-world
 npm install -g @vue/cli-init
#1.创建vue脚手架的第一个项目
 vue init webpack my-project
#2.创建第一个项目
hello  ------------->项目名
  -build ----------->用来使用wubpack打包使用build依赖
  -config ---------->用来做整个项目配置目录
  -node_modules ---->用来管理项目中国的依赖
  -src ------------->用来书写vue的源代码[重点]
  	+assets -------->用来存放静态资源
    components ----->用来书写Vue组件
  	router --------->用来配置项目中的路由
  	App.vue -------->项目中根组件
  	main.js -------->项目中主入口
  -static ---------->其他静态
  -.babelrc -------->将es6语法转为es5运行
  -editorconfig ---->项目编辑配置
  -.gitignore ------>git版本控制忽略文件
  -.postcssrc.js --->源码相关js
  -index.html ------>项目主页
  -package-lock.json>类似于pom.xml 依赖管理 jquery不建议手动修改
  -package.json ---->对package.json加锁
  -README.md ------->项目说明文件
  
#3.如何运行在项目的根目录中执行
 npm start 运行前端项目
#4.如何访问项目
 http://localhost:8081
#5.Vue Cli中项目开发方式
 注意：一切皆组件 一个组件中国，js代码，html代码，css样式
 1.Vue Cli开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个端系统
 2.日后在使用Vue Cli进行开发时不再书写html，编写的是一个个组件（组件后缀是.vue的文件），日后打包时vue cli会将编译成运行的html文件

在这里插入图片描述

在这里插入图片描述

5.5、如何开发vue脚手架

注意：在Vue cli中一切皆组件

<Footer>首字母可以小写

补充知识

  1. export default是用来导出一个模块的主要内容，当在使用它时，正在导出该模块的默认内容，这个默认内容就是任意想要暴露的内容，比如一个组件、一个函数。一个对象等等。//es6暴露当前组件对象

  2. 在Vue中，要求``data要写成函数形式，这样每个组件实例都会调用data函数，返回一个新的数据对象，以确保数据的独立性。而其他选项，如methods，components`不需要被写成函数形式，因为他们不需要返回新的对象。而是直接提供一组方法或计算属性。

  3. 学习Vue之前需要掌握的JavaScript基础知识

    （1）ES6语法规范

    ECMAScript是javascript标准，ES6就是ECMAScript的第6个版本。

    ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

    一个完整的JavaScript实现应该由以下三个部分组成：

    1. ECMAScript：核心
    2. DOM：文档对象模型
    3. BOM：浏览器对象模型

    （2）ES6模块化

    （3）包管理器

    （4）原型、原型链

    原型的作用： 1.数据共享 节约内存内存空间 2.实现继承 原型链

    （5）数组常用方法

    （6）axios框架全称（ajax – I/O – system）：

    • 基于promise用于浏览器和node.js的http客户端，因此可以使用Promise API

    （7）promise

  4. DOM文档对象模型（Document Object Model）

    DOM元素以树状文件表现关系，又称为DOM树

    html是静态的各个元素的集合，JavaScript提供动态的能力，但是又没有直接操纵html的能力，所以引入DOM这个模型去做一个桥梁，让JS能够操纵html的静态元素

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

python异常机制

python异常机制

当代码出现异常后底下代码都不会被执行了&#xff0c;也就是程序崩溃了。当然能避免异常的话尽量避免但是有的时候这个是没有办法避免的。 异常处理 &#xff08;注&#xff1a;异常处理是从上往下处理&#xff0c;所以编写代码时要注意&#xff09; 语法 try:可能出现异常…
阅读更多...
ospf虚链路实验简述

ospf虚链路实验简述

1、ospf虚链路实验简述 ospf虚链路配置 为解决普通区域不在骨干区域旁&#xff0c;通过配置Vlink-peer实现不同区域网络设备之间建立逻辑上的连接。 实验拓扑图 r1: sys sysname r1 undo info enable int loopb 0 ip add 1.1.1.1 32 ip add 200.200.200.200 32 quit int e0/0/…
阅读更多...
（sub）三次握手四次挥手

（sub）三次握手四次挥手

TCP的三次握手与四次挥手理解及面试题 序列号seq&#xff1a;占4个字节&#xff0c;用来标记数据段的顺序&#xff0c;TCP把连接中发送的所有数据字节都编上一个序号&#xff0c;第一个字节的编号由本地随机产生&#xff1b;给字节编上序号后&#xff0c;就给每一个报文段指派一…
阅读更多...
男人的玩具系统wordpress外贸网站主题模板

男人的玩具系统wordpress外贸网站主题模板

垂钓用品wordpress外贸模板 鱼饵、鱼竿、支架、钓箱、渔线轮、鱼竿等垂钓用品wordpress外贸模板。 https://www.jianzhanpress.com/?p3973 身体清洁wordpress外贸网站模板 浴盐、防蚊液、足部护理、沐浴液、洗手液、泡澡用品wordpress外贸网站模板。 https://www.jianzhan…
阅读更多...
Spring揭秘：BeanDefinitionRegistry应用场景及实现原理！

Spring揭秘：BeanDefinitionRegistry应用场景及实现原理！

内容概要 BeanDefinitionRegistry接口提供了灵活且强大的Bean定义管理能力&#xff0c;通过该接口&#xff0c;开发者可以动态地注册、检索和移除Bean定义&#xff0c;使得Spring容器在应对复杂应用场景时更加游刃有余&#xff0c;增强了Spring容器的可扩展性和动态性&#xf…
阅读更多...
鸿蒙ArkTS语言快速入门-TS（一）

鸿蒙ArkTS语言快速入门-TS（一）

ArkTS与TS的学习 ArkTS与TS的关系简述TypeScript&#xff08;TS&#xff09;简述基础类型1&#xff0c;let2&#xff0c;const3&#xff0c;布尔类型4&#xff0c;数字number5&#xff0c;字符串string6&#xff0c;数组Array7&#xff0c;元组 Tuple8&#xff0c;枚举 enum9&a…
阅读更多...
【设计模式 05】原型模式

【设计模式 05】原型模式

有的时候&#xff0c;我们创建对象&#xff0c;需要耗费大量时间在一些资源型操作上&#xff0c;这个时候&#xff0c;我们就可以先创建出一个模板&#xff0c;然后每次创建的时候直接从模板复制即可&#xff0c;不用反复进行耗时的资源型操作。 python代码&#xff1a; impo…
阅读更多...
Vue-Router使用

Vue-Router使用

1.安装 npm install vue-router4 2. 添加路由 新建router文件夹&#xff0c;新建文件 index.ts import { createRouter, createWebHashHistory,createWebHistory} from "vue-router";const routes [{path: /login,component: () > import("../views/Logi…
阅读更多...
18个惊艳的可视化大屏（第19辑）：工业制造、智能工厂

18个惊艳的可视化大屏（第19辑）：工业制造、智能工厂

实时监控和数据展示 可视化大屏可以集成和展示各种传感器、设备和系统的实时数据。通过将数据可视化展示在大屏上&#xff0c;工厂管理人员可以实时监控生产线的状态、设备的运行情况、生产效率等重要指标。这有助于及时发现问题、做出决策&#xff0c;并提高生产效率和质量。…
阅读更多...
粉色ui微信小程序源码/背景图/头像/壁纸小程序源码带流量主

粉色ui微信小程序源码/背景图/头像/壁纸小程序源码带流量主

云开发版粉色UI微信小程序源码&#xff0c;背景图、头像、壁纸小程序源码&#xff0c;带流量主功能。 云开发小程序源码无需服务器和域名即可搭建小程序另外还带有流量主功能噢&#xff01;微信平台注册小程序就可以了。 这套粉色UI非常的好看&#xff0c;里面保护有背景图、…
阅读更多...
数学建模【模糊综合评价分析】

数学建模【模糊综合评价分析】

一、模糊综合评价分析简介 提到模糊综合评价分析&#xff0c;就先得知道模糊数学。1965年美国控制论学家L.A.Zadeh发表的论文“Fuzzy sets”标志着模糊数学的诞生。 模糊数学又称Fuzzy数学&#xff0c;是研究和处理模糊性现象的一种数学理论和方法。模糊性数学发展的主流是在…
阅读更多...
C++：拷贝构造函数

C++：拷贝构造函数

1.概念 在现实生活中&#xff0c;可能存在一个与你一样的自己&#xff0c;我们称之为双胞胎。那在创建对象的时候&#xff0c;可否创建一个与已存在对象一模一样的新对象呢&#xff1f;答案是可以的&#xff0c;这就要通过拷贝构造函数来实现了。 拷贝构造函数&#xff1a;只有…
阅读更多...
Go-Gin-example 第五部分 加入swagger

Go-Gin-example 第五部分 加入swagger

上一节链接 swagger 为什么要用swagger 问题起源于 前后端分离&#xff0c; 后端&#xff1a;后端控制层&#xff0c;服务层&#xff0c;数据访问层【后端团队】前端&#xff1a;前端控制层&#xff0c;视图层&#xff0c;【前端团队】 所以产生问题&#xff1a;前后端联调…
阅读更多...
基类指针指向派生类对象，基类不带虚函数，子类带虚函数产生的异常分析

基类指针指向派生类对象，基类不带虚函数，子类带虚函数产生的异常分析

基类指针指向派生类对象&#xff0c;基类不带虚函数&#xff0c;子类带虚函数产生的异常分析 基类指针指向派生类对象&#xff0c;指针的起始地址一定是指向基类起始地址的 这种情况下&#xff0c;当基类没有虚函数&#xff0c;而子类存在虚函数时&#xff0c;就会出现问题&am…
阅读更多...
java写DBF文件

java写DBF文件

之前漏了个功能支持&#xff0c;那就是WhoNet上报的DBF文件导出&#xff0c;因为DBF基本没什么人在用了&#xff0c;实现DbfUtil供业务写DBF文件做WhoNet上报导出用。 DBF读写工具类 package JRT.Core.Util;import com.linuxense.javadbf.DBFDataType; import com.linuxense.…
阅读更多...
springboot快速构建项目

springboot快速构建项目

1.Spring的基本步骤 2.构建项目 第一次下包速度比较慢&#xff0c;可以考虑使用镜像 至此项目构建完成 3.启动并配置数据库 新建一个数据库&#xff0c;新建一个表 下面这里也可以【重构-重命名】为yml后缀&#xff08;代码可粘下面的&#xff0c;后面有写&#xff09; Yml后…
阅读更多...
一文看懂：组件化设计，B端系统不再重复造轮子。

一文看懂：组件化设计，B端系统不再重复造轮子。

B端组件化设计是指将企业级系统的界面设计和开发分解为独立的可复用组件&#xff0c;以实现系统的模块化和灵活性。 B端组件化设计的核心思想是将界面拆分成独立的功能组件&#xff0c;每个组件负责特定的功能或业务逻辑&#xff0c;可以独立开发、测试和维护&#xff0c;同时可…
阅读更多...
校园小情书微信小程序，社区小程序前后端开源，校园表白墙交友小程序

校园小情书微信小程序，社区小程序前后端开源，校园表白墙交友小程序

功能 表白墙卖舍友步数旅行步数排行榜情侣脸漫画脸个人主页私信站内消息今日话题评论点赞收藏 效果图
阅读更多...
谷粒学院--在线教育实战项目【一】

谷粒学院--在线教育实战项目【一】

谷粒学院--在线教育实战项目【一】 一、项目概述1.1.项目来源1.2.功能简介1.3.技术架构 二、Mybatis-Plus概述2.1.简介2.2.特性 三、Mybatis-Plus入门3.1.创建数据库3.2.创建 User 表3.3.初始化一个SpringBoot工程3.4.在Pom文件中引入SpringBoot和Mybatis-Plus相关依赖3.5.第一…
阅读更多...
Python高级一

Python高级一

一、介绍 1、特点 面向对象 对象&#xff1a;对客观事物的抽象 对一个具体事务的存在&#xff0c;现实生活中可以看得见摸得着的 可以直接使用的 2、类和对象的关系 类&#xff1a;对对象的抽象 具有相似内部状态和运动规律的实体的集合(或统称为抽象) 具有相同属性和行…
阅读更多...
最新文章

Copyright @ 2022~2023