vue-常用指令

news2024/11/16 21:38:10

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容-常用指令

目录

常用指令

1、v-cloak

2、数据绑定指令

3、v-once

4、v-bind（重点）

5、v-on（重点）

5.1、基本使用（重点）

5.2、事件修饰符

5.3、按键修饰符

6、循环分支指令

6.1、循环指令

6.2、分支指令

7、综合案例：简易购物车

8、动态样式绑定

8.1、class样式绑定

8.2、style样式处理

9、v-model（重点）

常用指令

1、v-cloak

作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题

原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果

注意：需要与CSS规则一起使用

示例：

<style>
    [v-cloak] {
        display: none;
    }
</style>
​
<div v-cloak>
  {{ message }}
</div

如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上（id="app"顶级的div上）。

2、数据绑定指令

  • v-text 填充纯文本

    • 相比插值表达式更加简洁

    • 不存在插值表达式的闪动问题

<div id='app'>
    <span v-text="msg"></span>
    <!-- 和下面的一样 -->
    <span>{{msg}}</span>
</div>
​
<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

  • v-html 填充HTML片段

    • 存在安全问题

    • 本网站内部数据可以使用，来自第三方的数据不可使用

      • 只有一个场景会使用：后台会用，比如有一个企业站，会发不企业的动态的新闻，这个时候会使用富文本编辑器，由于内容是自己人加的，所以可以放心使用。 自己攻击自己（自攻）

<div id='app'>
    <div v-html="html"></div>
</div>
​
<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      html:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

  • v-pre 填充原始信息（对应的是以前html中的标签“<pre>”）【凑数】

    • 跳过表达式的编译过程（先编译，后渲染），显示原始信息

<span v-pre>{{ this will not be compiled }}</span>

有些时候我们不想指令中的表达式进行运行，只需要给表达式加个引号。例如：

<div v-html='"msg"'></div>
<div v-html="'msg'"></div>

针对后续想让指令属性值不解析的操作都可以这么去做。

3、v-once

作用：只渲染元素或组件一次，之后元素或组件将失去响应式（数据层面）功能（对于数据的一锤子买卖）

Q & A：如何理解响应式？

  • 布局响应式：布局会随着设备尺寸的大小变化而变化的布局方式

  • 数据响应式：双向数据绑定

示例：

<div id="app">
    <h3>{{message}}</h3>
    <!-- 动态修改message值，此绑定将不会发生改变 -->
    <div v-once>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          message: '你好世界'
      }
  })
</script>
4、v-bind（重点）

作用：动态地绑定一个或多个attribute【实现可以允许我们在html内置的属性值中使用变量，主要是给非指令的属性去使用绑定动态可变的数据的】

场景：复用某个数据的时候会使用。例如：飞猪官网

<!-- v-bind：给非指令的属性使用变量 -->
<a v-bind:href="url" v-bind:target="target">{{alt}}</a>
​
<!-- v-bind的简写形式，实际使用这样的写法 -->
<a :href="url" :target="target">{{alt}}</a>

示例代码

<body>
    <div id="app">
        <a :href="url" :target="type" :alt="alt">{{alt}}</a>
        <a :href="url">{{alt}}</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            url: 'https://www.百度.com/',
            type: '_blank',
            alt: '青山官网'
        }
    })
</script>
5、v-on（重点）
5.1、基本使用（重点）

作用：绑定事件监听器（事件绑定）

示例：

<!-- 直接执行操作 -->
<!-- 常规写法 -->
<button v-on:click="num++"></button>
<!-- 缩写 -->
<button @click="num++"></button>
​
<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button>
<!-- 事件处理函数调用：常规调用 -->
<button @click="say('sth')"></button>

如果事件处理函数为自定义函数，则需要先进行定义，定义的方式如下：

...
data: {
    ...
},
methods: {
    functionName: function(arg1,arg2,arg3,...){
        // something to do
    },
    ....
}

注意：事件绑定v-on属性表达式中切记不能直接写业务逻辑，例如@click="alert('123')"。换言之，就咋行内上是不允许使用内置函数的，必须要调用自己定义的函数，然后你可以在自定义的函数内使用内置函数。

