Vue核心指令解析:探索MVVM与数据操作之美

在这里插入图片描述


文章目录

  • 前言
  • 一、Vue.js
    • 1. MVVM模式介绍
    • 2. 单页面组件介绍及案例讲解
    • 3. 插值表达式介绍及案例讲解
  • 二、Vue常用指令详解
    • 1. 数据绑定指令
      • v-text
      • v-html
    • 2. 条件渲染指令
      • v-if
      • v-show
    • 3. 列表渲染指令
      • v-for
      • 循环数组介绍及案例讲解
      • 循环对象介绍及案例讲解
    • 4. 事件监听指令
      • v-on
      • 事件修饰符介绍与案例讲解
    • 5. 表单输入与数据同步指令
      • v-model
      • v-model修饰符介绍及案例讲解
    • 6. 属性绑定指令
      • v-bind
      • 对象语法绑定class介绍及案例讲解
      • 数组语法绑定class介绍及案例讲解
      • 绑定style介绍及案例讲解


前言

    MVVM模式将数据(Model)、视图(View)和视图模型(ViewModel)三者分离,实现数据驱动视图的双向绑定。而Vue.js的指令系统则提供了强大的数据操作和控制能力,使开发更加高效。

    接下来,我们将重点介绍Vue.js中一系列强大的指令。从数据绑定指令 v-textv-html开始,它们让我们能够轻松地将数据渲染到页面上;到条件渲染指令 v-ifv-show,它们使得页面能够根据不同的条件展示不同的内容;再到列表渲染指令 v-for,它极大地简化了列表数据的展示;此外,还有事件监听指令 v-on,它让我们能够监听用户与页面的交互,实现动态响应;而表单输入与数据同步指令 v-model,则让表单数据的处理变得简单而高效;最后,属性绑定指令 v-bind,它使得我们能够灵活地绑定元素的属性。


一、Vue.js

Vue.js是当下很火的一个JavaScript MVVM 库,它是以数据驱动和组件化的思想构建的。相比于Angular.jsVue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
    相比于使用jQuery操作DOM,使用Vue.js时要先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

1. MVVM模式介绍

下图不仅概括了MVVM模式(Model-View-ViewModel),还描述了在Vue.jsViewModel是如何和View以及Model进行交互的。
在这里插入图片描述
ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。

当创建了ViewModel后,双向绑定是如何达成的呢?

  • 首先,我们将上图中的DOM ListenersData Bindings看作两个工具,它们是实现双向绑定的关键。
  • 从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
  • 从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

2. 单页面组件介绍及案例讲解

文件扩展名为 .vuesingle-file components (单文件组件) 为前端项目开发中遇到的一系列问题提供了解决方法。

这是一个文件名为 Hello.vue 的简单实例:

<template><!-- 模板,存放HTML标签 -->
</template><script>// Js 代码
export default {name: "Hello"}
</script><style>
/* css样式 */
</style>

3. 插值表达式介绍及案例讲解

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

<template><span>Message:{{msg}} </span>
</template><script>
export default {name: "Hello",data() {return {msg: "Hello World",};},
};
</script>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时,绑定的数据对象上 msg property 发生了改变,插值处的内容都会更新。

对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

二、Vue常用指令详解

1. 数据绑定指令

v-text

v-text指令用于将数据填充到标签中,作用与插值表达式类似,但是没有闪烁问题:

<template><span v-text="msg"></span>
</template><script>
export default {name: "Hello",data() {return {msg: "Hello World",};},
};
</script>

v-html

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

<template><span v-html="msg"></span>
</template><script>
export default {name: "Hello",data() {return {msg: "<h1>Hello World</h1>",};},
};
</script>

你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

2. 条件渲染指令

v-if

v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候渲染

<template><div id="app"><p v-if="is_show">这是一个p标签</p><p v-if="is_have">我也是一个p标签</p></div>
</template><script>
export default {data(){return{is_show: true,is_have: false}}
}
</script>

案例:动态切换内容:

<template><div id="app"><input type="radio" name="gender" value="" v-model="msg"><input type="radio" name="gender" value="" v-model="msg"><input type="radio" name="gender" value="保密" v-model="msg">保密<h2 v-if="msg == '女'">你是一个Girl</h2><h2 v-else-if="msg == '男'">你是一个Boy</h2><h2 v-else>你是一个神秘的人</h2></div>
</template><script>
export default {data(){return{msg: "保密",}}
}
</script>

v-show

v-showv-if 的用法和效果看起来是一样的

