Vue基础入门讲义（三）-指令

news2025/1/23 10:25:42

在这里插入图片描述

文章目录

    • 1.什么是指令？
    • 2.插值表达式
      • 2.1.花括号
      • 2.2.插值闪烁
      • 2.3.v-text和v-html
    • 3.v-model
    • 4.v-on
      • 4.1.基本用法
      • 4.2.事件修饰
    • 5.v-for
      • 5.1.遍历数组
      • 5.2.数组角标
      • 5.3.遍历对象
    • 6.key
    • 7.v-if和v-show
      • 7.1.基本使用
      • 7.2.与v-for结合
      • 7.3.v-else
      • 7.4.v-show
    • 8.v-bind
      • 8.1. 属性上使用vue数据
      • 8.2. class属性的特殊用法
    • 9.计算属性
    • 10.watch
      • 10.1.监控
      • 10.2. 深度监控

1.什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。

2.插值表达式

2.1.花括号

格式：

{{表达式}}

说明：

  • 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
  • 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
  • 可以直接获取Vue实例中定义的数据或函数

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            msg:"hello vue"
        }
    });
</script>
</body>
</html>

2.2.插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，称为插值闪烁。类似如下的效果（最新vue是几乎没有此问题）：

在这里插入图片描述

2.3.v-text和v-html

使用v-text和v-html指令来替代 {{}}

说明：

  • v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
  • v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

改造原页面内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    v-text:<span v-text="msg"></span><br>
    v-html:<span v-html="msg"></span><br>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            msg:"<h2>hello, vue.</h2>"
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述
并且不会出现插值闪烁，当没有数据时，会显示空白。

3.v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br>
    <input type="checkbox" value="PHP" v-model="language">PHP<br>
    <input type="checkbox" value="Swift" v-model="language">Swift<br>
    <h2>
        你选择了：{{language.join(",")}}
    </h2>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            language:[]
        }
    });
</script>
</body>
</html>
  • 多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
  • radio对应的值是input的value值
  • input 和 textarea 默认对应的model是字符串
  • select 单选对应字符串，多选对应也是数组

效果：
在这里插入图片描述

4.v-on

4.1.基本用法

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

简写语法：

@事件名="js片段或函数名"

例如 v-on:click='add' 可以简写为 @click='add'

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名，该函数必须要在vue实例中定义-->
    <button @click="decrement">减少</button>
    <h2>
        num = {{num}}
    </h2>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

4.2.事件修饰

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名，该函数必须要在vue实例中定义-->
    <button @click="decrement">减少</button>
    <h2>
        num = {{num}}
    </h2>
    <hr>
    事件冒泡测试：<br>
    <div style="background-color: lightblue;width: 100px;height: 100px" @click="print('你点击了div')">
        <button @click.stop="print('点击了button')">点我试试</button>
    </div>
    <br>阻止默认事件：<br>
    <a href="http://www.xxxxxxx.cn" @click.prevent="print('点击超链接')">vue</a>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            decrement() {
                this.num--;
            },
            print(msg) {
                console.log(msg)
            }
        }
    });
</script>
</body>
</html>

事件修饰符：语法v-on:xxxx.修饰符，常用的修饰符有：

.stop ：阻止事件冒泡
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次

5.v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

5.1.遍历数组

语法：

v-for="item in items"
  • items：要遍历的数组，需要在vue的data中定义好。
  • item：循环变量

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">{{user.name}}--{{user.age}}--{{user.gender}}</li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            users: [
                {"name": "bruce", "age": 8, "gender": "男"},
                {"name": "tom", "age": 12, "gender": "女"},
                {"name": "jack", "age": 4, "gender": "男"}
            ]
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

5.2.数组角标

在遍历的过程中，如果需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"
  • items：要迭代的数组
  • item：迭代得到的数组元素别名
  • index：迭代到的当前元素索引，从0开始。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user, index) in users">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            users: [
                {"name": "bruce", "age": 8, "gender": "男"},
                {"name": "tom", "age": 12, "gender": "女"},
                {"name": "jack", "age": 4, "gender": "男"}
            ]
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