事件处理函数传参

<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button>
​
<!-- 事件处理函数调用：常规调用 -->
<button @click="say('hi',$event)"></button>

在不传递自定义参数的时候，上述两种用法均可以使用；但是如果需要传递自定义参数的话，则需要使用第2种方式。

事件对象的传递与接收注意点

  • 如果事件直接使用函数名并且不写小括号，那么默认会将事件对象作为唯一参数进行传递，可以在定义函数的位置直接定义一个形参，并且在函数内可以使用该形参

  • 如果使用常规的自定义函数调用（只要写了小括号），那么如果需要使用事件对象则必须作为最后一个参数进行传递，且事件对象的名称必须是“$event”

示例代码

<style>
    #big {
        width: 300px;
        height: 300px;
        background-color: red;
    }
    #mid {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    #sma {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
​
<body>
    <div id="app">
        <div id="big" @click="say('大娃',$event)">
            <div id="mid" @click="say('二娃',$event)">
                <div id="sma" @click="say('三娃',$event)"></div>
            </div>
        </div>
    </div>
</body>
​
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
​
        },
        methods:{
            say: function(name,event){
                console.log('你点了' + name);
            }
        }
    })
</script>
5.2、事件修饰符

含义：用来处理事件的特定行为（也是vue提供一些语法糖）

使用示例：

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!--  串联修饰符（连贯操作） -->
<button @click.stop.prevent="doThis"></button>

更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/api/#v-on

实例代码


    <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>
        .dawa {
            background: red;
            width: 400px;
            height: 400px;
        }
        .erwa {
            background: orange;
            height: 300px;
            width: 300px;
        }
        .sanwa {
            background: yellow;
            height: 200px;
            width: 200px;
        }
    </style>

    <div id="app">
        <!-- 套娃行为 -->
        <div class="dawa" @click="call_dawa">
            <div class="erwa" @click.stop="call_erwa">
                <div class="sanwa" @click.stop="call_sanwa">
​
                </div>
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
​
            },
            methods:{
                call_dawa(){
                    console.log('大娃：收到');
                },
                call_erwa(){
                    console.log('二娃：收到');
                },
                call_sanwa(){
                    console.log('三娃：你说啥');
                }
            }
        })
    </script>
5.3、按键修饰符

按键修饰符：按键事件

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

<!-- 只有在 `key` 是 `Enter` 回车键的时候调用 -->
<input @keyup.enter="submit">
​
<!-- 只有在 `key` 是 `Delete` 回车键的时候调用 -->
<input v-on:keyup.delete="handle">

更多按键修饰符请参考官方文档：事件处理 — Vue.js

6、循环分支指令
6.1、循环指令

作用：根据一组数组或对象的选项列表进行渲染。

指令：v-for

  • 数组遍历使用示例：

<!-- 模板部分 -->
<ul>
    <!-- 直接取值 -->
    <li v-for='item in fruits'>{{item}}</li>
    <!-- 带索引 -->
    <li v-for='(item,index) in fruits'>{{item}}{{index}}</li>
</ul>
​
<!-- JavaScript部分 -->
......
data: {
    fruits: ['apple','pear','banana','orange']
}
......

细节：key的作用，提高性能，不影响显示效果（如果没有id，可以考虑使用索引替代），切记key的值不能重复，只要遵循不重复的原则即可，值是什么无所谓。

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。

<ul>
    <li :key='item.id' v-for='(item,index) in fruits'>{{item}}</li>
</ul>

  • 对象遍历使用示例（了解）：

<!-- 模板部分 -->
<ul>
    <li v-for='(value,name,index) in obj'>{{value + '-' + name + '-' + index}}</li>
</ul>
​
<!-- JavaScript部分 -->
......
data: {
    obj: {
        username: 'zhangsan',
        age: 28,
        gender: 'male'
    }
}
......

示例代码：

