Vue入门——核心知识点

简介

Vue是一套用于构建用户界面的渐进式JS框架。

  • 构建用户界面：就是将后端返回来的数据以不同的形式(例如：列表、按钮等)显示在界面上。
  • 渐进式：就是可以按需加载各种库。简单的应用只需要一个核心库即可，复杂的应用可以按照需求引入各种Vue插件。

特点

  1. 采用组件化模式，提高代码复用率、且让代码更好维护。
  2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率。

入门案例

<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="root">
        <h1>Hello {{name}}</h1>//{{name}} 为vue里面的模板
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //容器与vue实例只能时一对一的关系
        new Vue({
            el:"#root",//通常为ucss选择器
            data:{
                name:"Vue"
            }
        })

        //root已经被第一个vue接管了，因此这个vue实例是无效的
        // new Vue({
        //     el:"#root",//通常为ucss选择器
        //     data:{
        //         name:"Vue1"
        //     }
        // })

    </script>    
</body>
  • 总结：
  1. Vue实例和容器是一对一的关系
  2. 真实开发过程中只有一个Vue实例，并且会配合组件一起使用
  3. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
  4. 一旦data中的数据发生变化，那么页面中用到该数据的地方也会自动更新

模板语法

Vue模板语法分为2大类：

  1. 插值语法：
    功能：用于解析标签体内容。
    写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

  2. 指令语法：
    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
    举例：v-bind:href='xxx’或简写为:href=‘xxx’，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
    备注：Vue中有很多的指令，且形式都是：v-???。

<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="root">
        <h1>Hello {{name}}</h1>
        <a v-bind:href="url">点我</a>//v-bind是数据单向绑定的
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //容器与vue实例只能时一对一的关系
        new Vue({
            el:"#root",//通常为ucss选择器
            data:{
                name:"Vue",
                url:"https://www.baidu.com"
            }
        })
    </script>    
</body>

数据绑定

数据绑定分为双向数据绑定与单项数据绑定。这点与Android中的jetpack组件databinding一致。毕竟Vue也是采用了MVVM模型。

  • 单向绑定(v-bind):数据只能从data流向页面。
  • 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
    备注：
    1. 双向绑定一般都应用在表单类元素上（如：input、select等）。
    2. v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。
<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"/><br/>//input组件里的内容改变不会导致vue里面的存储的数据改变

//v-model只能用于表单类元素中(输入类元素)
        双向数据绑定：<input type="text" v-model:value="name"/><br/>//input组件里的内容改变会导致vue里面的存储的数据改变
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //容器与vue实例只能时一对一的关系
        new Vue({
            el:"#root",//通常为ucss选择器
            data:{
                name:"Vue",
                url:"https://www.baidu.com"
            }
        })
    </script>    
</body>

el与data的两种写法

  • el
 const v=new Vue({
 //1.第一种写法
   el:"#root",//通常为ucss选择器
      data:{
          name:"Vue",
          url:"https://www.baidu.com"
      }
  })
//第二种写法
v.$mount("#root")
  • data
//第一种写法：
 data:{
   name:"Vue",
   url:"https://www.baidu.com"
  }

//第二种写法：
data:function(){
   console.log('@@@',this)//此处的this是Vue实例
   return{
      name :"hello world"
   }
}

//可以简写为：
data{
   console.log('@@@',this)//此处的this是Vue实例
   return{
      name :"hello world"
   }
}

一个重要原则：由Vue管理的函数，一定不要写箭头函数，因为箭头函数是没有自己的this对象的，只能往外找(箭头函数的this对象是window)，一旦写了箭头函数，函数里面的this就不再是Vue实例了。

MVVM模型

  • M：模型（model）：data中的数据
  • V：视图（View）：模板代码
  • VM：视图模型（ViewModel）：Vue实例

在这里插入图片描述

总结：

  1. data中所有的属性，最后都出现在了vm上。
  2. vm身上的所有属性以及Vue原型上的所有属性，在Vue模板中都可以直接使用。

数据代理

  1. Vue中的数据代理：通过vm对象来代理data对象中属性操作(读/写)。
  2. Vue中数据代理的好处：更加方便地操作data中的数据。
  3. 基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm的_data属性上。为每一个添加到vm上的属性，都指定一个getter/setter方法，在getter/setter内部去操作(读/写)data中对应的属性。
 <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //容器与vue实例只能时一对一的关系
        let data={
                name:"Vue",
                url:"https://www.baidu.com"
            };
       const v=  new Vue({
            el:"#root",//通常为ucss选择器
            data
        })

        console.log("====v._data==data ==>"+(v._data==data)) //true

        //修改_data的属性也可以修改view中的值
       // v._data.name = "Hello"

    </script>   

 <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //容器与vue实例只能时一对一的关系
        let age =10
        let data={
                name:"Vue",
                url:"https://www.baidu.com"
            };
       const v=  new Vue({
            el:"#root",//通常为ucss选择器
            data
        })

