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表示要处理的数组的值

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

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

相关文章

Java为什么会成为现在主流的编程语言

Java为什么会成为现在主流的编程语言

Java为什么会成为现在的主流语言 前言一、Java语言概述Java是什么为什么大多数人会选择从事Java为什么从事Java的工作者数量从年递减 二、Java语言的特点简单性面向对象分布式&#xff08;微服务&#xff09;健壮性安全性体系结构中立可移植性解释型高性能多线程动态性 三、Jav…
阅读更多...
UDP多对多组播通信

UDP多对多组播通信

广播和多播仅应用于UDP。TCP是一个面向连接的协议&#xff0c;TCP一定是点对点的&#xff0c;一点是两个主机来建立连接的&#xff0c;TCP肯定是单播。只有UDP才会使用广播和组播。 如下示例实现一个UDP多对多的组播通信&#xff0c;进程中有收、发两个线程&#xff0c;分别表…
阅读更多...
6款电脑精选工具软件推荐！

6款电脑精选工具软件推荐！

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 1.IP地址查看工具——纯真ip数据库 纯真IP数据库是一个易于操作的IP地址查询工具&#xff0c;它允许用户通过输入IP地址来查询其对应的地理位置…
阅读更多...
Django创建网站的地基

Django创建网站的地基

相关文档 1、为新网站创建一个文件夹&#xff08;这里是&#xff1a;locallibrary&#xff09; D:\django>mkdir locallibraryD:\django>cd locallibraryD:\django\locallibrary>dirVolume in drive D is 新加卷Volume Serial Number is B68C-03F7Directory of D:\dj…
阅读更多...
【Uniapp】简易封装提示框showToast/showModal

【Uniapp】简易封装提示框showToast/showModal

组件 // 封装提示框 export const showModal (content, showCancel false, title "提示") > {return new Promise((resolve, reject) > {uni.showModal({title: title,content: content,showCancel: showCancel,success: (res) > {resolve(res);},fail:…
阅读更多...
结合多模态 AI 谷歌展示 AR 眼镜原型机；Meta 被曝开发带摄像头的 AI 耳机丨 RTE 开发者日报 Vol.204

结合多模态 AI 谷歌展示 AR 眼镜原型机；Meta 被曝开发带摄像头的 AI 耳机丨 RTE 开发者日报 Vol.204

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」&#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…
阅读更多...
如何修改android 项目显示的app名

如何修改android 项目显示的app名

修改vlaues下的string.xml文件 修改这个标签中的内容就行
阅读更多...
国产银河麒麟V10SP1系统安装Qt和MySql步骤

国产银河麒麟V10SP1系统安装Qt和MySql步骤

安装软件&#xff1a;准备好Kylin-Desktop-V10-SP1-Release-hwe-2107-x86_64.iso和qt-opensource-linux-x64-5.14.2.run 安装步骤&#xff1a; 1、VMWare软件中新建一个虚拟机并安装Kylin-Desktop-V10-SP1-Release操作系统&#xff0c;安装时候输入密码的地方记得要用英文&am…
阅读更多...
“网络安全新纪元：等保2.0的详细解读与实践”

“网络安全新纪元：等保2.0的详细解读与实践”

网络安全等级保护基本要求》&#xff08;等保2.0&#xff09;于2019年6月发布&#xff0c;是我国网络安全等级保护制度的一项重要标准。等保2.0主要针对关键信息基础设施的网络安全保护&#xff0c;对数据安全和个人信息保护提出了更高的要求。本文将对等保2.0进行详细解读&…
阅读更多...
动态路由实验新手入门：快速掌握核心知识点

动态路由实验新手入门：快速掌握核心知识点

大家好&#xff0c;这里是G-LAB IT实验室。今天带大家学习一下华为动态路由实验配置&#xff0c;新手入门&#xff0c;快速掌握核心知识点&#xff01; 01、实验拓扑 02、实验需求 1.根据拓扑运行对应的路由协议 2.每个路由器都有自己的环回口&#xff0c;宣告的区域不限制 …
阅读更多...
IDEA不能创建新项目和新模块

IDEA不能创建新项目和新模块

问题&#xff1a; IDEA不管是创建新项目还是新模块都创建不成功&#xff0c;会报如下图错误 解决方案&#xff1a; 在电脑设置里搜索 “防火墙和网络保护” &#xff0c;打开如下图所示 找到你所安装的IDEA&#xff0c;更改设置&#xff0c;选中IDEA 最后&#xff0c;确定&am…
阅读更多...
香港优才计划避坑指南及过来人建议，这6种行为会毁了你的香港身份！