<body>
    <div id="app">
        <div>
            <ul>
                <li :key="index" v-for="(item,index) in cars">{{item}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li :key="index" v-for="(item,key,index) in user">{{key}}：{{item}}</li>
            </ul>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            cars: ['bmw','aodi','benci','haima'],
            user: {
                username: 'zhangsan',
                gender: 'mele',//性别，sex
                age: 22
            }
        }
    })
</script>
6.2、分支指令

作用：根据表达式的布尔值(true/false)进行判断是否渲染/显示该元素

  • v-if

  • v-else

  • v-else-if

上述三个指令是分支中最常见的。根据需求，v-if可以单独使用，也可以配合v-else一起使用，也可以配合v-else-if和v-else一起使用。

  • v-show

v-show是根据表达式之真假值，切换元素的 display CSS属性（是根据表达式的布尔值来判断是否显示该元素）。

使用示例：

<!-- 模板部分 -->
<div v-if="score >= 90">
  优秀
</div>
<div v-else-if="score >= 80 && score < 90">
  良好
</div>
<div v-else-if="score >= 70 && score < 80">
  一般
</div>
<div v-else>
  不及格
</div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>
​
<!-- JavaScript部分 -->
......
data: {
    score: 88,
    flag:false
}
......

思考：v-if系列与v-show的区别是什么？

v-if：控制元素是否渲染

v-show：控制元素是否显示（已经渲染，display:none;）

v-if系列指令、v-show指令可以与v-for指令结合起来使用（循环+分支）。例如：

<ul>
    <li v-for='(v,k,i) in obj' v-show='v==25'>{{v}}</li>
</ul>

面试题：v-for与v-if谁的优先级高，能否一起使用？

答：v-for优先级高于v-if，虽然可以一起使用但是不建议一起使用。因为v-for的优先级大于v-if，在循环元素时，==每个元素都要进行v-if判断，但是最终显示的元素太少造成资源浪费==，所以不建议一起使用。在需要v-for与v-if一起使用时可以用v-show代替v-if

7、综合案例：简易购物车

案例效果

简易购物车案例效果

细节：

  • 展示基本的商品信息

  • 计算每个商品的小计

  • 商品数量的加、减操作

    • +：增加商品数量，同时更新小计

    • -：减少商品熟练，同时更新小计，如果本身为“1”，再点-号则需要移除商品

如果需要在Vue实例中访问自身data属性中的数据，可以使用以下方式：

  • this.xxxxx

  • this.$data.xxxxx

  • this._data.xxxxx

参考数据源

var cartData = [
    {
        id: 1,
        name: '小米',
        price: 100,
        num: 1
    },
    {
        id: 2,
        name: '华为',
        price: 200,
        num: 1
    },
    {
        id: 3,
        name: '联想',
        price: 300,
        num: 1
    }
]
参考核心代码

<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>购物车</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>
​
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in cartData" :key="item.id">
                <span>商品id：{{item.id}}</span>&emsp;&emsp; <span>商品名称：{{item.name}}</span>&emsp;&emsp;
                <span>商品单价：{{item.price}}</span>&emsp;&emsp; <span>购买数量：<button
                        @click="jian(item,index)">-</button>{{item.num}}<button
                        @click="item.num++">+</button></span>&emsp;&emsp; <span>小计：{{item.price * item.num}}</span>
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var cartData = [
            {
                id: 1,
                name: '小米',
                price: 100,
                num: 1
            },
            {
                id: 2,
                name: '华为',
                price: 200,
                num: 1
            },
            {
                id: 3,
                name: '联想',
                price: 300,
                num: 1
            }
        ]
        new Vue({
            el: "#app",
            data: {
                // 初始的数据
                cartData
            },
            methods: {
                jian(item, index) {
                    if (item.num === 1) {
                        // 弹窗
                        // if (confirm("这么好的商品，确定不要来一个吗？")) {
                        //     // 移除对应的元素
                        //     this.cartData.splice(index, 1)
                        // }
                        confirm("这么好的商品，确定不要来一个吗？") && this.cartData.splice(index, 1)
                    } else {
                        item.num--  // item.num = item.num - 1
                    }
                }
            }
        })
    </script>