<template><div id="app"><input type="button" value="点击" @click="btn"><h2 v-show="a">嗨,我在</h2></div>
</template><script>
export default {data(){return{a: true}},methods:{btn(){this.a = !this.a}}
}
</script>

v-if和v-show异同介绍:

  • v-if 是控制元素是否在 DOM 渲染,实现显示和隐藏
    v-show 是控制元素的 CSS 属性 display,实现显示和隐藏

3. 列表渲染指令

v-for

  • v-for 可以循环遍历数据,并渲染出多个标签
  • v-for指令操作里 a in b是必要格式
  • v-for 可以循环遍历数据,并渲染出多个标签
<div id="app"><p v-for="i in 8">{{i}}</p>
</div>
在v-for指令操作里 a in b是必要格式v-for 可以循环遍历数据,并渲染出多个标签

循环数组介绍及案例讲解

  • 遍历数组时,i 是数组中的值,k 是索引
遍历数组介绍及案例讲解 
<template><div id="app"><p v-for="(i, k) in list_">{{i}} {{k}}</p></div>
</template>
<script>
export default {data(){return{list_: [2,4,6,8,10]}}
}
</script>

循环对象介绍及案例讲解

  • v-for 支持最多三个参数,同时获取遍历对象的keyvalue值,以及index索引位置
  • 要注意的是,此时的keyvalue和python中的顺序是颠倒的,key在后,value在前
<template><div id="app"><p v-for="(value, key, i) in user">{{i}}--{{key}}--{{value}}</p></div>
</template><script>
export default {data(){return{user: {name: "张三",age: 18}}}
}
</script>

4. 事件监听指令

v-on

v-on给元素绑定对应事件,可以缩写为@

<template><div><! -- <button v-on:click="btn">弹框</button> --><!-- 效果和上面等同 --><button @click="btn">弹框</button></button></div> 
</template><script>
export default {methods:{btn(){alert(111)}}
}
</script>

事件修饰符介绍与案例讲解

1、阻止冒泡 .stop介绍及案例讲解

  • 比如一个按钮在一个div中,并且按钮和div均有自己的事件,那么此时点击按钮,事件会像冒泡一样从按钮开始一直到div进行触发,.stop用来阻止默认的事件触发行为
