Vue 快速入门：Vue初级

image.png
image.png
image.png

image.png

语法规则

前端渲染

image.png
渲染有几种方式：原生js、js模板、Vue模板语法

原生js

使用字符串拼接

js模板语法

Vue.js 模板语法概述

Vue.js 是一个用于构建用户界面的渐进式框架，其模板语法非常灵活和直观。Vue 的模板语法基于 HTML，可以通过指令、插值和特殊属性来实现数据绑定和事件处理。以下是 Vue.js 2 的模板语法的主要概念和示例。

1. 插值（Interpolation）

插值用于在模板中显示数据，可以使用双大括号 {{ }} 进行文本插值，或者使用 v-bind 进行属性插值。

<div id="app">
  <p>{{ message }}</p>
  <p v-bind:title="title">Hover to see the title</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!',
    title: 'This is a title'
  }
})
</script>
2. 指令（Directives）

指令是带有 v- 前缀的特殊特性，用来在模板中做响应式数据绑定。常用指令包括 v-if, v-for, v-show, v-model, v-bind, v-on 等。

  • 条件渲染：v-if, v-else-if, v-else
<div id="app">
  <p v-if="seen">Now you see me</p>
  <p v-else>Now you don't</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>
  • 列表渲染：v-for
<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' }
    ]
  }
})
</script>
  • 事件处理：v-on
<div id="app">
  <button v-on:click="sayHello">Click me</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue!');
    }
  }
})
</script>
  • 双向绑定：v-model
<div id="app">
  <input v-model="message" placeholder="Edit me">
  <p>Message is: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>
3. 修饰符（Modifiers）

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent, .stop, .capture, .self, .once, .native, .number, .trim。

<div id="app">
  <form v-on:submit.prevent="onSubmit">
    <button type="submit">Submit</button>
  </form>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    onSubmit: function() {
      alert('Form submitted!');
    }
  }
})
</script>
4. 计算属性和侦听器
  • 计算属性：用来对模板中复杂逻辑进行计算并返回结果，类似于 data 属性，但会基于其依赖项缓存结果。
<div id="app">
  <p>Reversed message: {{ reversedMessage }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
})
</script>
  • 侦听器：用于监听数据属性的变化并执行相应的操作。
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal);
    }
  }
})
</script>

以上是 Vue.js 2 模板语法的基本介绍和一些示例代码。这些概念和指令使得 Vue.js 非常灵活和易于使用，适用于各种规模的应用开发。

  • 插值表达式
  • 指令
  • 事件绑定
  • 属性绑定
  • 样式绑定
  • 分支循环结构
指令

什么是指令：

  • 什么是自定义属性
  • 指令的本质就是自定义属性
  • 指令的格式：以v-开始（比如V-cloak）

v-clock指令用法

在频繁刷新的时候可能会出现插值表达式，造成用户体验不好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        [v-clock]{
             display:none;
         }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div v-clock>{{msg}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // v-clock指令用法
    // 1.提供样式
    // [v-clock]{
    //     display:none;
    // }
    // 2.在插值表达式所在的标签添加v-cloak指令
    var vm =new Vue({
        el:'#app',
        data:{
            msg:'HelloWord'
        }
    });
</script>
</body>
</html>

使用v-clock就可以不显示插值表达式，刷新页面直接出来数据
背后原理：

先通过样式隐藏内容，在内存中进行值的替换，替换好之后在显示最终的结果。

v-text 纯文本信息 v-html(容易遭遇跨站脚本攻击) v-pre 填充原始信息
v-once:如果显示的信息后期不需要再修改可以使用，可以提高性能。
v-model 双向绑定
image.png

MVVM设置思想

M(model)
V(view)
VM(View-Model)
image.png
重点是双向绑定

事件绑定

v-on指令语法 当然因为经常使用还提供一种简写方法@
当然在vue中我们可以给时间绑定一个方法写在，methods里面
image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        [v-clock]{
             display:none;
         }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
  <div>{{num}}</div>
    <div>
        <button v-on:click="num++">增加</button>
        <button @click="num++">点击1</button>
        <button @click="handle">点击1</button>
        <button @click="handle()">点击1</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vm =new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            handle:function (){
                //这里的this是vue的实例对象
                console.log(this)
                this.num++
            }
        }
    });
</script>
</body>
</html>

事件参数传递
1.如果时间直接绑定函数名称，那末默认会传递事件对象作为时间函数的第一个函数
2.如果事件绑定函数调用，事件对象必须作为最后一个参数显示传递，必须对象名称必须$event

 <button @click="handle($event)">点击1</button>