//通过 Object.defineProperty方法为对象添加属性
        Object.defineProperty(data,'age',{
            enumerable :true, //控制属性是否可以被枚举，默认是false
            writable:true,//控制属性是否可以被修改，默认是false
            configurable:true ,//控制属性是否可以被删除，默认是false
            get(){
                console.log("有人读取了age属性")
                return age
            },

            set(value){
                console.log("有人修改了age属性，值是",value)
                age = value

            }
        })

        console.log(Object.keys(data))

    </script>

事件处理

事件的基本使用：

  1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
  2. 事件的回调需要配置在methods对象中，最终会在vm上
  3. methods中配置的函数，不要用箭头函数，否则this就不是vm
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
  5. @click=‘demo’和@click='demo($event)'效果一致，但后者可以传参
<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="root">
        <button @click="showInfo($event,11)">点我</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //容器与vue实例只能时一对一的关系
        let age =10
        let data={
                name:"Vue",
                url:"https://www.baidu.com"
            };
       const v=  new Vue({
            el:"#root",//通常为ucss选择器
            data,
            methods:{
                showInfo(event,num){
                    alert('num is '+num +"event is "+event);
                }
            }
        })
    </script>    
</body>

事件修饰符

  1. prevent：阻止默认事件(常用)
  2. stop：阻止事件冒泡（常用）
  3. once：事件只触发一次（常用）
  4. capture：使用事件的捕获模式
  5. self：只有event.target是当前操作的元素时才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件回调函数执行完毕
   <button @click.stop.prevent="showInfo($event,11)">点我</button>//事件修饰符可以链式调用

键盘事件

  • Vue中常用的按键别名：
回车enter
删除(包括“删除”和“退格”键)delete
退出esc
空格space
换行tab（需要配合keydown使用）
上up
下down
左left
右right

  • Vue中未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为keytab-case(短横线命名)

  • 系统修饰键(用法特殊)：ctrl、alt、shift、meta

    1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
    2. 配合keydown使用：正常触发事件

  • 也可以使用keycode去指定具体的按键(不推荐，有些键盘的keycode不统一)

  • Vue.config.keyCodes.自定义键名=键码。可以定制按键别名

<input @keyup.caps-lock ='showInfo(12)' type="text" v-bind:value="name"/><br/>
<input @keydown.tab.y ='showInfo(12)' type="text" v-model:value="name"/><br/>
<input @keydown.ctrl.y ='showInfo(12)' type="text" v-model:value="name"/><br/>//点击ctrl+y才调用showInfo方法

计算属性

  • 定义：要用的属性不存在，要通过已有属性(注意是vm已有的属性，如果是通过变量是不行的)计算得来
  • 原理：底层借助Object.defineproperty方法提供的getter和setter
  • get函数什么时候执行？
    1. 初次读取时会执行一次
    2. 当依赖的数据发生变化时会被再次调用
  • 优势：与methods相比，内部右缓存机制，效率高，调试方便
  • 备注：1.计算属性最终会出现在vm上，直接读取使用即可；2.如果计算属性被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。
