当前位置：首页 > news >正文

Vue-常用指令

news 来源：原创 2025/7/18 4:27:49

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

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

1.1 v-cloak

1.2 双向数据绑定指令 v-model

1.3 v-once

1.4 绑定属性 v-bind

1.5 v-on

1.5.1 基本使用

1.5.2 事件修饰符

1.5.3 按键修饰符

1.5.4 自定义修饰符

1.6 循环分支（判断）指令

1.6.1 循环指令

1.6.2 分支指令 - 判断条件

1.7 综合案例：简易购物车

1.8 样式绑定

1.8.1 class样式绑定

1.8.2 style样式处理

1.9 v-model

1.10 综合案例：购物车全选/全不选

1.1 v-cloak

这个指令保持在元素上直到关联实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

如果网络不好的情况下，网页先显示 {{ message }}，如果vue加载完毕，显示 hello vue

闪烁

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>[v-cloak] { /* 如果未加载完vue，{{ message }} 不显示 */display: none;}</style>
</head>
<body><!-- 如果多个元素都使用到了 {{}}, 可以在共同的父级元素上加 指令 v-cloak --><div id="app"  v-cloak>{{ message }}</div>
</body>
<script>const app = new Vue({el: '#app',data: {message: 'hello vue'}})
</script>

1.2 双向数据绑定指令 v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。

尽管有些神奇，但 v-model 本质上不过是语法糖。

它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

<body><div id="app"><div>用户名： <input type="text" v-model="username"> {{ username }}</div><div>密码： <input type="password" v-model="password"> {{ password }}</div><div>性别:<input type="radio" name="sex" value="1" v-model="sex"> 男<input type="radio" name="sex" value="0" v-model="sex"> 女 --- {{ sex }}</div><div>爱好:<input type="checkbox" name="hobby" value="篮球" v-model="hobby"> 篮球<input type="checkbox" name="hobby" value="排球" v-model="hobby"> 排球 <input type="checkbox" name="hobby" value="网球" v-model="hobby"> 网球 --- {{ hobby }}</div><div>阶段:<select v-model="lesson"><option value="1">1阶段</option><option value="2">2阶段</option><option value="3">3阶段</option></select> - {{ lesson }}</div><input type="checkbox" v-model="flag"> 已阅读****协议 --- {{ flag }}<div><button v-on:click="register">注册</button></div></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {username: '吴大勋',password: '123456',sex: "1",hobby: [],lesson: 3,flag: true},methods: { // 所有vue自定义的事件register () {console.log({username: this.username,password: this.password,sex: this.sex === '1' ? '男' : '女',hobby: this.hobby,lesson: this.lesson == '3' ? '三阶段' : this.lesson == '2' ? '二阶段' : '一阶段',})}}})
</script>

注意：
1.checkbox，如果你的数据类型是数组类型，代表的就是多选框（爱好，兴趣）；如果数据类型是boolean类型，true代表的是选中的状态，false代表的是未选中（注册时已阅读协议，购物车的选中状态）
2.select下拉选择框：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。

在 iOS 中，这会使用户无法选择第一个选项。

因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐提供一个值为空的禁用选项。
<div>
阶段:<select v-model="lesson"><option disabled value="">请选择</option><option value="1">1阶段</option><option value="2">2阶段</option><option value="3">3阶段</option></select> - {{ lesson }}
</div>

1.3 v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

这可以用于优化更新性能。

<body><div id="app"><input type="text" v-model="username"> {{ username }}<div v-once>{{ username }}</div></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {username: '1111'}})
</script>

1.4 绑定属性 v-bind

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

vue中当遇到变量，boolean类型或者number类型时，需要使用绑定属性

<body><div id="app"><!-- 变量 --><img v-bind:src="imgsrc" alt=""> <!-- number类型 --><div v-bind:num="10"></div><!-- boolean类型 --><div v-bind:flag="true"></div>  <!-- 缩写 --><div :flag="true"></div>

</div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {imgsrc: 'https://cn.vuejs.org/images/logo.png'}})
</script>

1.5 v-on

1.5.1 基本使用

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

<!-- 常规写法 --> 
<button v-on:click="num++"></button> 
<!-- 缩写 --> 
<button @click="num++"></button>
<!-- 事件处理函数调用：直接写函数名 --> 
<button @click="say"></button> 
<!-- 事件处理函数调用：常规调用,可以传递参数 --> 
<button @click="alert('123')"></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”