5.3.遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 1个参数时，得到的是对象的值
  • 2个参数时，第一个是值，第二个是键
  • 3个参数时，第三个是索引，从0开始

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user, index) in users" :key="index">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(value,key,index) in person">
            {{index}}--{{key}}--{{value}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            users: [
                {"name": "java", "age": 8, "gender": "男"},
                {"name": "php", "age": 12, "gender": "女"},
                {"name": "java", "age": 4, "gender": "男"}
            ],
            person: {"name": "C#", "age": 3, "address": "中国"}
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

6.key

我们都知道,vue很大的一个特点就是双向数据绑定,数据一旦改变,那么页面就会渲染新的数据呈现在页面上

对于v-for渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作

假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事吗,而key的出现就是尽可能的回避了这个问题,提高效率,如果我们给列表增加一条数据,页面只渲染了这个数据,那不就很完美了

v-for默认使用就地复用策略,列表数据修改的时候,他会根据可以值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素

在这里插入图片描述
当我们这样绑定时，我们在对最后面的数据进行操作时不会有什么问题，一旦我们对中间进行操作就会产生不好的作用

在这里插入图片描述
可以看到除了第一个数据可以复用之前的之外，后面的所有数据都需要重新渲染。
最好的办法是使用数组中不会变化的那一项作为 key 值，对应到项目中，即每条数据都有一个唯一的 id ，来标识这条数据的唯一性。

示例：

<ul>
   <li v-for="(item,index) in items" :key="index"></li>
</ul>

这- 里使用了一个特殊语法： :key="" 后面会讲到，它可以让你读取vue中的属性，并赋值给key属性

  • 这里绑定的key是数组的索引，应该是唯一的

总结:
key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 Vue 优化渲染。这些 key 必须是唯一的数字或字符串，Vue 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

7.v-if和v-show

7.1.基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染

语法：

v-if="布尔表达式"

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
        Hello VueJS.
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            show:true
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

7.2.与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
        Hello VueJS.
    </h2>
    <hr>
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender=='女'">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            show: true,
            users: [
                {"name": "Java", "age": 8, "gender": "男"},
                {"name": "C#", "age": 12, "gender": "女"},
                {"name": "Php", "age": 4, "gender": "男"},
                {"name": "C++", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

7.3.v-else

可以使用 v-else 指令来表示 v-if 的“else 块”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
        Hello VueJS.
    </h2>
    <hr>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender=='女'" style="background-color: red">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
        <li v-else style="background-color:blue">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            show: true,
            users: [
                {"name": "Java", "age": 8, "gender": "男"},
                {"name": "C#", "age": 12, "gender": "女"},
                {"name": "Php", "age": 4, "gender": "男"},
                {"name": "C++", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
在这里插入图片描述
v-else-if ，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

类似于 v-else ， v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

7.4.v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性display 。

示例：
在这里插入图片描述

8.v-bind

8.1. 属性上使用vue数据

看这样一个案例；

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <style type="text/css">

        div {
            width: 100px;
            height: 100px;
            color: hotpink;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">

    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>

    <div class="">
        点击按钮改变背景颜色。
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            color: "red"
        }
    });
</script>
</body>
</html>

解读：

  • 页面有两个按钮，点击时，会改变Vue实例中的color值，这个值与前面定义的CSS样式一致。
  • 目前div的class为空，希望实现点击按钮后，div的class样式会在.red和.blue之间切换

该如何实现？

大家可能会这么想，既然color值会动态变化为不同的class名称，那么我们直接把color注入到class属性就好了，于是就这样写：

<div class="{{color}}"></div>

这样写是错误的！因为插值表达式不能用在标签的属性中。此时，Vue提供了一个新的指令来解决：v-bind，语法：

v-bind:属性名="Vue中的变量"

例如，在这里我们可以写成：

<div v-bind:class="color"></div>

不过，v-bind太麻烦，因此可以省略，直接写成： :属性名='属性值' ，即：

<div :class="color"></div>

在这里插入图片描述

8.2. class属性的特殊用法

上面虽然实现了颜色切换，但是语法却比较啰嗦。Vue对class属性进行了特殊处理，可以接收数组或对象格式

对象语法

可以传给 :class 一个对象，以动态地切换 class：

<div :class="{ red: true,blue:false }"></div>
  • 对象中，key是已经定义的class样式的名称，如本例中的： red 和 blue
  • 对象中，value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效。

之前的案例可以改写成这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div :class="color">
        点击按钮改变背景颜色。
    </div>
    <hr>
    <br>
    <button @click="bool=!bool">点我改变下面色块颜色</button>
    <div :class="{red:bool,blue:!bool}">
        点击按钮改变背景颜色。
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            color: "red",
            bool: true
        }
    });