事件修饰符

image.png

按键修饰符

image.png

自定义按键修饰符

全局config.keyCodes对象
Vue.config.keyCodes.f1 = 112;
自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event对象中keyCode值
Vue.config.keyCodes.aaa = 65

Vue动态处理属性

v-bind指令用法
跳转
缩写形式
跳转

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        [v-clock]{
            display:none;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <a v-bind:href="url">百度</a>
    <button @click="handle"></button>
    //v-model事件双向绑定其实就是使用了v-bind:value,和@input
    <div>{{msg}}</div>
    <input type="text" v-bind:value="msg" @input="handle">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vm =new Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com',
            msg:'hello'
        },
        methods:{
            handle:function (event){
                //修改url地址
                this.url='https://www.imooc.com/';
                this.msg = event.target.value;
            }
        }
    });
</script>
</body>
</html>

样式绑定

控制类名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: orange;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div v-bind:class="{active: isAcrive,error: isError}"></div>
    <button @click="handle">切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vm =new Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com',
            msg:'hello',
            isAcrive:true,
            isError:true
        },
        methods:{
            handle:function (){
                //控制isActive在true和false之间切换
                this.isAcrive = !this.isAcrive;
            }
        }
    });
</script>
</body>
</html>

image.png

style样式处理

image.png

分支循环结构

  • v-if
  • v-else
  • v-else-fi
  • v-show
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        [v-clock]{
            display:none;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score<90&&score>=80">良好</div>
    <div v-if="score<80&&score>=60">一般</div>
    <div v-else>比较差</div>
    <div v-show="flag">11</div>
    <button @click="handle">取反</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vm =new Vue({
        el:'#app',
        data:{
            score:76,
            flag:false
        },
        methods:{
            handle:function (){
                this.flag = !this.flag
            }
        }
    });
</script>
</body>
</html>

循环结构

image.png
在Vue中如果有对象遍历最好加上key这样的话就不会报错，唯一的key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        [v-clock]{
             display:none;
         }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div>水果列表</div>
    <ul>
        <li v-for="item in fruits">{{item}}</li>
        <li v-for="(item,index) in fruits">{{item + '____'+ index}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vm =new Vue({
        el:'#app',
        data:{
            fruits:['apple','organg','banana']
        },
        methods:{

        }
    });
</script>
</body>
</html>

image.png
image.png

Vue的常用特性

  • 表单操作
  • 自定义指令
  • 计算属性
  • 过滤器
  • 监听器
  • 生命周期

表单操作

表单修饰符

  • number:转化为数值
  • trim:去掉开始和结尾的空格
  • lazy：将input时间切换为change事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <input type="text" v-model.number="age">
    <input type="text" v-model.trim="text">
    <input type="text" v-model.lazy="msg">
    <div>{{msg}}</div>
    <button @click="handle">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            age:'',
            text:'',
            msg:''
        },
        methods:{
            handle:function (){
                console.log(this.age+1)
                console.log(this.text)
            }
        }
    })
</script>
</body>
</html>

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <input type="text" v-focus>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.directive('focus',{
        inserted:function (el){
            //el表示指令绑定的元素
            el.focus();
        }
    })
    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })
</script>
</body>
</html>

inserted是钩子函数，当dom绑定的时候使用运行
image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <input type="text" v-colors="msg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //自定义指令带参数
    Vue.directive('colors',{
        bind:function (el,bind){
           el.style.backgroundColor = bind.value.color;
           //通过携带参数来控制指令的一些具体行为
        }
    });
    var vm = new Vue({
        el:'#app',
        data:{
            msg:{
                color:'orange'
            }
        },
        methods:{

        }
    })
</script>
</body>
</html>

局部指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <input type="text" v-colors="msg">
    <input type="text" v-focus>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //自定义指令带参数
    var vm = new Vue({
        el:'#app',
        data:{
            msg:{
                color:'orange'
            }
        },
        methods:{

        },
        directives:{
            colors:{
                bind:function (el,bind){
                    el.style.backgroundColor = bind.value.color;
                    //通过携带参数来控制指令的一些具体行为
                }
            },
            focus:{
                inserted:function (el){
                    el.focus();
                }
            }
        }
    })
</script>
</body>
</html>

局部指令应用范围是有所限制的，全局指令是没有限制的