<body><div id="app"><button v-on:click="num++">+</button>{{ num }}<button @click="num--">-</button><!-- 事件绑定 v-on 属性表达式中切记不能直接写业务逻辑，例如 @click="alert('123')" --><button @click="alert('123')">vue</button><button onclick="alert('456')">js</button><!-- 事件处理函数传参 --><!-- 事件处理函数调用：直接写函数名,如果不需要参数，可以不写（） --><button @click="say1">没有参数</button> <!-- 事件处理函数调用：常规调用, 如果需要使用时间对象，记得一定传的是 $event --><button @click="say2('hi', $event)">有参数和事件对象</button><!-- 如果想要使用默认的事件对象，不要加（），在定义函数时有默认的event参数 --><button @click="say3">查看默认的事件对象</button></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {num: 100},methods: {say1 () {console.log('没有参数')},say2 (str, event) {console.log('有参数和事件对象, str-' + str + '，event-' + event)console.log(event)},say3 (event) {console.log(event)}},})
</script><!--练习-->
<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="lib/vue.js"></script> 
<script> new Vue({ el: '#app', data: { },methods:{ say: function(name,event){ console.log('你点了' + name); } } }) 
</script>

1.5.2 事件修饰符

含义：用来处理事件的特定行为

使用示例：

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

更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<body><div id="app"><!-- 子元素 阻止冒泡 事件对象 --><!-- <div @click="clickDiv" style="width: 200px;height: 200px;background-color: #f66;"><button @click="clickBtn">按钮</button></div> --><!-- vue 事件修饰符阻止冒泡 子元素添加 stop --><!-- <div @click="clickDiv" style="width: 200px;height: 200px;background-color: #f66;"><button @click.stop="clickBtn">按钮</button></div> --><!-- vue 事件修饰符阻止冒泡 父元素添加 self --><div @click.self="clickDiv" style="width: 200px;height: 200px;background-color: #f66;"><button @click="clickBtn">按钮</button></div></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {},methods: {// 子元素 阻止冒泡 事件对象// clickDiv () {//   console.log('div')// },// clickBtn (event) {//   event.stopPropagation()//   console.log('button')// }// vue 事件修饰符阻止冒泡 子元素添加 stop// clickDiv () {//   console.log('div')// },// clickBtn () {//   console.log('button')// }// vue 事件修饰符阻止冒泡 父元素添加 selfclickDiv () {console.log('div')},clickBtn () {console.log('button')
}}})
</script>

1.5.3 按键修饰符

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

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

更多按键修饰符请参考官方文档：

https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<body><div id="app"><input type="text" onkeyup="changeJsVal(event)"><input type="text" @keyup="changeVueVal"><!-- 按键修饰符 --><!-- <input type="text" @keyup.enter="changeVue2Val"> --><input type="text" @keyup.13="changeVue2Val"></div>
</body>
<script src="lib/vue.js"></script>
<script>function changeJsVal (event) {// console.log(event)if (event.keyCode == 13) {console.log(111)}}const app = new Vue({el: '#app',data: {},methods: {changeVueVal (event) {if (event.keyCode == 13) {console.log(222)}},changeVue2Val () {console.log(333)}}})
</script>

1.5.4 自定义修饰符

需要配合系统修饰键完成

https://cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE

按键修饰符还有一个额外的细节需要注意，Vue内置的按键修饰符是有限的，如果还需要用到其他键盘按键的修饰符，则此时我们可以通过全局对象config.keyCodes自行定义按键修饰符，例如：

Vue.config.keyCodes.KEYNAME = 112

当然，在实际使用的时候也允许我们不去定义修饰符而直接去使用按键对应的数字（按键码），例如：

<input v-on:keyup.13="submit">

但是这种方式直接记忆数字与按键的关系，不是很方便。已经被官方废弃了，并且可能在最新的浏览器中不被支持。参考地址：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

<body><div id="app"><!-- 按住 alt + c --><input type="text" @keyup.alt.67="test"></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {},methods: {test () {console.log('啦啦啦')}}})
</script>

1.6 循环分支（判断）指令

1.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，可以考虑使用索引替代）

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

对象遍历使用示例：

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

示例代码：