</script>
</body>
</html>

  • 首先class绑定的是一个对象： {red:bool, blue: !bool}

    • red和blue两个样式的值分别是bool和!bool，也就是说这两个样式的生效标记恰好相反，一个生效，另一
      个失效。
    • bool默认为true，也就是说默认red生效，blue不生效

  • 现在只需要一个按钮即可，点击时对bool取反，自然实现了样式的切换

效果：
在这里插入图片描述

9.计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，有一个日期的数据，但是是毫秒值：

data:{
   birthday:1429032123201 // 毫秒值
}

在页面渲染，希望得到yyyy-MM-dd的样式则需要如下处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <h2>
        你的生日为：{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            birthday: 1429032123201
        }
    });
</script>
</body>
</html>

虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <h2>
        你的生日为：{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <hr>
    <h2>
        computed计算方式；你的生日为：{{birth}}
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            birthday: 1429032123201
        },
        computed: {
            birth() {
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" +
                    date.getDay();
            }
        }
    });
</script>
</body>
</html>

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

效果：
在这里插入图片描述

10.watch

10.1.监控

watch可以让我们监控一个值的变化。从而做出相应的反应。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="message">
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            message: "hello vue"
        },
        watch: {
            message(newValue, oldValue) {
                console.log("新值：" + newValue + "；旧值：" + oldValue);
            }
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

10.2. 深度监控

如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <input v-model="message"/>
    <hr>
    <br>
    <input v-model="person.name"><br>
    <input v-model="person.age">
    <button @click="person.age++">+</button>
    <h2>
        姓名为：{{person.name}}；年龄为：{{person.age}}
    </h2>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",//el即element，要渲染的页面元素
        data: {
            message: "hello vue",
            person: {"name": "vue123", "age": 12}
        },
        watch: {
            message(newValue, oldValue) {
                console.log("新值：" + newValue + "；旧值：" + oldValue);
            },
            person: {
                //开启深度监控，可以监控到对象属性值的变化
                deep: true,
                //监控的处理方法
                handler(obj) {
                    console.log("name = " + obj.name + ", age=" + obj.age);
                }
            }
        }
    });
</script>

</body>
</html>

变化：

  • 以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：
    • deep:代表深度监控，不仅监控person变化，也监控person中属性变化
    • handler：就是以前的监控处理函数

效果：

在这里插入图片描述

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

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

相关文章

服务器处理发生异常:java.text.ParseException: Unparseable date

服务器处理发生异常:java.text.ParseException: Unparseable date

测试上传报文的时候遇见报错 服务器处理发生异常:java.text.ParseException: Unparseable date: “2023/03/03” 错误报文 实际需要的报文 错误原因 上传时间字段&#xff0c;与Date字段数据位数不匹配&#xff0c;Java类型&#xff1a;Date默认带有年月日 时分秒yyyy-mm-dd…
阅读更多...
十年业务开发总结，如何做好高效高质量的价值交付

十年业务开发总结，如何做好高效高质量的价值交付

作者&#xff1a;杨博林 阿里大淘宝场景金融团队 软件交付是一个非常复杂的过程和体系&#xff0c;需要保障好每个阶段的质量和效率才能保障最终的质量和效率。本文将尝试从需求交付的前、中、后三个环节来阐述一下如何做高效高质量的价值交付。 一、背景 转眼间已经做了十年的…
阅读更多...
JavaScript基础内容

JavaScript基础内容

日升时奋斗&#xff0c;日落时自省 目录 1、基础语法 2、DOM 2.1、选中页面元素 2.2、获取/修改元素内容 3、JS案例 3.1、网页版本猜数字 3.2、网页版表白墙 JS最初只是为了进行前端页面的开发后来JS也被赋予了更多的功能&#xff0c;可以用来开发桌面程序&#xff0c;手…
阅读更多...
RHCSA-重置root密码（3.3）