香港优才计划避坑指南及过来人建议，这6种行为会毁了你的香港身份！

香港优才计划是一项香港人才引进政策&#xff0c;如果你想真正落户香港&#xff0c;那么就需要了解清楚香港优才从申请到永居的整个流程&#xff0c;并且要注意维护好香港身份。 如果操作不当&#xff0c;可能会中断你来之不易的香港身份。 本文总结了香港优才整个流程中&…
阅读更多...
nmap端口扫描工具——Win10

nmap端口扫描工具——Win10

Nmap安装流程&#xff1a; Nmap官网链接&#xff1a;Download the Free Nmap Security Scanner for Linux/Mac/Windows Nmap参考文档链接&#xff1a;https://nmap.org/book/toc.html Nmap使用流程&#xff1a; Nmap软件主页面&#xff1a; 中文版&#xff1a; nmap -T4 -…
阅读更多...
Prosys OPC UA Simulation Server工程文件备份方法

Prosys OPC UA Simulation Server工程文件备份方法

Prosys OPC UA Simulation Server是一款免费的OPC UA服务器仿真软件&#xff0c;具体的使用和下载参考官网&#xff1a; Prosys OPC - OPC UA Simulation Server Downloads 他的免费版本不提供工程文件的备份、导入导出功能&#xff0c;每次退出时保存。如果需要工程备份&a…
阅读更多...
IPsec VPN简介

IPsec VPN简介

什么是IPsec&#xff1f; IPsec&#xff08;Internet Protocol Security&#xff09;是为IP网络提供安全性的协议和服务的集合&#xff0c;它是VPN&#xff08;Virtual Private Network&#xff0c;虚拟专用网&#xff09;中常用的一种技术。其实就是一种协议簇&#xff08;类…
阅读更多...
揭秘SmartEDA魅力：为何众多学校青睐这款电路仿真软件？

揭秘SmartEDA魅力：为何众多学校青睐这款电路仿真软件？

在当今数字化、信息化的教育时代&#xff0c;电子电路仿真软件已成为电子学教学不可或缺的重要工具。其中&#xff0c;SmartEDA电路仿真软件以其强大的功能、用户友好的界面以及丰富的教育资源&#xff0c;赢得了众多学校的青睐。那么&#xff0c;究竟是什么原因让SmartEDA成为…
阅读更多...
如何在阿里云申请免费SSL证书（三个月有效）

如何在阿里云申请免费SSL证书（三个月有效）

SSL证书主要用于建立Web服务器和客户端间可信的HTTPS协议加密链接&#xff0c;以防止数据在传输过程中被篡改&#xff0c;避免信息泄露。阿里云提供了多种品牌和类型的SSL证书&#xff0c;以满足不同用户的需求。您可以根据自己的预算、域名类型以及网站类型&#xff0c;选择购…
阅读更多...
软件工程期末复习（7）需求过程

软件工程期末复习（7）需求过程

需求分析 需求过程 什么是需求过程&#xff1f; 需求过程是用来导出、确认和维护系统需求文档的一组结构化活动。通常&#xff0c;一个良好的需求过程应包括下列活动&#xff1a; 需求提取需求分析和协商需求确认 需求提取 需求提取是通过与客户、系统用户和其他与系统开发相…
阅读更多...
Cannot read properties of undefined (reading ‘init‘)报错

Cannot read properties of undefined (reading ‘init‘)报错

出现这个报错是印象项目没有引echarts包 npm i echarts 下包 然后在main.js中引入 import echarts from echarts Vue.prototype.$echarts echarts 如果还不行 import * as echarts from echarts; 更改一下引入方式 ok了
阅读更多...
vue3 + ts中，element-plus组件通过ref引用组件内方法，显示提示

vue3 + ts中，element-plus组件通过ref引用组件内方法，显示提示

在vue3 ts 项目中&#xff0c;我们通过ref引用element-plus组件内部方法时&#xff0c;编辑器没有提示信息&#xff0c;通常我们都是如下写法 这里想进行一下表单校验&#xff0c;需要引用el-form组件中的validate方法&#xff0c;从这里可以看出是没有给相应的提示信息的。这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023