计算属性computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div>{{reversString}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello '
        },
        methods:{

        },
        //计算属性，让模板变得更加简单
        computed:{
            reversString:function (){
                return this.msg.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

计算属性computed和methods方法存在什么差异
**
缓存特性在比较耗时的计算节省性能，计算属性他是基于依赖来做缓存的，当发布存在缓存机制。

计算属性依赖：data

侦听器

image.png
数据变化时异步或者开销比较大

侦听器用法

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div>
        <span>名</span>
        <span>
        <input type="text" v-model="firstName">
    </span>
    </div>
    <div>
        <span>名</span>
        <input type="text" v-model="lastName">
    </div>
    <div>{{msg}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el:'#app',
        data:{
            firstName:'Jim',
            lastName:'Green',
            msg:''
        },
        watch:{
            firstName: function (val){
                this.msg = val + '' + this.lastName;
            },
            lastName: function (val){
                this.msg = this.firstName + '' + val;
            }
        }

    })
</script>
</body>
</html>

监听器属性的方法必须和数据里面的方法名称一致，这样的监听才可以实现

监听器应用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div>
        <span>用户名：</span>
        <span>
            <input type="text" v-model.lazy="uname">
        </span>
        <span>{{tip}}</span>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.采用监听器用户名称变化
    //2.调用后台接口验证
    //3.根据验证结果调整提示信息

    var vm = new Vue({
        el:'#app',
        data:{
            uname:'',
            tip:''
        },
        methods:{
            checkName:function (uname){
                //调用接口，但是可以使用定时任务方式模拟接口调用
                var that = this;
                setTimeout(function (){
                    if (uname == 'admin'){
                        that.tip = '用户名存在请更换一个';
                    }else{
                        that.tip = '用户名可以使用';
                    }
                },2000)
            }
        },
        watch:{
            uname:function (val){
                 //调用后台接口验证用户名合法性
                this.checkName(val);
                //修改提示信息
                this.tip = '正在验证。。。';
            }
        },

    })
</script>
</body>
</html>

过滤器

作用：格式化数据，比如将字符串格式化到首字母大写，将日期格式化为指定的格式等。
image.png

自定义过滤器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <div>{{ msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div :abc="msg| upper">测试数据</div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //过滤器
    // Vue.filter('upper',function (val){
    //     return val.charAt(0).toUpperCase()+val.slice(1);
    // });
    // Vue.filter('lower',function (val){
    //     return val.charAt(0).toLowerCase()+val.slice(1);
    // });
    var vm = new Vue({
        el:'#app',
        data:{
            msg:''
        },
        filters:{
            upper: function (val){
                return val.charAt(0).toUpperCase()+val.slice(1);
            }
        }
    });
</script>
</body>
</html>
带参数的过滤器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
    <div>{{date | format('yyyy-MM-dd')}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //过滤器
    Vue.filter('format',function (val,arg){
        if (arg == 'yyyy-MM-dd'){
            var ret = '';
            ret += val.getFullYear()+'-'+(val.getMonth()+1) + '-' + val.getDate();
            console.log(ret)
            return ret;
        }
        console.log(1)
    })
    var vm = new Vue({
        el:'#app',
        data:{
            date:new Date()
        },

    });
</script>
</body>
</html>

生命周器

主要阶段

  • 挂载(初始化相关属性)
    • beforeCreate
    • created
    • beforeMount
    • mounted
  • 更新（元素或组线的变更操作）
    • beforeUpdate
    • updated
  • 销毁（销毁相关属性）
    • beforeDestroy
    • destroyed

image.png
Vue实例产生会经过8个生命周期

Vue中对于数组的新概念

变异方法（修改原始数据）

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
替换数组（形成新的数组）
  • filter()
  • concat()
  • slice()

变异方法都会影响到数组的原始数据，替换方法不会影响到数组的原始数据他会形成一个新的数组。

修改响应式数据

  • Vue.set(vm.items,indexOfltem,newValue)
  • vm.$set(vm.items,indexOfItem,newValue)

1.参数一表示要处理的数组名称
2.参数2表示要处理的数组索引
3.参数3表示要处理的数组的值

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

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

相关文章

达梦sql中参数个数太多导致出现SOH等特殊字符报错无效的序列号是不是达梦的bug

达梦sql中参数个数太多导致出现SOH等特殊字符报错无效的序列号是不是达梦的bug

mybatis的Mapper.xml中如下&#xff1a; in中的参数大概有1万6千多个&#xff0c;分成每1000个一组拼接成sql&#xff0c;然而在达梦中执行时报如下: Caused by: dm.jdbc.driver.DMException: Invalid sequence noat dm.jdbc.driver.DBError.throwException(DBError.java:710)…
阅读更多...
号卡极团分销管理系统 ue_serve.php 任意文件上传漏洞复现

号卡极团分销管理系统 ue_serve.php 任意文件上传漏洞复现

0x01 产品简介 号卡极团分销管理系统，同步对接多平台，同步订单信息，支持敢探号一键上架，首页多套UI+商品下单页多套模板，订单查询支持实时物流信息、支持代理商自定义域名、泛域名绑定，内置敢探号、172平台、号氪云平台第三方接口以及号卡网同系统对接！ 0x02 漏洞概述…
阅读更多...
web入门练手案例（一）

web入门练手案例（一）

下面是一下web入门案例和实现的代码&#xff0c;带有部分注释&#xff0c;倘若代码中有任何问题或疑问&#xff0c;欢迎留言交流~ 新闻页面 案例描述&#xff1a; 互联网的发展使信息的传递变得方便、快捷&#xff0c;浏览新闻称为用户获取信息的重要渠道。下面将实现一个简…
阅读更多...
【doghead】mac与wsl2联通

【doghead】mac与wsl2联通

mbp 设置为发送端，那么要能与windows上 wsl2的ubutnu通信。 mbp的 uv 构建ok zhangbin@zhangbin-mbp-2  ~/tet/Fargo/zhb-bifrost/Bifrost-202403/worker/third_party/libuv   main clion使用lldb cmake构建 更新git2.45.0啊
阅读更多...
从零开始开发企业培训APP：在线教育系统源码剖析

从零开始开发企业培训APP：在线教育系统源码剖析

今天&#xff0c;小编将深入剖析企业培训APP的开发&#xff0c;从零开始为企业构建一个高效、实用的在线教育系统。 一、需求分析 1.主要功能需求 包括但不限于&#xff1a; -用户管理 -课程管理 -学习计划 -互动功能 -考核评估 -统计分析 二、技术选型 1.前端技术 …
阅读更多...
将jar打包成exe可安装程序，并在html页面唤醒

将jar打包成exe可安装程序，并在html页面唤醒

一、exe4j将jar打包成exe 1.exe4j下载 下载地址&#xff1a;https://www.ej-technologies.com/download/exe4j/files 2.exe4j打包jar 2.1. welcome 可以选择历史配置&#xff0c;新增则直接下一步 2.2. project type选择“jar in exe” mode 2.3. application info设置应用…
阅读更多...
17-LINUX--线程与fork()

17-LINUX--线程与fork()

一.多线程程序fork() 多线程出现fork()后&#xff0c;只复制一条执行路径&#xff0c;是fork()所在的那条执行路径 主程序fork()示例代码&#xff1a; include<stdio.h> #include<stdlib.h> #include<string.h> #include<pthread.h> #include<un…
阅读更多...
港股大反攻结束了吗？

港股大反攻结束了吗？

‘港股长线见顶了吗&#xff1f;今天开盘就是最高点&#xff0c;然后一路跳水&#xff0c;市场又是一片恐慌。到底是健康的技术性回调&#xff0c;还是市场已经见顶&#xff1f; 港股此轮“大反攻”中&#xff0c;科网股表现十分亮眼。今日港股盘后&#xff0c;阿里巴巴、腾讯…
阅读更多...
MySQL表的增删改查(1)

MySQL表的增删改查(1)

目录 一. . 新增 insert 1.简单方法 2. 指定列插入 3. 一次插入多行记录 二. 查询 select 1.最简单的查询, 全列查询 2. 指定列查询 ​编辑 3. 表达式查询 1)简单表达式查询 2)带别名的表达式查询 4. 去重查询 5. 带有排序的查询 1)单个列排序 2)多个列排序: ​…
阅读更多...
Arduino-ILI9341驱动-SPI接口TFTLCD实现触摸功能系列之触控开关二