<body><div id="app"><!-- 遍历时建议添加 属性 key，给每一个元素都添加了标识 (十把锁十把钥匙) --><!-- 如果没有唯一值时，使用索引值代替 key --><!-- 数组 （item, index） of arr --><!-- 对象 (value, key, index) of arr --><!-- 遍历fruits --><ul><li v-for="(item, index) of fruits" :key="index">{{ item }}</li></ul><!-- 遍历 obj--><ul><li v-for="(value, key) of obj" :key="index">{{ key }}: {{ value }}</li></ul><!-- 遍历arr --><ul><li v-for="item of arr" :key="item.id">{{ item.name }}</li></ul></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {fruits: ['apple', 'pear', 'banana', 'orange'],obj: {username: 'zhangsan', age: 28, gender: 'male' },arr: [{ id: 1, name: '石越' },{ id: 2, name: '张鸣涛' }]}})
</script>

<!--练习-->
<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="lib/vue.js"></script>
<script> new Vue({ el: '#app',data: { cars: ['bmw','aodi','benchi','haima'], user: { username: 'zhangsan', gender: 'mele',//性别，sex age: 22 } } })
</script>

1.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指令结合起来使用（循环+分支）。例如：

<body><div id="app"><!-- v-if v-else-if v-else --><!-- v-show --><input type="text" v-model="grade"><div v-if="grade >= 90">优</div><div v-else-if="grade >= 80">良</div><div v-else-if="grade >= 70">中</div><div v-else-if="grade >= 60">差</div><div v-else>不及格</div><hr><div v-show="grade >= 90">优</div><div v-show="grade >= 80 && grade < 90">良</div><div v-show="grade >= 70 && grade < 80">中</div><div v-show="grade >= 60 && grade < 70">差</div><div v-show="grade < 60">不及格</div></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {grade: 98}})
</script>

通过审查元素观察 v-if 以及 v-show的区别

1.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 
} ]

参考核心代码

<body><div id="app"><table border="1"><tr><th>商品id</th><th>商品名称</th><th>商品价格</th><th>操作</th><th>小计</th></tr><tr v-for="(item, index) of cartData" :key="item.id"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.price }}</td><td><button :disabled="item.num<=1" @click="item.num-=1">-</button>{{ item.num }}<button @click="item.num+=1">+</button><button @click="deleteItem(index)">X</button></td><td>{{ item.num * item.price }}</td></tr></table></div>
</body>
<script src="lib/vue.js"></script>
<script>const cartData = [{id:1,name:'苹果',num:1,price:100}, {id:2,name:'小米',num:1,price:200}, {id:3,name:'华为',num:1,price:300}]const app = new Vue({el: '#app',data: {cartData},methods: {deleteItem (index) {confirm('确认删除吗') && this.cartData.splice(index, 1)}}})
</script>

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

1.8 样式绑定

1.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>

案例：