<template><div id="app"><p @click="pClick"><input type="button" value="按钮" @click.stop="btnClick"></p></div>
</template><script>
export default {methods:{pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

2 、阻止默认 .prevent介绍及案例讲解

  • 比如像a标签这样的,在点击时他有默认的跳转动作,可以通过.prevent阻止该默认行为
<template><div id="app"><a v-bind:href="url" :id="msg + '123'" @click.prevent="aClick">百度 </a></div>
</template><script>
export default {name: 'one',data(){return{url: "http://www.baidu.com",msg:"bd"}},methods:{aClick(){console.log("链接被点击啦")}}
}
</script>

3、 捕获事件 .capture介绍及案例讲解

  • 默认的事件触发处理机制是冒泡机制,通过.capture即可将冒泡顺序从里向外,颠倒顺序
  • 也可理解为在冒泡机制中,谁有该修饰符,先触发谁的事件
<template><div id="app"><p @click.capture="pClick"><input type="button" value="按钮" @click="btnClick"></p></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

4、 自身事件 .self介绍及案例讲解:

  • 与capture和冒泡不同,.self只有是自身触发的当前的事件才真正执行处理的回调函数
  • 并且.self只会阻止当前元素的事件触发行为
<template><div @click="divClick" class="div1"><p @click.self="pClick" class="p1"><input type="button" value="按钮" @click="btnClick"></p></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{divClick() {console.log("盒子点击被触发了")},pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

5、 单次事件 .once介绍及案例讲解:

  • 使用.once只触发一次事件函数
<template><div id="app"><input type="button" value="提交" @click.once="btn"></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{btn(){alert(1111)}}
}
</script>

5. 表单输入与数据同步指令

v-model

  • 使用v-model指令可以在表单 inputtextarea 以及 select 元素上创建双向数据绑定 根据表单上的值,自动更新模板变量中的值
  • 注意v-model会忽略表单的初始值,比如: checkedvalueselected ,如果需要的话,应该在 javascript中首先声明初始值

1、表单类型为文本输入框

使用v-model指令可以在表单 input 、 textarea 以及 select 元素上创建双向数据绑定 根据表单上的值,自动更新模板变量中的值
<template><div><p>用户名:<input type="text" v-model="userinfo.name" /></p><p>密码:<input type="password" v-model="userinfo.pwd" /></p><p> {{userinfo.name}} 已登录</p></div>
</template><script>
export default {name: "Hello",data() {return {userinfo:{name:"xxx",pwd:"xxx"}};},
};
</script>

2、表单类型为文本域

<template><div><p><input type="textarea" v-model="a" /></p><p>{{a}}</p></div>
</template><script>
export default {name: "Hello",data() {return {a: 1,};},
};
</script><style scoped>
input{width: 200px;  /* 设置宽 */height: 50px;  /* 设置高 */
}
</style>

3、单个复选框:数据为绑定为 truefalse 的布尔值

<template><div><p><input type="checkbox" v-model="checked" /></p><p>{{checked}}</p></div>
</template><script>
export default {name: "Hello",data() {return {checked: false,};},
};
</script><style scoped>
input {width: 100px;height: 100px;
}
</style>

复选框:选中的结果会绑定到同一个数组,将保存的 v-model 变量创建为数组

<template><div><p><input type="checkbox" name="fruit" value="banana" v-model="checked" /> 香蕉<input type="checkbox" name="fruit" value="apple" v-model="checked" /> 苹果<input type="checkbox" name="fruit" value="orange" v-model="checked" /> 橘子</p><p>{{checked}}</p></div>
</template><script>
export default {name: "Hello",data() {return {checked: new Array(), // [] 空数组};},
};
</script><style scoped>
input {width: 20px;height: 20px;
}
</style>

4、表单类型为单选框

<template><div><h3>哈哈,我的性别是:{{checked}}</h3><p><input type="radio" name="gender" value="man" v-model="checked"><input type="radio" name="gender" value="women" v-model="checked"><input type="radio" name="gender" value="secret" v-model="checked"> 保密</p></div>
</template><script>
export default {name: "Hello",data() {return {checked: "XX", };},
};
</script>

5、表单类型为下拉框

<template><div><h3>十一你想要去旅游的城市:{{selected}}</h3><select v-model="selected"><option disabled value selected="selected">省份</option><option value="山西">山西</option><option value="北京">北京</option><option value="上海">上海</option></select></div>
</template><script>
export default {name: "Hello",data() {return {selected: "",};},
};
</script>

设置select标签的multiple属性即可设置为多选下拉菜单,按着ctrl键可以多选

<template><div><h3>十一你想要去旅游的城市:{{selecteds}}</h3><select multiple v-model="selecteds"><option value="山西">西安</option><option value="北京">北京</option><option value="上海">上海</option></select></div>
</template><script>
export default {name: "Hello",data() {return {selecteds: new Array(), // 多重数据一般都要保存成数组};},
};
</script>

v-model修饰符介绍及案例讲解

默认情况下,v-modelinputtextarea表单中进行同步输入框的改动,添加了.lazy修饰符之后,对应的v- model绑定事件触发机制将变为change事件,只有在光标失去焦点时会触发。

<template><div><h3 v-html="msg"></h3><input type="text" v-model.lazy="msg" /></div>
</template><script>
export default {name: "Hello",data() {return {msg: "hello",};},
};
</script>

使用.trim可以自动过滤输入框的首尾空格

<template><div><h3 v-html="msg"></h3><input type="text" v-model.trim="msg" /></div>
</template><script>
export default {name: "Hello",data() {return {msg: "hello",};},
};
</script>

如果用户希望将输入表单的内容处理为Number类型,可以使用.numberv-model进行修饰;如果表单字符串无法被处理为数字,则返回原始的值

<template><div><h3 v-html="msg"></h3><input type="text" v-model.number="msg" /><p>{{typeof msg}}</p></div>
</template><script>
export default {name: "Hello",data() {return {msg: "123",};},
};
</script>

6. 属性绑定指令

v-bind

v-bind 主要用于属性绑定,比方你的class属性style属性value属性href属性等等,只要是属性,就可以用v-bind指令进行绑定。

对象语法绑定class介绍及案例讲解


对象语法
顾名思义,就是传给class的是一个对象,例如:

<template>
<div id="app"><p class="font_Size" v-bind:class="{ red: isRed }">Hello World!</p>
</div>
</template>
<script>export default {name:'HelloWorld',data: {return {isRed: true}}}
</script>
<style>css先后顺序有影响.red{font-size: 20px;color: red;}.font_size{font-size: 40px;color: blue;}</style>

数组语法绑定class介绍及案例讲解

数组语法
数组语法可以理解为我们把一个class列表直接传给class,例如:

<div id="app"><p v-bind:class="[redClass, centerClass]">Hello World!</p>
</div>
<script>
export default{name:'HelloWorld',data: {return{redClass: 'active',centerClass: 'text-danger'}}}</script>
<style>
.active {width: 100px;height: 100px;background: green;
}
.text-danger {background: red;
}
</style>

绑定style介绍及案例讲解

除了绑定class,v-bind指令还可以绑定style,绑定style和绑定class其实大同小异,也是可以使用对象语法和数组语法,使用对象语法的时候也是可以直接绑定data上的对象或者绑定一个返回对象的计算属性
唯一不同的是在使用数组语法的时候,绑定class传的是class列表,绑定style传的是style对象列表

<template><div id="app"><p>直接绑定:</p><p v-bind:style="{color: redColor, 'text-align': centerPos}">Hello World!</p><p>绑定data的对象:</p><p v-bind:style="classObj">Hello World!</p><p>绑定计算属性:</p><p v-bind:style="classObj1">Hello World!</p><p>数组语法:</p><p v-bind:style="[redStyle, centerStyle]">Hello World!</p></div>
</template>
<script>
export default{name:'HelloWorld',data: {return{redColor: 'red',centerPos: 'center',redStyle: {color: 'red'},centerStyle: {'text-align': 'center'},classObj: {color: 'red','text-align': 'center'}}},computed: {classObj1: function(){return {color: 'red','text-align': 'center'}}}}
</script>

在这里插入图片描述

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

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

相关文章

Python-矩阵元素定位

[题目描述] 小理得到了一个 n 行 m 列的矩阵&#xff0c;现在他想知道第 x 行第 y 列的值是多少&#xff0c;请你帮助他完成这个任务。输入格式&#xff1a; 第一行包含两个数 n 和m &#xff0c;表示这个矩阵包含 n行 m 列。从第 2 行到第 n1 行&#xff0c;每行输入 m 个整数…

【JS逆向百例】某点数据逆向分析,多方法详解

前言 最近收到粉丝的私信&#xff0c;其在逆向某个站点时遇到了些问题&#xff0c;在查阅资料未果后&#xff0c;来询问K哥&#xff0c;K哥一向会尽力满足粉丝的需求。网上大多数分析该站点的教程已经不再适用&#xff0c;本文K哥将提供 3 种解决方案&#xff0c;对于 webpack…

[个人感悟] MySQL应该考察哪些问题?

前言 数据存储一直是软件开发中必不可少的一环, 从早期的文件存储txt, Excel, Doc, Access, 以及关系数据库时代的MySQL,SQL Server, Oracle, DB2, 乃至最近的大数据时代f非关系型数据库:Hadoop, HBase, MongoDB. 此外还有顺序型数据库InfluxDB, 图数据库Neo4J, 分布式数据库T…

【unity小技巧】unity事件系统创建通用的对象交互的功能

文章目录 前言实现1. **InteractEvent 类**&#xff1a;2. **Interact 类**&#xff1a;3. **Player 类**&#xff1a;4. **Chest 类**&#xff1a; 工作流程说明&#xff1a;开单个箱子按钮触发打开很多箱子拾取物品&#xff08;传参&#xff09;参考完结 前言 游戏开发过程中…

vue中用JSON格式查看数据(vue-json-viewer)

vue中把string用JSON格式展示数据 vue-json-viewer使用 官网地址&#xff1a;https://www.npmjs.com/package/vue-json-viewer 1. 安装插件vue-json-viewer //vue2 npm install vue-json-viewer2 --save //vue3 npm install vue-json-viewer3 --save2. 引入vue-json-viewer…

Kubernetes Dashboard

Minikube 环境搭建 Kubernetes 的基本架构 Kubernetes 声明式语言 YAML YAML操作Kubernetes核心对象 CentOs搭建Kubernetes集群 Kubernetes进阶对象Deployment、DaemonSet、Service Kubernetes进阶对象Ingress、Ingress Class、Ingress Controller Kubernetes集群部署项目实践 …

本地离线模型搭建指南-中文大语言模型底座选择依据

搭建一个本地中文大语言模型&#xff08;LLM&#xff09;涉及多个关键步骤&#xff0c;从选择模型底座&#xff0c;到运行机器和框架&#xff0c;再到具体的架构实现和训练方式。以下是一个详细的指南&#xff0c;帮助你从零开始构建和运行一个中文大语言模型。 本地离线模型搭…

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 &#x1f4da; 前言 &#x1f4d1;摘要 &#x1f4d1;系统流程 &#x1f4da; 系统架构设计 &#x1f4da; 数据库设计 &#x1f4da; 系统功能的具体实现 &#x1f4ac; 系统登录注册 系统登录 登录界面 用户添加 &#x1f4ac; 抗疫列表展示模块 区域信息管理 …

APP自动化测试-Appium常见操作之详讲

一、基本操作 1、点击操作 示例&#xff1a;element.click() 针对元素进行点击操作 2、初始化&#xff1a;输入中文的处理 说明&#xff1a;如果连接的是虚拟机&#xff08;真机无需加这两个参数&#xff0c;加上可能会影响手工输入&#xff09;&#xff0c;在初始化配置中…

【初阶数据结构】深入解析栈:探索底层逻辑

&#x1f525;引言 本篇将深入解析栈:探索底层逻辑&#xff0c;理解底层是如何实现并了解该接口实现的优缺点&#xff0c;以便于我们在编写程序灵活地使用该数据结构。 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1…

论坛实现随机发帖的学习

1、badboy操作&#xff0c;录制发帖全过程&#xff0c;录制结果保存&#xff0c;生成为.jmx格式的文件 2、在Jmeter中打开该.jmx文件&#xff0c;重命名&#xff0c;便于了解步骤 3、生成结果树&#xff0c;查看所以步骤是否正确 4、实现随机发帖 断言&#xff1a;具有唯一表…

Java面试八股之什么是分布式垃圾回收

什么是分布式垃圾回收 分布式垃圾回收&#xff08;Distributed Garbage Collection, DGC&#xff09;是Java中一种特殊的垃圾回收机制&#xff0c;主要用于处理跨Java虚拟机&#xff08;JVM&#xff09;的远程对象引用时的内存管理问题。在分布式系统中&#xff0c;当一个JVM中…

yolov10打包为exe

一、前言 本节实验将官方yolov10推理程序打包为exe运行 二、代码 首先下载官方代码至本机&#xff0c;并使用conda创建虚拟环境&#xff0c;并安装好yolov10所需库 conda create --prefix E:/pyenv/myYolo10 python3.8 pip install -r requirements.txt 下载官方模型权重 …

【面试干货】Java中的四种引用类型:强引用、软引用、弱引用和虚引用

【面试干货】Java中的四种引用类型&#xff1a;强引用、软引用、弱引用和虚引用 1、强引用&#xff08;Strong Reference&#xff09;2、软引用&#xff08;Soft Reference&#xff09;3、弱引用&#xff08;Weak Reference&#xff09;4、虚引用&#xff08;Phantom Reference…

在线装修管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;装修队管理&#xff0c;用户管理&#xff0c;装修管理&#xff0c;基础数据管理&#xff0c;论坛管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;…

【计算机网络】[第4章 网络层][自用]

1 概述 (1)因特网使用的TCP/IP协议体系(四层)的网际层,提供的是无连接、不可靠的数据报服务; (2)ATM、帧中继、X.25的OSI体系(七层)中的网络层,提供的是面向连接的、可靠的虚电路服务。 (3)路由选择分两种: 一种是由用户or管理员人工进行配置(只适用于规…

【开发工具】git服务器端安装部署+客户端配置

自己安装一个轻量级的git服务端&#xff0c;仅仅作为代码维护&#xff0c;尤其适合个人代码管理。毕竟代码的版本管理是很有必要的。 这里把git服务端部署在centos系统里&#xff0c;部署完成后可以通过命令行推拉代码&#xff0c;进行版本和用户管理。 一、服务端安装配置 …

爬虫阶段思考

内容&#xff1a;写这篇文章是因为最近帮同学改了很多的爬虫代码&#xff0c;感触良多。 我用豆瓣为例&#xff0c;并不是不会用别的&#xff0c;而是这个我个人感觉最经典。然后还会写我遇到的一些问题以及解决方法。 首先&#xff0c;我们得先知道怎样爬取。我用的scrapy框…

算法基础精选题单 动态规划(dp)(递推+线性dp)(个人题解)

前言&#xff1a; 一些简单的dp问题。 正文&#xff1a; 题单&#xff1a;237题】算法基础精选题单_ACM竞赛_ACM/CSP/ICPC/CCPC/比赛经验/题解/资讯_牛客竞赛OJ_牛客网 (nowcoder.com) 递推&#xff1a; NC235911 走楼梯&#xff1a; #include<bits/stdc.h> using na…

linux 关闭防火墙

文章目录 关闭系统防火墙关闭 linux 防火墙 关闭系统防火墙 systemctl stop firewalld systemctl disable firewalld // 关闭开机自启动 systemctl status firewalld // 查看防火墙状态关闭 linux 防火墙 setenforce 0 getenforce // 查看状态 vim /etc/sysconfig/selinux //…