</body>
​
</html>

&emsp;表示tab，一个顶四个&nbsp;

8、动态样式绑定
8.1、class样式绑定

  • 对象语法（用于控制开关切换）

<style>
/* CSS片段 */
.active {
    color: red;
}
</style>
​
<!-- HTML片段 -->
<div v-bind:class="{active: isActive}">class样式</div>
​
<script type='text/javascript'>
// JavaScript片段
data: {
    isActive: true
}
</script>

  • 数组写法

<style>
/* CSS片段 */
.active {
    color: red;
}
</style>
​
<!-- HTML片段 -->
<div v-bind:class="[activeClass]">数组写法</div>
​
<script type='text/javascript'>
// JavaScript片段
data: {
    activeClass: 'active'
}
</script>
8.2、style样式处理

  • 对象语法

<!-- HTML片段 -->
<div:style="{color: redColor, fontSize: '20px'}">对象写法</div>
​
<script type='text/javascript'>
// JavaScript片段
data: {
    redColor: 'red'
}
</script>

  • 数组语法

<!-- HTML片段 -->
<div v-bind:style="[color, fontSize]">数组写法</div>
​
<script type='text/javascript'>
// JavaScript片段
data: {
    color: {
        color: 'red'
    },
    fontSize: {
        'font-size': '20px'
    }
}
</script>
9、v-model（重点）

作用:表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。

单向与双向数据绑定

v-model会忽略所有表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。

  • 普通文本框上的使用

<div id='app'>
    <p>{{message}}</p>
    <input type='text' v-model='message'>
​
    <!--
    v-model其实是`语法糖`,它是下面这种写法的简写
    语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用
    -->
    <input type='text' :value='msg' @input='msg=$event.target.value'/>
</div>
​
<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        msg: 'message默认值'
    }
})
</script>

  • 多行文本框上的使用

<div id='app'>
    <textarea v-model="message"></textarea>
</div>
​
<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        message: '我是多行文本内容'
    }
})
</script>

注意：在多行文本框中使用插值表达式无效（此时，其只能接受数据，不能改变数据）

  • 单个复选框上的使用

<div id='app'>
    <input type="checkbox" v-model="checked">
</div>
​
<script type='text/javascript'>
new Vue({
    el: '#app',
    data:{
        checked:true
    }
})
</script>

  • 多个复选框上的使用

<div id='app'>
    <input type="checkbox" value="html" v-model="checkedNames">
    <input type="checkbox" value="css" v-model="checkedNames">
    <input type="checkbox" value="js" v-model="checkedNames">
</div>
​
<script type='text/javascript'>
new Vue({
    el: '#app',
    data:{
        // 如果数组中有对应的value值，则此checkbox会被选中
        checkedNames:[]
    }
})
</script>

注意：此种用法需要input标签提供value属性，并且需要注意属性的大小写要与数组元素的大小写一致

  • 单选按钮上的使用

<div id='app'>
    男<input type="radio" name="sex" value="男" v-model="sex">
    女<input type="radio" name="sex" value="女" v-model="sex">
</div>
​
<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        sex: '女'
    }
})
</script>

  • 下拉框上的使用

<div id='app'>
    <select v-model="selected">
        <option>请选择</option>
        <option>HTML</option>
        <option>CSS</option>
        <option>JS</option>
    </select>
</div>
​
<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        selected: 'JS'
    }
})
</script>

  • 修饰符

.lazy：默认情况下Vue的数据同步采用input事件，使用.lazy将其修改为失去焦点时触发

.number：自动将用户的输入值转为数值类型（如果能转的话）

.trim：自动过滤用户输入的首尾空白字符

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

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

相关文章

C++ 图解二叉树非递归后序 + 实战力扣题

C++ 图解二叉树非递归后序 + 实战力扣题