Arduino-ILI9341驱动-SPI接口TFTLCD实现触摸功能系列之触控开关二

Arduino-ILI9341驱动-SPI接口TFTLCD实现触摸功能系列之触控开关二 1.概述 这篇文章在触摸屏上绘制一个开关&#xff0c;通过点击开关实现控制灯的开关功能。 2.硬件 硬件连接参考第一篇文章介绍 Arduino-ILI9341驱动-SPI接口TFTLCD实现触摸功能系列之获取触控坐标一 3.实现…
阅读更多...
JETBRAINS IDES 分享一个2099通用试用码，支持一键升级！CLion 2024 版

JETBRAINS IDES 分享一个2099通用试用码，支持一键升级！CLion 2024 版

文章目录 废话不多说上教程&#xff1a;&#xff08;动画教程 图文教程&#xff09;一、动画教程激活 与 升级&#xff08;至最新版本&#xff09; 二、图文教程 &#xff08;推荐&#xff09;Stage 1.下载安装 toolbox-app&#xff08;全家桶管理工具&#xff09;Stage 2 : 下…
阅读更多...
一直可以正常 git push 代码，突然就不行了，提示端口22错误，访问超时！

一直可以正常 git push 代码，突然就不行了，提示端口22错误，访问超时！

大家好&#xff0c;我是 Just&#xff0c;这里是「设计师工作日常」&#xff0c;今天分享的是当使用 git 时&#xff0c;突然提示端口错误&#xff0c;然后访问超时&#xff0c;我解决的过程以及最后的解决方案。 最新文章通过公众号「设计师工作日常」发布。 目录 不好意思&a…
阅读更多...
手撕C语言题典——环形链表的约瑟夫问题