<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="root">
        单向数据绑定：<input @keyup.caps-lock ='showInfo(12)' type="text" v-bind:value="name"/><br/>
        双向数据绑定：<input @keydown.ctrl.y ='showInfo(12)' type="text" v-model:value="url"/><br/>
        <button @click="showInfo($event,11)">点我</button>
        <h1>{{fullName}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //容器与vue实例只能时一对一的关系
        let age =10
        let data={
                name:"Vue",
                url:"https://www.baidu.com"
            };
       const v=  new Vue({
            el:"#root",//通常为ucss选择器
            data,
            //计算属性
            computed:{
               //1.完整写法
                fullName:{
                    get(){
                        return this.name+'-'+this.url
                    },
                    //当fullName被修改时，set方法被调用
                    set(value){
                        console.log('set',value)
                        const arr = value.split('-')
                        this.name = arr[0]
                        this.url = arr[1]
                    }
                }

              //2.简写方法，只有读才能够使用简写方式
              fullName[:function](){//:function也是可以省略的
                 return this.name+'-'+this.url
              }
            }
        })

    </script>    
</body>

监视属性——watch

  • 当被监视的属性变化时，回调函数自动调用，进行相关操作。
  • 监视的属性必须存在，才能进行监视。
  • Vue中的watch默认不监测对象内部值的改变(一层)。
  • 配置deep:true可以监测对象内部值改变(多层)。
  • 监视的两种写法：1.new Vue时传入watch配置；2.通过vm.$watch监视。
  • 备注：1.Vue自身可以监测对象内部值的改变，但Vue提供的watch方法默认不可以；2.使用watch时根据数据具体结构，决定是否采用深度监测。
  const v=  new Vue({
            el:"#root",//通常为ucss选择器
            data,
            computed:{
                fullName(){
                    return this.name+'-'+this.url
                }
            },
            //第1种写法
            watch:{
                info:{//监视info属性
                    immediate:true,//初始化让handler调用一下
                    //handler什么时候被调用？当info发生改变时
                    handler(newValue,oldValue){
                        console.log('info被修改了',newValue,oldValue)
                    }
                }
            }
        })
        //第2种写法
        vm.$watch('info',{
            deep:true,//监视多级结构种某个属性的变化
            immediate:true,//初始化让handler调用一下
            //handler什么时候被调用？当info发生改变时
            handler(newValue,oldValue){
                console.log('info被修改了',newValue,oldValue)
            }
        })

计算属性vs监视属性

computed和watch之间的区别：

  • computed能完成的功能，watch都可以完成。
  • watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
  • 重要原则：
    1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
    2. 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数。这样this的指向才是vm或组件实例对象。

Vue监视数据的原理

  1. vue会监视data中所有层次的数据

  2. 如何监测对象中的数据？
    通过setter实现监视，且要在new Vue时就传入要监视的数据。
    （1）对象中后追加的属性，Vue默认不做响应式处理
    （2）如需给后添加的属性做响应式，使用如下API:Vue.set()/vm.$set()

  3. 如何监测数组中的数据？

  4. 在Vue修改数组中的某个元素一定要用如下方法：

    1. 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2. Vue.set()或vm.$set()

  5. 特别注意：Vue.set和vm.$set不能给vm或vm的跟数据对象添加属性！！！

绑定样式

在 Vue.js 中，我们可以使用 v-bind 指令来绑定 style 样式和 class 样式。主要有两种方式绑定 class 和 style，分别是对象语法和数组语法。以下是两种方式的使用：

  1. 对象语法的绑定方式

在需要绑定 style，类名时可以使用 v-bind 绑定一个对象，对象中的 key 就是需要添加的样式名或类名，value 则是这个样式是否需要添加。

绑定class样式：

<div v-bind:class="{ active: isActive }"></div>

在上面的代码中，只有在isActive为true时，才会给这个div添加一个名为active的类。

绑定style样式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在这里，activeColor和fontSize是定义在Vue实例或组件选项中的数据。

  1. 数组语法的绑定方式

另一种方式就是将一个包含样式名或类名的数组 bind 到 class 或者 style。不管数组元素的个数是多少，数组元素可以是字符串或对象。

绑定class样式：

<div v-bind:class="[activeClass, errorClass]"></div>

在这个例子中，activeClass和errorClass都应该是之前已经定义过的数据属性。

绑定style样式：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

在这个例子中，baseStyles和overridingStyles都是之前定义过的样式对象。

条件渲染

  • v-if
    1. 写法：1. v-if=‘表达式’； 2. v-else-if = ‘表达式’；3. v-else=‘表达式’
    2. 适用于：切换频率较低的场景。
    3. 特点：不展示的DOM元素直接被移除
    4. 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被”打断“
    5. v-if可以和template一起使用
 <template v-if="true">
      <h1>Hello</h1>
      <h2>sdsdsd</h2>
 </template>

  • v-show

    1. 写法：v-show=‘表达式’
    2. 适用于：切换频率较高的场景
    3. 特点：不展示的DOM元素未被移除，仅仅是样式隐藏掉

  • 备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

在这里插入图片描述

列表渲染

在这里插入图片描述

过滤器

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  • 语法：
    1. 注册过滤器：Vue.filter(name,callback)或new Vue(filters:{}).
    2. 使用过滤器：{{xxx|过滤器名}} 或v-bind:属性="xxx | 过滤器名 "
  • 备注：
    1. 过滤器也可以接受额外参数，多个过滤器也可以串联
    2. 并没有改变原本的数据，时产生新的数据
<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="root">
      <h3>{{time|timeFormation('YYYY_MM_DD')|mySlice}}</h3>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //全局过滤器
        Vue.filter('mySlice',function(value){
		   return value.slice(0,4)
		})
        let age =10
        let data={
                name:"Vue",
                url:"https://www.baidu.com",
                time:1621685748334
            };
       const v=  new Vue({
            el:"#root",//通常为ucss选择器
            data,
            //局部过滤器
            filters:{
                timeFormation(value,str='YYYY年MM月DD日 HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                mySlice(value){
                    return value.slice(0,4)
                }
            }
        })
        vm.$watch('info',{
            immediate:true,//初始化让handler调用一下
            //handler什么时候被调用？当info发生改变时
            handler(newValue,oldValue){
                console.log('info被修改了',newValue,oldValue)
            }
        })
    </script>    
</body>

v-once指令

  • v-once所在节点初次动态渲染后，就视为静态内容了
  • 以后数据的改变不会引起v-once所在结构的更新，可以用于性能优化

v-cloak指令

  • 本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
  • 配合使用css的{ display: none }可以解决网速慢时页面展示出{{xxx}}的问题

v-html指令

  • 向指定节点中渲染包含html结构的内容。
  • v-html替换节点中所有的内容，{{xxx}}则不会；v-html可以识别html结构。
  • v-html有安全性问题：1.在网站上动态渲染任意html是非常危险的，容易导致XSS攻击；一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上。

v-pre指令

  • 跳过其所在节点的编译过程，与 v-cloak的功能相反
  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译速度

自定义指令

在 Vue 中，除了内置指令 (v-model, v-show, v-else 等) 外，也可以自定义指令。自定义指令的语法和使用方式如下：

1.全局自定义指令：

Vue.directive('directiveName', {
    bind: function (el, binding, vnode, oldVnode) {
       // 这里写你的代码，比如操作 DOM
    },
    // 同样，你可以提供其他的钩子函数，如 inserted, update, componentUpdated, unbind 等
});

// 使用时，在元素上添加 v-directiveName

2.局部自定义指令 (在某个 Vue 实例或组件中定义)：

new Vue({
    el: '#app',
    directives: {
        'directiveName': {
           bind: function (el, binding, vnode, oldVnode) {
               // 这里写你的代码，比如操作 DOM
           },
           // 同样，你可以提供其他的钩子函数，如 inserted, update, componentUpdated, unbind 等
        }
    }
});

自定义指令提供了几个钩子函数如 bind、inserted、update、componentUpdated 和 unbind，它们的意义如下：

  • bind：只调用一次，指令第一次绑定到元素时调用。
  • inserted：被绑定元素插入父节点时调用。
  • update：所在组件的 VNode 更新时调用。
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。

这些钩子函数的参数如下：

  • el: 指令所绑定的元素，可以用来直接操作 DOM 。
  • binding: 一个对象，包含以下属性：
    • name：指令名，不包括 v- 前缀，指令名如果是多个单词，要使用kebab-case命名，不要使用camelCase命名。
    • value：指令的绑定值，例如：v-directiveName=“1 + 1”，value 的值是 2。
    • oldValue：指令绑定前的值。
    • expression：字符串形式的指令表达式。
    • arg：传给指令的参数。
    • modifiers：一个包含修饰符的对象。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

React和Vue中key的作用与原理

  • 虚拟dom中key的作用：
    key是虚拟dom对象的标识，当数据发生变化时 Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。

  • 对比规则：

    1. 旧虚拟dom中找到了与新虚拟dom相同的key——若虚拟dom中内容没变，直接使用之前的真实dom；若虚拟dom中内容变了，则生成新的真实dom，随后替换掉页面中之前的真实dom。
    2. 旧虚拟dom中未找到与新虚拟dom相同的key——创建新的真实dom，随后渲染到页面。

  • 用index作为key可能会引发的问题：

    1. 若对数据进行逆序添加，逆序删除等破坏顺序操作：会产生没有必要的真实dom更新===> 界面效果没有问题，但效率低。
    2. 如果结构中还包含了输入类的dom：会产生错误dom更新===>界面有问题。

  • 并发中如何选择key？

    1. 最好只有每条数据的唯一标识作为key，比如id、手机号等。
    2. 如果不存在对数据的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key也是没有问题的。

Vue中的生命周期

在这里插入图片描述

  • 总结
    1. mounted：发送ajax请求，启动定时器，绑定自定义事件、订阅消息等【初始化操作】。
    2. beforeDestory：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
    3. 销毁后借助Vue开发者工具看不到任何消息。
    4. 销毁后自定义事件会失效，但原生dom事件依然有效。
    5. 一般不会在beforeDestory操作数据，因为即便操作数据，也不会再触发更新流程了。

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

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

相关文章

transformers-AutoClass

transformers-AutoClass

https://huggingface.co/docs/transformers/main/en/autoclass_tutorialhttps://huggingface.co/docs/transformers/main/en/autoclass_tutorialAutoClass可以自动推断和加载给定checkpoint的正确架构。 对于文本&#xff0c;使用Tokenizer将文本转换为token序列&#xff0c;创…
阅读更多...
IDEA中application.properties文件中文乱码

IDEA中application.properties文件中文乱码

现象&#xff1a; 原因&#xff1a; 项目编码格式与IDEA编码格式不一致导致的 解决办法&#xff1a; 在File->Settings->Editor->File Encodings选项中&#xff0c;将Global Encoding,Project Encoding,Default encoding for properties files这三个选项置为一致&a…
阅读更多...
通过netstat命令查看Linux的端口占用

通过netstat命令查看Linux的端口占用

一、netstat 完整写作network statistics&#xff0c;简写为netstat &#xff0c;常用的几个参数为l、n、t、u、p。 -l &#xff1a; 仅展示监听状态下的程序(state 为LISTEN)。 -n &#xff1a;会使用ip端口的方式&#xff0c;来进行地址的描述。不使用-n就会变成服务器的名称…
阅读更多...
毕业设计基于SpringBoot+Vue智慧云办公系统源码+数据库+项目文档

毕业设计基于SpringBoot+Vue智慧云办公系统源码+数据库+项目文档

智慧云办公管理系统 一、系统简介 智慧云办公系统是一个采用SpringBootVue技术开发的前后端分离的项目&#xff0c;云办公系统通过软件的方式&#xff0c;方便快捷处理中小型企业的公司日常事务&#xff0c;能够提高整体的管理运营水平&#xff0c;使得办公更加高效方便&…
阅读更多...
随想录一刷·数组part1

随想录一刷·数组part1

你好&#xff0c;我是安然无虞。 文章目录 1. 二分查找题型2. 移除元素题型 1. 二分查找题型 二分查找传送门 class Solution { public:int search(vector<int>& nums, int target) {// 在有序数组中查找第一时间想到二分查找int left 0, right nums.size() - 1…
阅读更多...
虚拟机部署与发布J2EE项目（Linux版本）

虚拟机部署与发布J2EE项目（Linux版本）

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 &#xff0c;越幸运。 1.jdk安装配置 打开虚拟机 Centos 登入账号&#xff0c;并且使用MobaXterm进行连接 1.1. 传入资源 连接…
阅读更多...
单元化架构的思考

单元化架构的思考

银行业“多活”的发展历程 受监管政策的要求&#xff0c;银行一般会在同城、异地或者多地进行数据中心建设&#xff0c;以保证系统的稳定运行&#xff0c;但从目前实际情况来看&#xff0c;“同城双活”目前仍是很多银行采用的主要形式。银行业的“多活”架构在发展过程中存在三…
阅读更多...
Stable Diffusion WebUI扩展openpose-editor如何使用

Stable Diffusion WebUI扩展openpose-editor如何使用

先上地址： GitHub - fkunn1326/openpose-editor: Openpose Editor for AUTOMATIC1111s stable-diffusion-webuiOpenpose Editor for AUTOMATIC1111s stable-diffusion-webui - GitHub - fkunn1326/openpose-editor: Openpose Editor for AUTOMATIC1111s stable-diffusion-webu…
阅读更多...
高校教务系统登录页面JS分析——天津大学

高校教务系统登录页面JS分析——天津大学

高校教务系统密码加密逻辑及JS逆向 本文将介绍天津大学教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文&#xff0c;你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文仅供交流学习&#xff0c;勿用于非法用途。 一、密…
阅读更多...
第2篇 机器学习基础 —（4）k-means聚类算法

第2篇 机器学习基础 —（4）k-means聚类算法

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。聚类算法是一种无监督学习方法&#xff0c;它将数据集中的对象分成若干个组或者簇&#xff0c;使得同一组内的对象相似度较高&#xff0c;不同组之间的对象相似度较低。聚类算法可以用于数据挖掘、图像分割、文本分类等领域…
阅读更多...
Prometheus+Grafana

Prometheus+Grafana

一、Prometheus 获取配置文件 docker run -d -p 9090:9090 --name prometheus prom/prometheusmkdir -p /app/prometheusdocker cp prometheus:/etc/prometheus/prometheus.yml /app/prometheus/prometheus.yml停止并删除旧的容器&#xff0c;重新启动 docker run -d --name…
阅读更多...
什么是NPM（Node Package Manager）？它的作用是什么？

什么是NPM（Node Package Manager）？它的作用是什么？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
sort的第三个参数与priority_queue的第三个模板参数

sort的第三个参数与priority_queue的第三个模板参数

sort 在C的标准库中&#xff0c;std::sort是一个用于对容器的元素进行排序的算法。它接受三个参数&#xff1a; 1、需要排序的容器的起始迭代器&#xff08;包含&#xff09;。 2、需要排序的容器的结束迭代器&#xff08;不包含&#xff09;。 3、可选参数&#xff0c;用于指…
阅读更多...
腾讯云轻量应用镜像、系统镜像、Docker基础镜像、自定义镜像和共享镜像介绍

腾讯云轻量应用镜像、系统镜像、Docker基础镜像、自定义镜像和共享镜像介绍

腾讯云轻量应用服务器镜像类型分为应用镜像、系统镜像、Docker基础镜像、自定义镜像和共享镜像&#xff0c;腾讯云百科txybk.com来详细说下不同镜像类型说明和详细介绍&#xff1a; 轻量应用服务器镜像类型说明 腾讯云轻量应用服务器 应用镜像&#xff1a;独有的应用镜像除了包…
阅读更多...
[PHP]pearProject协作系统 v2.8.14 前后端

[PHP]pearProject协作系统 v2.8.14 前后端

pearProject是一款轻量级的在线项目/任务协作系统&#xff0c;远程办公协作。 概述 PearProject 不支持 IE8 及以下版本&#xff0c;建议使用基于Webkit内核的现代浏览器访问 PearProject 为前后端分离架构&#xff0c;因此安装分为后端和前端两大部分&#xff0c;需要分别进…
阅读更多...
艾奇免费KTV电子相册视频制作软件

艾奇免费KTV电子相册视频制作软件

不得不承认功能特色支持添加导入图形、视频、歌曲、卡啦ok动态歌词字幕文件&#xff1a;图形文件格式支持导入jpg/jpeg/png/bmp/gif等静态图形&#xff1b;视频文件支持导入AVI/MP4/FLV/MTS/MPG/RMVB等几乎所有常见视频文件&#xff1b;歌曲格式支持mp3/wma/acc/ogg/wav等几乎所…
阅读更多...
基于SC-LeGO-LOAM的建图和ndt_localizer的定位

基于SC-LeGO-LOAM的建图和ndt_localizer的定位

link 基于SC-LeGO-LOAM的建图和ndt_localizer的定位 链接: link. SC-LeGO-LOAM 链接: link. ndt_localizer 将建图和定位两部分分开&#xff0c;利用SC-LeGO-LOAM进行建图&#xff0c;相比于LeGO-LOAM&#xff0c;其采用了Scan Context方法&#xff0c;对点云地图进行闭环检测和…
阅读更多...
车载电子电器架构 —— 基于AP定义车载HPC

车载电子电器架构 —— 基于AP定义车载HPC

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…
阅读更多...
Kubernetes 高级调度 - Affinity

Kubernetes 高级调度 - Affinity

Author&#xff1a;rab 目录 前言一、Node 亲和性1.1 NodeAffinity1.1.1 Hard Node Affinity1.1.2 Soft Node Affinity 1.2 NodeAntiAffinity 二、Pod 亲和性2.1 PodAffinity2.1.1 Hard Pod Affinity2.1.2 Soft Pod Affinity 2.2 PodAntiAffinity 总结 前言 Kubernetes 中的 A…
阅读更多...
主从复制(gtid方式)

主从复制(gtid方式)

基于事务的Replication&#xff0c;就是利用GTID来实现的复制 GTID&#xff08;全局事务标示符&#xff09;最初由google实现&#xff0c;在MySQL 5.6中引入.GTID在事务提交时生成&#xff0c;由UUID和事务ID组成.uuid会在第一次启动MySQL时生成&#xff0c;保存在数据目录下的…
阅读更多...
最新文章

Copyright @ 2022~2023