145.二叉树的后序遍历 145. 二叉树的后序遍历 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<int> postorderTraversal(TreeNode* root) {stack<TreeNode*> st;vector<int> vec;if(root NULL) return vec;TreeNode* guard root…
阅读更多...
Golang 字符串处理汇总

Golang 字符串处理汇总

1. 统计字符串长度&#xff1a;len(str) len(str) 函数用于统计字符串的长度&#xff0c;按字节进行统计&#xff0c;且该函数属于内置函数也不用导包&#xff0c;直接用就行&#xff0c;示例如下&#xff1a; //统计字符串的长度,按字节进行统计: str : "golang你好&qu…
阅读更多...
【ATTCK】MITRE Caldera -前瞻规划器

【ATTCK】MITRE Caldera -前瞻规划器

CALDERA是一个由python语言编写的红蓝对抗工具&#xff08;攻击模拟工具&#xff09;。它是MITRE公司发起的一个研究项目&#xff0c;该工具的攻击流程是建立在ATT&CK攻击行为模型和知识库之上的&#xff0c;能够较真实地APT攻击行为模式。 通过CALDERA工具&#xff0c;安全…
阅读更多...
有奖 ｜ Python 开发者 2023 年度调查

有奖 ｜ Python 开发者 2023 年度调查

你好&#xff0c;我是 EarlGrey&#xff0c;一名双语学习者&#xff0c;会一点编程&#xff0c;目前已翻译出版《Python 无师自通》、《Python 并行编程手册》等书籍。 点击上方蓝字关注我&#xff0c;持续接收优质好书、高效工具和赚钱机会&#xff0c;一起提升认知和思维。 1…
阅读更多...
2023年【电工（初级）】考试内容及电工（初级）复审模拟考试

2023年【电工（初级）】考试内容及电工（初级）复审模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 电工&#xff08;初级&#xff09;考试内容是安全生产模拟考试一点通总题库中生成的一套电工&#xff08;初级&#xff09;复审模拟考试&#xff0c;安全生产模拟考试一点通上电工&#xff08;初级&#xff09;作业手…
阅读更多...
C++ Qt 学习（六）：Qt http 编程

C++ Qt 学习（六）：Qt http 编程

1. http 基础 HTTP 基础教程C Web 框架 drogonoatpp 2. C Qt 用户登录、注册功能实现 login_register.h #pragma once#include <QtWidgets/QDialog> #include "ui_login_register.h" #include <QNetworkReply>class login_register : public QDialog…
阅读更多...
【MySQL】使用C/C++访问MySQL

【MySQL】使用C/C++访问MySQL

文章目录 一. 环境准备1. 方法一2. 方法二 二. MySQL接口介绍1. 初始化/连接/关闭2. 执行操作3. 查找操作 结束语 本篇环境是云服务器Centos上的MySQL 版本; 一. 环境准备 使用C/C访问MySQL&#xff0c;首先需要MySQL的开发者库 这里提供两种方法&#xff1a; 1. 方法一 …
阅读更多...
【Unity每日一记】“调皮的协程”，协程和多线程的区别在哪里

【Unity每日一记】“调皮的协程”，协程和多线程的区别在哪里

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…
阅读更多...
【MySQL系列】 第二章 · SQL（下）

【MySQL系列】 第二章 · SQL（下）

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…
阅读更多...
JSP运行环境搭建

JSP运行环境搭建

将安装JSP引擎的计算机称作一个支持JSP的Web服务器。这个服务器负责运行JSP&#xff0c;并将运行结果返回给用户。 JSP的核心内容之一就是编写JSP页面,JSP页面是Web应用程序的重要组成部分之一。一个简单Web应用程序可能只有一个JSP页面,而一个复杂的Web应用程序可能由许多JSP…
阅读更多...
【操作系统】考研真题攻克与重点知识点剖析 - 第 3 篇：内存管理

【操作系统】考研真题攻克与重点知识点剖析 - 第 3 篇：内存管理

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…
阅读更多...
首发！文心一言插件精品课，共创大模型应用新范式

首发！文心一言插件精品课，共创大模型应用新范式

“AI原生应用要能解决过去解决不了、解决不好的问题&#xff0c;应用才是大模型存在的意义。”越来越多人用AI打造自己的生产力工具、专业领域行业助手、游戏娱乐影音大师……你是否跃跃欲试却无从下手&#xff1f;机会来了&#xff01;《文心一言插件开发课》震撼来袭&#xf…
阅读更多...
STM32--系统滴答SysTick

STM32--系统滴答SysTick

一、SysTick是什么&#xff1f; Systick定时器是一个24bit的倒计时&#xff08;向下计数&#xff09;定时器&#xff0c;功能就是实现简单的延时。 SysTick 是一种系统定时器&#xff0c;通常在嵌入式系统中使用。它是 ARM Cortex-M 处理器的一个特殊定时器&#xff0c;用于提…
阅读更多...
基于樽海鞘群算法优化概率神经网络PNN的分类预测 - 附代码

基于樽海鞘群算法优化概率神经网络PNN的分类预测 - 附代码

基于樽海鞘群算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于樽海鞘群算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于樽海鞘群优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…
阅读更多...
微信聊天，收到二维码图片就自动帮你提取出来的方法

微信聊天，收到二维码图片就自动帮你提取出来的方法

10-3 如果你是二维码收集的重度用户&#xff0c;那我非常推荐你好好阅读本文&#xff0c;也许可以帮你解决你的问题&#xff0c;比如做网推的人&#xff0c;需要常年混迹在各种微信群&#xff0c;那如何在各个微信群中收集到群友分享出来的二维码&#xff0c;并且要立即保存出…
阅读更多...
Pyside6/PYQT6如何实现无边框设计，解决无边框窗口无法移动的问题

Pyside6/PYQT6如何实现无边框设计，解决无边框窗口无法移动的问题

文章目录 💢 问题 💢💯 解决方案 💯🍔 准备工作🐾 操作步骤🐾 窗口无边框🐾 窗口透明🐾 实现窗口可移动⚓️ 相关链接 ⚓️💢 问题 💢 有时候我们需要一个无边框的UI设计来实现/美化一些功能，如：制作一个桌面时钟，进度条展示等，要实现无边框其实很简…
阅读更多...
基于springboot实现桥牌计分管理系统项目【项目源码】计算机毕业设计

基于springboot实现桥牌计分管理系统项目【项目源码】计算机毕业设计

基于springboot实现桥牌计分管理系统演示 JAVA简介 JavaScript是一种网络脚本语言&#xff0c;广泛运用于web应用开发&#xff0c;可以用来添加网页的格式动态效果&#xff0c;该语言不用进行预编译就直接运行&#xff0c;可以直接嵌入HTML语言中&#xff0c;写成js语言&#…
阅读更多...
Liunx命令汇总

Liunx命令汇总

一.用户相关命令 1.1账号管理 创建用户&#xff1a; useradd &#xff08;选项&#xff09; 用户名用户口令&#xff1a; passwd &#xff08;选项&#xff09; 用户名修改用户&#xff1a; usermod 选项 用户名删除用户&#xff1a; userdel &#xff08;选项&#xff09; 用…
阅读更多...
SpringBootWeb案例——Tlias智能学习辅助系统(3)——登录校验

SpringBootWeb案例——Tlias智能学习辅助系统(3)——登录校验

前一节已经实现了部门管理、员工管理的基本功能。但并没有登录&#xff0c;就直接访问到了Tlias智能学习辅助系统的后台&#xff0c;这节来实现登录认证。 目录 登录功能登录校验(重点)会话技术会话跟踪方案一 Cookie&#xff08;客户端会话跟踪技术&#xff09;会话跟踪方案二…
阅读更多...
微信支付服务商消费者投诉及时处理与商户违规及时通知，支持多服务商

微信支付服务商消费者投诉及时处理与商户违规及时通知，支持多服务商

大家好&#xff0c;我是小悟 微信直连商户处理消费者投诉的功能解决了很多商户对于投诉处理不及时而导致商户号出现异常的问题&#xff0c;可以说解决了实实在在的问题。 很多小伙伴私信说自己是服务商角色&#xff0c;也需要微信支付服务商处理消费者投诉的功能&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023