<head><style>.active {color: #fff;background-color: #f66;}.ft {font-size: 30px}</style>
</head>
<body><div id="app"><div class="active">class的使用</div><!-- class的对象语法 --><div :class="{active: isActive}">class的对象语法</div><!-- class的数组语法 --><div :class="[test, fn1]">class的数组语法</div><!-- 三目运算符 解决问题 --><div :class="isActive ? 'active' : ''">class的对象语法 ---- 三目运算符</div></div>
</body>
<script src="lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {isActive: true,test: 'active',fn1: 'ft'}})
</script>

1.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>

1.9 v-model

修饰符

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

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

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

<body><div id="app"><input type="text" v-model.lazy="username"> {{ username }}<input type="text" v-model.number="num"> {{ num }}<!-- 在用户未输入 和 输入后 点击按钮测试 --><button @click="getType">获取num的数据类型</button><!-- <input type="text" v-model.trim="note"> --><input type="text" v-model="note"><button @click="getVal">获取note的值</button></div>
</body>
<script src="lib/vue.js"></script>
<script>new Vue({el: '#app',data: {username: '',num: '100',note: ''},methods: {getType () {console.log(typeof this.num)},getVal () {// console.log(this.note)console.log(this.note.trim())}}})
</script>

1.10 综合案例：购物车全选/全不选

分析给全选按钮绑定什么样的事件
- click
- change
全选复选框与商品列表前面的复选框不是一回事
- 两者v-mode的值肯定是不一样的
- 全选按钮的v-mode值应该是一个bool值
- 商品列表前面的复选框v-model值应该是一个数组

参考代码

<body><div id="app"><input type="checkbox" value="a" v-model="arr">a<input type="checkbox" value="b" v-model="arr">b<input type="checkbox" value="c" v-model="arr">c<input type="checkbox" value="d" v-model="arr">d<div>{{ arr }}</div></div>
</body>
<script src="lib/vue.js"></script>
<script>new Vue({el: '#app',data: {arr: ['c']}
})
</script>

<body><div id="app">{{ checkarr }}<table border="1"><tr><th><input type="checkbox" v-model="checked" @change="checkAll"></th><th>商品id</th><th>商品名称</th><th>商品价格</th><th>操作</th><th>小计</th></tr><tr v-for="(item, index) of cartData" :key="item.id"><td><input type="checkbox" :value="item.id" v-model="checkarr"></td><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.price }}</td><td><button :disabled="item.num<=1" @click="item.num-=1">-</button>{{ item.num }}<button @click="item.num+=1">+</button><button @click="deleteItem(index)">X</button></td><td>{{ item.num * item.price }}</td></tr></table></div>
</body>
<script src="lib/vue.js"></script>
<script>const cartData = [{id:1,name:'苹果',num:1,price:100}, {id:2,name:'小米',num:1,price:200}, {id:3,name:'华为',num:1,price:300}]const app = new Vue({el: '#app',data: {cartData,checked: false,checkarr: []},methods: {deleteItem (index) {confirm('确认删除吗') && this.cartData.splice(index, 1)},checkAll () {if (this.checked) {this.cartData.forEach((item, index) => {this.checkarr.push(item.id)})} else {this.checkarr = []}}}})
</script>
</html>

Vue-常用指令

🌈个人主页：前端青山 🔥系列专栏：Vue篇 🔖人终将被年少不可得之物困其一生依旧青山,本期给大家带来Vue篇专栏内容:Vue-常用指令目录 1.1 v-cloak 1.2 双向数据绑定指令 v-model 1.3 v-once 1.4 绑定属性 v-bind…...

编程日记 2025/7/18 4:27:49

守护进程

目录守护进程前台进程后台进程 session（进程会话） 前台任务和后台任务比较好本质绘画和终端都关掉了，那些任务仍然在 bash也退了，然后就托孤了编辑守护进程化---不想受到任何用户登陆和注销的影响编辑如何…...

编程日记 2025/7/18 3:09:17

GPON原理

GPON网络架构对于OLT来说，它就相当于一个指挥官，它指挥PON口下的ONU在指定的时间段内发送数据以及发起测距过程等而ONU则是一个士兵，按照OLT的指挥做出相应而ODN它主要就是提供一个传输通道，主要包括分光器和光纤组成对于PO…...

编程日记 2025/7/17 12:07:52

华三(HCL)和华为(eNSP）模拟器共存安装手册

接上章叙述，解决同一台PC上同时部署华三(HCL)和华为(eNSP）模拟器。原因就是华三HCL 的老版本如v2及以下使用VirtualBox v5版本，可以直接和eNSP兼容Oracle VirtualBox，而其他版本均使用Oracle VirtualBox v6以上的版本，…...

编程日记 2025/7/18 3:26:44

类和对象--中--初始化列表（重要）、隐式类型转化（理解）、最后两个默认成员函数

1.初始化列表 1.1作用： 通过特定的值，来初始化对象。 1.2定义： 初始化列表，就相当于定义对象（开空间）。不管写不写初始化列表，每个成员变量都会走一遍初始化列表（开出对应的空间…...

编程日记 2025/7/18 4:09:57

clickhouse 使用global in 优化 in查询

文章目录 in例子使用global in in例子 SELECT uniq(UserID) FROM distributed_table WHERE CounterID 101500 AND UserID IN (SELECT UserID FROM distributed_table WHERE CounterID 34)对于in 查询来说，本来查询的就是分布式表，假设这个表有100 个…...

编程日记 2025/7/18 4:04:42

macos 14.0 Monoma 修改顶部菜单栏颜色

macos 14.0 设置暗色后顶部菜单栏还维持浅色，与整体不协调。修改方式如下：...

编程日记 2025/7/18 1:05:28

鸿蒙动画开发07——粒子动画

1、概述粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。动画元素是一个个粒子，这些粒子可以是圆点、图片。我们可以通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感，比如下…...

编程日记 2025/7/18 3:16:56

Matlab 2016b安装教程附安装包下载

软件介绍 MATLAB（矩阵实验室）是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。MATLAB具有数值分析、数值和符号计算、工程与科学绘图、控制系统的设计与仿真、数字图像处理、数字信…...

编程日记 2025/7/18 3:42:17

Container image .... already present on machine 故障排除

故障现象： Normal Pulled 12s (x2 over 15s) kubelet Container image “registry.cn-hangzhou.aliyuncs.com/yinzhengjie-k8s/apps:v1” already present on machine kubectl get pods NAME READY STATUS RESTARTS AGE two-pod 1/2 Error …...

编程日记 2025/7/18 4:13:43

力扣二叉树的层序遍历-102

二叉树的层序遍历-102 class Solution { public:vector<vector<int>> levelOrder(TreeNode* root) {vector<vector<int>> res; // 二维数组用来存储每层节点if (root nullptr)return res;queue<TreeNode*> q; // 队列用来进行层序遍历q.push(r…...

编程日记 2025/7/18 4:07:26

Java 平衡二叉树判断详解

判断平衡二叉树的详解（Java 实现） 平衡二叉树的定义： 平衡二叉树（Balanced Binary Tree）是指一棵二叉树中任意节点的左右子树高度差不超过 1。即： ∣ h e i g h t ( l e f t ) − h e i g h t ( r i g h …...

编程日记 2025/7/18 3:02:05

Java设计模式笔记（一）

Java设计模式笔记（一） （23种设计模式由于篇幅较大分为两篇展示） 一、设计模式介绍 1、设计模式的目的让程序具有更好的： 代码重用性可读性可扩展性可靠性高内聚，低耦合 2、设计模式的七大原则单一职…...

编程日记 2025/7/18 3:26:43

【人工智能学习之yolov8改进的网络怎么指定规模】

yolov8改进的网络怎么指定规模在你更换主干网络或者做了其他修改之后，发现模型总是默认使用的n规模，而n规模有可能无法完成任务，怎么办呢，有什么办法指定规模大小呢？ WARNING ⚠️ no model scale passed. Assuming …...

编程日记 2025/7/18 3:44:43

网络安全概述

网络安全物理安全网络的物理安全是整个网络系统安全的前提。在校园网工程建设中，由于网络系统属于弱电工程，耐压值很低。因此，在网络工程的设计和施工中，必须优先考虑保护人和网络设备不受电、火灾和雷击的侵害&#xff1…...

编程日记 2025/7/17 4:34:10

[MySQL#2] 库 | 表 | 详解CRUD命令 | 字符集 | 校验规则

目录一. 库操作 1. 创建数据库 2. 字符集和校验规则校验规则对数据库的影响显示创建数据库时对应的命令 3. 修改数据库 4. 数据库删除备份和恢复还原查看连接情况二. 表操作 1. 创建表（定义实例化格式 2. 创建表案例 （实例化数据类型…...

编程日记 2025/7/18 3:14:30

【Unity基础】如何查看当前项目使用的渲染管线？

在 Unity 中，你可以通过以下几种方式查看当前项目使用的是哪个渲染管线： 1. 检查 Graphics Settings 打开 Unity 编辑器，进入顶部菜单：Edit → Project Settings → Graphics。在 Graphics Settings 窗口中，找到 Scr…...

编程日记 2025/7/18 2:55:32

什么是域名监控？

域名监控是持续跟踪全球域名系统（DNS）中变化以发现恶意活动迹象的过程。组织可以对其拥有的域名进行监控，以判断是否有威胁行为者试图入侵其网络。他们还可以对客户的域名使用这种技术以执行类似的检查。你可以将域名监控比作跟踪与自己实物…...

编程日记 2025/7/18 4:02:13

apache中的Worker 和 Prefork 之间的区别是什么?

文章目录内存使用稳定性兼容性适用场景 Apache中的Worker和Prefork两种工作模式在内存使用、稳定性以及兼容性等方面存在区别内存使用 Worker：由于使用线程，内存占用较少。Prefork：每个进程独立运行，内存消耗较大。稳定性 W…...

编程日记 2025/7/17 20:12:31

解决SSL VPN客户端一直提示无法连接服务器的问题

近期服务器更新VPN后，我的win10电脑一致无法连接到VPN服务器， SSL VPN客户端总是提示无法连接到服务端。网上百度尝试了各种方法后，终于通过以下设置方式解决了问题： 1、首先，在控制面板中打开“网络和共享中心”窗口&…...

编程日记 2025/7/16 22:20:53

网络基础概念

1.网络协议网络协议是一组标准和规则，用于定义电子设备如何在网络上通信。这些规则涵盖了数据如何格式化，传输，路由以及接收。网络协议确保了不同制造商的设备能够相互理解和交换数据协议分层协议也是软件，在设计上为了更好…...

编程日记 2025/7/16 5:06:37

sunshine和moonlight串流网络丢失帧高的问题（局域网）

注：此贴结果仅供参考场景环境：单身公寓路由器：2016年的路由器开始：电脑安装sunshine软件，手机安装moonlight软件开始串流发现网络丢失帧发现巨高一开始怀疑就是路由器问题，因为是局域网，而…...

编程日记 2025/7/17 2:24:14

远程视频验证如何改变商业安全

如今，商业企业面临着无数的安全挑战。尽管企业的形态和规模各不相同——从餐厅、店面和办公楼到工业地产和购物中心——但诸如入室盗窃、盗窃、破坏和人身攻击等威胁让安全主管时刻保持警惕。虽然传统的监控摄像头网络帮助组织扩大了其态势感知能力，但…...

编程日记 2025/7/18 1:31:11

CTO 实际上是做什么的？

https://vadimkravcenko.com/shorts/what-cto-does/ 有刪節本文旨在为软件工程师解密CTO的角色，并为那些渴望担任这一职位的人提供路线图。 “他们是技术团队与公司其他部门之间的桥梁，确保技术支持并推动业务发展。” CTO的角色经常被误解。CTO有时是…...

编程日记 2025/7/13 17:26:26

【软考速通笔记】系统架构设计师④——系统工程基础知识

文章目录一、前言二、系统工程方法2.1 霍尔的三维结构2.2 切克兰德法2.3 并行工程2.4 综合集成法三、系统工程生命周期四、系统生命周期方法五、系统性能5.1 计算机的性能指标5.2 路由器的性能指标5.3 交换机的性能指标5.4 网络的性能资料5.5 操作系统的性能指标5.6 数据库的…...

编程日记 2025/7/13 9:24:08

2024赣ctf-web -wp

1.你到底多想要flag??? 首先来解决第一关： 先了解一下stripos（）； 并且此函数处理数组返回false。而且pre_match同样遇见数组是返回false（解释一下正则 i：这是正则表达式的修饰符，代表“不区…...

编程日记 2025/7/13 5:39:55

Android Framework AudioFlinge 面试题及参考答案

目录请解释什么是 AudioFlinger？ AudioFlinger 在 Android 系统中的位置是什么？ AudioFlinger 的主要职责有哪些？ AudioFlinger 如何管理音频流？在 AudioFlinger 中，什么是音频会话？请简述 AudioFlinger 的工作流程。 AudioFlinger 是如何与硬件交互的？在 A…...

编程日记 2025/7/13 1:20:38

英语知识在线平台：Spring Boot技术应用

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。是基于SQL的客户/服务器模式的关系数据库管理系统，它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等，非常…...

编程日记 2025/7/14 20:15:23

Qt5.14.2的安装与环境变量及一些依赖库的配置

目录 1.Qt5.14.2安装 2.Qt环境变量及一些依赖库的配置 1.Qt5.14.2安装 QT从入门到入土（一）——Qt5.14.2安装教程和VS2019环境配置 - 唯有自己强大 - 博客园 2.Qt环境变量及一些依赖库的配置假设QT安装目录为: D:\Qt\Qt5.14.2 将目录: D:\Qt\Qt5.14.…...

编程日记 2025/7/13 21:20:02

2024年9月中国电子学会青少年软件编程（Python）等级考试试卷（六级）答案 + 解析

一、单选题 1、下面代码运行后出现的图像是？（ ） import matplotlib.pyplot as plt import numpy as np x np.array([A, B, C, D]) y np.array([30, 25, 15, 35]) plt.bar(x, y) plt.show() A. B. C. D. 正确答案：A 答案…...

编程日记 2025/7/15 15:20:57

go编程中yaml的inline应用

下列代码，设计 Config 和 MyConfig 是为可扩展 Config，同时 Config 作为公共部分可保持变化。采用了匿名的内嵌结构体，但又不希望 yaml 结果多出一层。如果 MyConfig 中的 Config 没有使用“yaml:",inline"”修饰，则读取…...

编程日记 2025/7/14 5:21:04

Springboot自带注解@Scheduled实现定时任务

基于Scheduled注解实现简单定时任务原理 Spring Boot 提供了Scheduled注解，通过在方法上添加此注解，可以方便地将方法配置为定时任务。在应用启动时，Spring 会自动扫描带有Scheduled注解的方法，并根据注解中的参数来确定任务的…...

编程日记 2025/7/13 16:45:35

VSCode【下载】【安装】【汉化】【配置C++环境（超快）】（Windows环境）

目录一、VSCode 下载 & 安装二、VSCode 汉化三、VSCode C配置配置环境变量如何验证是否成功接着在VSCode中配置编辑一、VSCode 下载 & 安装 VSCode 下载 & 安装-CSDN博客https://blog.csdn.net/applelin2012/article/details/144009210Download Visual St…...

编程日记 2025/7/12 9:13:46

【八股文】小米

文章目录一、vector 和 list 的区别？二、include 双引号和尖括号的区别？三、set 的底层数据结构？四、set 和 multiset 的区别？五、map 和 unordered_map 的区别？六、虚函数和纯虚函数的区别？七、extern C …...

编程日记 2025/7/13 19:00:23

ABAP OOALV模板

自用模板，可能存在问题一、主程序 *&---------------------------------------------------------------------* *& Report ZVIA_OO_ALV *&---------------------------------------------------------------------* REPORT ZVIA_OO_ALV.INCLUDE ZVI…...

编程日记 2025/7/15 11:23:11

qt QDateTime详解

1. 概述 QDateTime 是 Qt 框架中用于处理日期和时间的类。它将 QDate 和 QTime 组合在一起，提供了日期时间的统一处理方案。QDateTime 可以精确到毫秒，并支持时区处理。 2. 重要方法构造函数: QDateTime() 构造无效的日期时间 QDateTime(const QDa…...

编程日记 2025/7/14 1:25:50

鸿蒙安全控件之位置控件简介

位置控件使用直观且易懂的通用标识，让用户明确地知道这是一个获取位置信息的按钮。这满足了授权场景需要匹配用户真实意图的需求。只有当用户主观愿意，并且明确了解使用场景后点击位置控件，应用才会获得临时的授权，获取位置信息并…...

编程日记 2025/7/15 21:42:40

决策树分类算法【sklearn/决策树分裂指标/鸢尾花分类实战】

决策树分类算法 1. 什么是决策树？2. DecisionTreeClassifier的使用（sklearn）2.1 算例介绍2.2 构建决策树并实现可视化 3. 决策树分裂指标3.1 信息熵（ID3）3.2 信息增益3.3 基尼指数（CART） 4. 代码…...

编程日记 2025/7/15 17:50:36

【Android】RecyclerView回收复用机制

概述 RecyclerView 是 Android 中用于高效显示大量数据的视图组件，它是 ListView 的升级版本，支持更灵活的布局和功能。我们创建一个RecyclerView的Adapter： public class MyRecyclerView extends RecyclerView.Adapter<MyRecyclerVie…...

编程日记 2025/7/17 0:25:17

自制Windows系统（十）

上图 （真的不是Windows破解版） 开源地址：仿Windows...

编程日记 2025/7/2 5:22:24

Linux——初识操作系统(Operator System)

前言：大佬写博客给别人看，菜鸟写博客给自己看，我是菜鸟。一、冯偌伊曼体系图一： 在初识操作系统之前，我们需要对计算机的硬件组成做一定的了解。本篇优先对数据信号做初步分析，暂时不考虑控制信号(操作系…...

编程日记 2025/7/14 5:30:01

RuoYi（若依）框架的介绍与基本使用（超详细分析）

**RuoYi（若依）**是一个基于Spring Boot和Spring Cloud的企业级快速开发平台。它集成了多种常用的技术栈和中间件，旨在帮助企业快速构建稳定、高效的应用系统。以下是关于RuoYi框架的详细介绍和基本使用教程，涵盖了从环境搭建到核心…...

编程日记 2025/7/15 1:21:37

js:基础

js是什么 JavaScript是一种运行在客户端的编程语言，实现人机交互的效果 js只要有个浏览器就能跑 js可以做网页特效、表单验证、数据交互、服务端编程服务端编程是前端人拿他们特有的后端语言node.js来干后端干的事情 js怎么组成 JavaScriptECMAScript(语言基…...

编程日记 2025/7/12 23:34:02

easyui combobox 只能选择第一个问题解决

easyui combobox 只能选择第一个问题解决问题现象在拆分开票的时候，弹出框上面有一个下拉框用于选择需要新增的明细行，但是每次只能选择到第一个选择第二条数据的时候默认选择到第一个了代码如下 /*新增发票编辑窗口*/function addTicketDialog…...

编程日记 2025/7/17 10:17:18

【RISC-V CPU 专栏 -- 香山处理器介绍】

文章目录 RISC-V 香山处理器介绍雁栖湖处理器南湖处理器RISC-V 香山处理器介绍相信很多小伙伴对于“香山”都不陌生，它是一款开源RISC-V处理器核，香山的每一代架构，都是采用了湖的名字，第一代架构被命名为雁栖湖，第二代架构则叫做 “南湖”。 “雁栖湖”这款处理器的 R…...

编程日记 2025/7/15 0:07:29

深入理解下oracle 11g block组成

深层次说，oracle数据库的最少组成单位应该是块，一般默认情况下，oracle数据库的块大小是8kb，其中存储着我们平常所需的数据。我们在使用过程中，难免会疑问道：“oracle数据块中到底是怎样组成的，平…...

编程日记 2025/6/30 22:27:35

“华为杯”研究生数学建模比赛历年赛题汇总(2004-2024)

文章目录赛题链接历年赛题2004年赛题2005年赛题2006年赛题2007年赛题2008年赛题2009年赛题2010年赛题2011年赛题2012年赛题2013年赛题2014年赛题2015年赛题2016年赛题2017年赛题2018年赛题2019年赛题2020年赛题2020年赛题2021年赛题2022年赛题2023年赛题2024年赛题赛题链接部…...

编程日记 2025/7/15 4:43:43

LLM PPT Translator

LLM PPT Translator 引言Github 地址UI PreviewTranslated Result Samples 引言周末开发了1个PowerPoint文档翻译工具，上传PowerPoint文档，指定想翻译的目标语言，通过LLM的能力将文档翻译成目标语言的文档。 Github 地址 https://github.…...

编程日记 2025/7/15 14:44:38

【深度学习之一】2024最新pytorch+cuda+cudnn下载安装搭建开发环境

兵马未动，粮草先行。作为深度学习的初学者，快速搭建一个属于自己的开发环境就是头等大事，可以让我们节省许多的时间。这一期我们主要讲一讲2024年最新pytorchcudacudnn下载安装搭建开发环境，以及安装过程中可能遇到的一些问题以及…...

编程日记 2025/7/17 21:42:24

摄像机视频分析软件下载LiteAIServer视频智能分析平台玩手机打电话检测算法技术的实现

随着科技的不断进步，摄像机视频分析软件的发展已经为我们的生活带来了许多便捷。其中，LiteAIServer视频智能分析平台的玩手机打电话检测算法技术尤为突出，它利用先进的图像处理和人工智能技术，能够自动识别并监控视频中的玩手机或…...

编程日记 2025/7/17 15:26:23

1.1 v-cloak

1.2 双向数据绑定指令 v-model

1.3 v-once

1.4 绑定属性 v-bind

1.5 v-on

1.5.1 基本使用

1.5.2 事件修饰符

1.5.3 按键修饰符

1.5.4 自定义修饰符

1.6 循环分支（判断）指令

1.6.1 循环指令

1.6.2 分支指令 - 判断条件

1.7 综合案例：简易购物车

1.8 样式绑定

1.8.1 class样式绑定

1.8.2 style样式处理

1.9 v-model

1.10 综合案例： 购物车全选/全不选

相关文章：

1.10 综合案例：购物车全选/全不选