Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。
1. v-text指令
<body>
<div id="app">
<p v-text="info"></p>
</div>
<script>
const obj = {
data(){
return{
info:'<input type="text" name="userName">啦啦啦'
}
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
2. v-html指令
在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
一定要在可信的内容上使用v-html，永不要在用户提交的内容上！
<body>
<div id="app">
<p v-html="info"></p>
</div>
<script>
const obj = {
data(){
return{
info:'<input type="text" name="userName">啦啦啦'
}
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
3. v-show指令
v-show指令根据表达式的真假，显示或隐藏HTML元素。
使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"
<body>
<div id="app">
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">NO!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('Smith') >= 0">Name: {{ name }}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
yes: true,
no: false,
age: 28,
name: 'Will Smith'
}
}
}).mount('#app');
</script>
</body>
4. v-if指令
v-if 指令根据表达式值得真假来生成或删除一个元素。
<body>
<div id="app">
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">NO!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('Smith') >= 0">Name: {{ name }}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
yes: true,
no: false,
age: 28,
name: 'Will Smith'
}
}
}).mount('#app');
</script>
</body>
(3)v-if和v-show的区别：
A、实现方式不同：v-if底层采用DOM的appendChild方法创建元素添加到页面中v-show是通过CSS的display属性来控制是否显示元素
B、加载性能：v-if快，v-show慢
C、切换开销：v-if的开销大,v-show的开销小
5.v-else-if/v-else指令
v-else-if指令与 v-if 指令一起使用，可以实现互斥的条件判断。
<body>
<div id="app">
<span v-if="score>=85">优秀</span>
<span v-else-if="score>=75">良好</span>
<span v-else-if="score>=60">及格</span>
<span v-else>不及格</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm=Vue.createApp({
data(){
return{
score:90
}
}
}).mount('#app');
</script>
</body>
6. v-for指令
v-for 指令就是通过循环的方式渲染一个列表，循环的对象可以是数组，也可以是一个javascript对象。
v-for 指令的表达式还支持一个可选的参数作为当前项的索引。
6.1 v-for 遍历数据
表达式的语法形式为item in items。其中，items是源数据数据；item是被迭代数据元素的别名。
<body>
<div id="app">
<ul>
<li v-for="(book,index) in books">{{index}} - {{book.title}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: 'Servlet/JSP深入详解'}
]
}
}
}).mount('#app');
</script>
</body>
6.2 v-for遍历对象
遍历对象的语法形式和遍历数组是一样的，即value in Object。Object是被迭代的对象，value是被迭代的对象属性的别名
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in book">{{index}}. {{key}} : {{value}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
book: {
title: 'JavaScript',
author: '无雨溪',
isbn: '9787121362217'
}
}
}
}).mount('#app');
</script>
</body>
7. v-bind指令
v-bind指令主要用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。
<style>
.ok{
color: red;
font-size: 25px;
}
#d1{
width: 50px;
height: 50px;
background-color: red;
}
</style>
<body>
<div id="app">
<a v-bind:href="link">百度一下</a>
<br><br>
<p v-bind:class="{ok:isOk}">西安邮电大学</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const obj={
data(){
return{
link:'http://www.baidu.com',
isOk:true,
}
},
methods:{}
Vue.createApp(obj).mount('#app')
</script>
</body>
8. v-on指令
v-on指令用于监听DOM事件，并在触发时运行一些JavaScript代码。v-on指令的表达式可以是一段JavaScript代码，也可以是一个方法的名字或方法调用语句。
<style>
#d1 {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<button type="button" v-on:click="myClick">确定</button>
<br><br>
<div id='d1' v-on="{click:clickDiv,mouseover:myOver}"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const obj = {
data() {
return {
}
},
methods: {
myClick: function () {
alert('你点击了按钮！！')
},
clickDiv() {
alert('你单击了div！！！');
},
myOver() {
alter('悬停');
}
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
9. v-model指令
v-model指令用来在表单<input><textarea>和<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model的本质不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。
<body>
<div id="app01">
<p>请选择你的性别：</p>
<div>
<input type="radio" value="男" v-model="gender" name="sex"/>男
<input type="radio" value="女" v-model="gender" name="sex"/>女
</div>
<br><br>
<p>你的性别是：{{gender}}</p>
<p>毕业院校：</p>
<div>
<select v-model="school">
<option>请选择</option>
<option value="西安邮电大学">西安邮电大学</option>
<option value="陕西师范大学">陕西师范大学</option>
<option value="西安科技大学">西安科技大学</option>
</select>
</div>
<br><br><br><br>
<p>你的学校是：{{school}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const obj={
data(){
return{
gender:'',
school:''
}
}
}
Vue.createApp(obj).mount('#app01')
</script>
</body>
10. v-once指令
v-once指令可以让元素或组件只渲染一次，该指令不需要表达式。之后再次渲染时，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<body>
<div id="app">
<h1>{{title}}</h1>
<a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
title: 'v-once指令的用法',
navs: [
{name: '首页', url: './home.html'},
{name: '新闻', url: './news.html'},
{name: '视频', url: './video.html'},
]
}
}
}).mount('#app');
</script>
</body>
11. v-pre指令
v-pre指令也不需要表达式，用于跳过这个元素及其所有子元素的编译。v-pre指令可以用来显示原始Mustache标签。对于大量没有指令的节点使用v-pre指令可以加快编译速度。
<body>
<div id="app">
<h1 v-pre>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Java无难事',
}
}
}).mount('#app');
</script>
</body>
12.v-cloak指令
v-cloak指令也不需要表达式，这个指令保留在元素上直到关联的组件实例编译结束，编译结束后该指令被移除。当和CSS规则如[v-clock]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕。
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app">
<h1 v-cloak>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Vue.js无难事'
}
}
}).mount('#app');
</script>
</body>
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。 内容有： ①：Hub模型的方法介绍 ②：服务器端代码介绍 ③：前端vue3安装并调用后端方法 ④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
昨晚看到IDEA官推宣布IntelliJIDEA2023.1正式发布了。简单看了一下，发现这次的新版本包含了许多改进，进一步优化了用户体验，提高了便捷性。至于是否升级最新版本完全是个人意愿，如果觉得新版本没有让自己感兴趣的改进，完全就不用升级，影响不大。软件的版本迭代非常正常，正确看待即可，不持续改进就会慢慢被淘汰！根据官方介绍：IntelliJIDEA2023.1针对新的用户界面进行了大量重构，这些改进都是基于收到的宝贵反馈而实现的。官方还实施了性能增强措施，使得Maven导入更快，并且在打开项目时IDE功能更早地可用。由于后台提交检查，新版本提供了简化的提交流程。IntelliJIDEA
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
介绍pytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试、接口自动化测试（pytest+requests）pytest具有很多第三方插件，并且可以自定义扩展，比较好用的如pytest-selenium（集成selenium）、pytest-html（完美html测试报告生成）、pytest-rerunfailures（失败case重复执行）、pytest-xdist（多CPU分发）等测试用例的skip和xfail处理可以很好的和jenkins集成
这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：
Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工
📝学技术、更要掌握学习的方法，一起学习，让进步发生👩🏻作者：一只IT攻城狮。💐学习建议：1、养成习惯，学习java的任何一个技术，都可以先去官网先看看，更准确、更专业。💐学习建议：2、然后记住每个技术最关键的特性（通常一句话或者几个字），从主线入手，由浅入深学习。❤️《SpringCloud入门实战系列》解锁SpringCloud主流组件入门应用及关键特性。带你了解SpringCloud主流组件,是如何一战解决微服务诸多难题的。项目demo：源码地址👉🏻SpringCloud入门实战系列不迷路👈🏻：SpringCloud入门实战（一）什么是SpringCloud？SpringCloud入门实战
文章目录一，什么是kaliPurle（卡利紫）二，如何安装kaliPurple。（有步骤没图片直接是默认）1，复制它的下载链接到迅雷可以让你下镜像变得更快。2，打开你的虚拟机创建新的虚拟机3，点击后面浏览然后找到镜像的所在地选中确定，下一步4，这里默认就可以，因为Ubuntu和这个差不多架构。5，然后，名字自己改一下，然后把他安到你想要装的盘，容量默认。之后一直下一步就可以**6，打开它，然后第一个图形界面安装，直接回车，然后选中文点continue之后没有图片的直接点继续。7，密码想设什么设什么。然后一直继续到我的图片那里改一下就可以了。8，软件默认就行。9，耐心等待。然后点手动配置dvc然