手撕C语言题典——环形链表的约瑟夫问题

目录 前言 一.故事背景 二.题目 ​编辑三.思路 1&#xff09;数组 ​编辑2&#xff09; 循环链表 四.代码实现 搭配食用更佳哦~~ 数据结构之单单单——链表-CSDN博客 数据结构之单链表的基本操作-CSDN博客 前面学了单链表的相关知识&#xff0c;我们来尝试做一下关于…
阅读更多...
用友hr软件统一认证与致远OA单点登录身份周期管理怎么做

用友hr软件统一认证与致远OA单点登录身份周期管理怎么做

一、引言 随着企业信息化建设的深入&#xff0c;各类管理软件如用友HR、致远OA等已经成为事业单位日常运营不可或缺的工具。用友HR软件以其强大的人力资源管理功能&#xff0c;帮助企事业单位实现员工信息的集中管理&#xff1b;而致远OA则以其便捷的办公流程管理&#xff0c;…
阅读更多...
数据中心网络随想-电路交换

数据中心网络随想-电路交换

数据中心网络扩容并不容易&#xff0c;涉及设备上架&#xff0c;切换等又硬又大的动作&#xff0c;期间对所有应用都会产生影响&#xff0c;所以理论上 “加钱加硬件” 这种看起来很简单的事实际上真不如 “写一个随时部署升级的端到端拥塞控制算法” 更容易实施。 傍晚绕小区…
阅读更多...
【以规划为导向的自动驾驶】Planning-oriented Autonomous Driving

【以规划为导向的自动驾驶】Planning-oriented Autonomous Driving

ABSTRACT 研究背景&#xff1a; 现代自动驾驶系统是顺序化地排列多个任务模块, 近期的主流方法&#xff1a; ①为单个任务部署独立模型 ②设计具有分离式头部的多任务(multi-task)范式。 但是&#xff0c;这些方法会累积误差或任务间协同不足而不利于自动驾驶。 作者认为重…
阅读更多...
nginx 配置域名SSL证书HTTPS服务

nginx 配置域名SSL证书HTTPS服务

下载 上传根目录 /home/wwwroot/xx.com/ssl 从新执行 添加域名命令 选择添加SSL SSL Certificate file: 填写 完整目录 PEM文件地址 SSL Certificate Key file:填写 完整目录 key文件地址
阅读更多...
鸿蒙布局Column/Row/Stack

鸿蒙布局Column/Row/Stack

鸿蒙布局Column/Row/Stack 简介我们以Column为例进行讲解1. Column({space: 10}) 这里的space: 10&#xff0c;表示Column里面每个元素之间的间距为102. width(100%)&#xff0c;height(100%) 表示宽高占比3. backgroundColor(0xffeeeeee) 设置背景颜色4. padding({top: 50}) 设…
阅读更多...
如何用Rust获取本机CPU、内存在Web网页中显示？

如何用Rust获取本机CPU、内存在Web网页中显示？

目录 一、需求描述 二、具体操作步骤 三、知识点 1、systemstat 2、Actix 一、需求描述 需求&#xff1a; 1、需要使用Rust进行后端开发获取本机CPU和内存信息&#xff1b; 2、使用WEB框架发布API&#xff1b; 3、然后使用HTML/CSS/JavaScript进行前端开发&#xff0…
阅读更多...
网络安全公司观察，看F5如何将安全化繁为简

网络安全公司观察，看F5如何将安全化繁为简

应用无处不在的当下&#xff0c;从传统应用到现代应用再到边缘、多云、多中心的安全防护&#xff0c;安全已成为企业数字化转型中的首要挑战。根据IDC2023年《全球网络安全支出指南》&#xff0c;2022年度中国网络安全支出规模137.6亿美元&#xff0c;增速位列全球第一。有专家…
阅读更多...
最新文章

Copyright @ 2022~2023