RHCSA-重置root密码（3.3）

方法1&#xff1a;rd.break &#xff08;1&#xff09;首先重启系统&#xff0c;在此页面按e键&#xff0c;在屏幕上显示内核启动参数 &#xff08;2&#xff09;知道linux这行&#xff0c;末尾空格后输入rd.break&#xff0c;然后按ctrlx &#xff08;3&#xff09;查看&#…
阅读更多...
电脑桌面上的图标不见了怎么办？5个完美的解决技巧

电脑桌面上的图标不见了怎么办？5个完美的解决技巧

案例&#xff1a;电脑桌面不显示任何东西&#xff1f; “救命&#xff01;电脑打开后&#xff0c;只有桌面&#xff0c;任何图标都没有怎么办&#xff1f;心急&#xff0c;不知道该怎么解决&#xff1f;” 电脑桌面上的图标消失是一个比较常见的问题&#xff0c;许多用户都会…
阅读更多...
Hadoop集群启动从节点没有DataNode

Hadoop集群启动从节点没有DataNode

目录 一、问题背景 二、解决思路 三、解决办法&#xff1a; 一、问题背景 之前启动hadoop集群的时候都没有问题&#xff0c;今天启动hadoop集群的时候&#xff0c;从节点的DataNode没有启动起来。 二、解决思路 遇见节点起不来的情况&#xff0c;可以去看看当前节点的日志…
阅读更多...
各大加密算法对比(原理、性能、安全、运用)

各大加密算法对比(原理、性能、安全、运用)

原理按加密可逆可以分为&#xff1a;加密可逆算法和加密不可逆算法。加密可逆算法又可以分为&#xff1a;对称加密和非对称加密。1、加密不可逆算法&#xff1a;一般采用hash算法加密&#xff0c;其原理一般是将原文长度补位成64的倍数&#xff0c;接着初始化固定长度的缓存值&…
阅读更多...
大数据框架之Hadoop：MapReduce（五）Yarn资源调度器

大数据框架之Hadoop：MapReduce（五）Yarn资源调度器

Apache YARN (Yet Another Resource Negotiator) 是 hadoop 2.0 引入的集群资源管理系统。用户可以将各种服务框架部署在 YARN 上&#xff0c;由 YARN 进行统一地管理和资源分配。 简言之&#xff0c;Yarn是一个资源调度平台&#xff0c;负责为运算程序提供服务器运算资源&…
阅读更多...
Windows Cannot Initialize Data Bindings 问题的解决方法

Windows Cannot Initialize Data Bindings 问题的解决方法

前言 拿到一个调试程序, 怎么折腾都打不开, 在客户那边, 尝试了几个系统版本, 发现Windows 10 21H2 版本可以正常运行。 尝试 系统篇 系统结果公司电脑 Windows 8有问题…下载安装 Windows10 22H2问题依旧下载安装 Windows10 21H2问题依旧家里的 笔记本Window 11正常 网上…
阅读更多...
第三章 opengl之着色器

第三章 opengl之着色器

OpenGL着色器GLSLGLSL的数据类型向量输入与输出Uniform更多属性自己的着色器类着色器 着色器是运行在GPU上的小程序。着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序&#xff0c;因为它们之间不能相互通信&#xff1b;它们之间唯一的沟通只有通过输入和…
阅读更多...
DC-DC模块电源隔离直流升压高压稳压输出5v12v24v转60v100v110v150v220v250v300v400v500v

DC-DC模块电源隔离直流升压高压稳压输出5v12v24v转60v100v110v150v220v250v300v400v500v

特点效率高达80%以上1*1英寸标准封装单电压输出稳压输出工作温度: -40℃~85℃阻燃封装&#xff0c;满足UL94-V0 要求温度特性好可直接焊在PCB 上应用HRB 0.2~10W 系列模块电源是一种DC-DC升压变换器。该模块电源的输入电压分为&#xff1a;4.5~9V、9~18V、及18~36VDC标准&#…
阅读更多...
软工第二次个人作业——软件案例分析

软工第二次个人作业——软件案例分析

软工第二次个人作业——软件案例分析 项目内容这个作业属于哪个课程2023北航敏捷软件工程这个作业的要求在哪里个人作业-软件案例分析我在这个课程的目标是体验敏捷开发过程&#xff0c;掌握一些开发技能&#xff0c;为进一步发展作铺垫这个作业在哪个具体方面帮助我实现目标通…
阅读更多...
四川大学软件学院｜系统级编程期末复习

四川大学软件学院｜系统级编程期末复习

概述 选择题 50 分&#xff08;原题率 80%&#xff09;&#xff1a;http://tieba.baidu.com/p/1250021454?&share9105&frsharewise&unique967707B1DAECEF4A785B61D29AF36950&st1639102957&client_type1&client_version12.10.1&sfccopy&share…
阅读更多...
使用C语言实现简单的PNG图像读取

使用C语言实现简单的PNG图像读取

概述 首先&#xff0c;关于png图像的结构&#xff1a;PNG文件的结构、PNG格式的数据结构。这两篇文章说的比较细。我简单地说一下我使用到的地方&#xff1a; 注&#xff1a;①引于PNG格式的数据结构。②引于PNG文件的结构 “png文件的前8个字节为固定的文件头信息&#xff0…
阅读更多...
Ubuntu中安装StaMPS

Ubuntu中安装StaMPS

Ubuntu中安装StaMPS0 StaMPS简介1 首先安装好MATLAB&#xff0c;安装一些依赖工具包2 安装StaMPS2.1 下载StaMPS安装包2.2 安装2.3 配置环境2.4 matlab中的路径设置0 StaMPS简介 官网&#xff1a;https://homepages.see.leeds.ac.uk/~earahoo/stamps/ A software package to e…
阅读更多...
水浒英雄为啥输？因为没愿景

水浒英雄为啥输？因为没愿景

水浒英雄为啥输&#xff1f;输在没愿景&#xff01; 宋江没学企业管理&#xff0c;太遗憾 企业文化核心三件套&#xff1a;使命愿景价值观 趣讲大白话&#xff1a;没有远见成不了大事 【安志强趣讲信息科技92期】 ******************************* 水浒英雄的使命&#xff1a;替…
阅读更多...
HTML的表格标签和列表标签

HTML的表格标签和列表标签

&#x1f31f;所属专栏&#xff1a;HTML只因变凤凰之路&#x1f414;作者简介&#xff1a;rchjr——五带信管菜只因一枚&#x1f62e;前言&#xff1a;该系列将持续更新HTML的相关学习笔记&#xff0c;欢迎和我一样的小白订阅&#xff0c;一起学习共同进步~&#x1f449;文章简…
阅读更多...
如何成为一名黑客？基础入门

如何成为一名黑客？基础入门

如何成为一名黑客&#xff1f;基础入门 相信大家对黑客一词并不陌生&#xff0c;因为从小便受电影的熏陶&#xff0c;黑客轻易就能攻入别人的系统也让不少人都羡慕不已&#xff0c;但是真正能够成为黑客的人少之又少。很多人都是三天打鱼两天晒网&#xff0c;学习进度不明显&a…
阅读更多...
写入性能：TDengine 最高达到 InfluxDB 的 10.3 倍，TimeScaleDB 的 6.74 倍

写入性能：TDengine 最高达到 InfluxDB 的 10.3 倍，TimeScaleDB 的 6.74 倍

上周三&#xff0c;TDengine 正式发布了基于 TSBS 的时序数据库&#xff08;Time Series Database&#xff0c;TSDB&#xff09;性能基准测试报告&#xff0c;该报告采用 TSBS 平台中针对 DevOps 的场景作为基础数据集&#xff0c;在相同的 AWS 云环境下对 TDengine 3.0、Times…
阅读更多...
如何让小型双轮差速底盘实现视觉循迹功能

如何让小型双轮差速底盘实现视觉循迹功能

1. 任务描述 在机器人小车&#xff08;R023d&#xff09;上搭载摄像头&#xff0c;摄像头采集图像信息并通过WiFi将信息传递给PC端&#xff0c;然后PC端使用OpenCV对摄像头读取到的视频进行灰度化、高斯滤波、腐蚀、膨胀等处理&#xff0c;使图像分为黑白两色。PC端进行图像信息…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023