Vue初识

本文探讨了Vue.js中常见的绑定函数使用,如v-bind、v-on和v-model,解析了main.js的作用,并对比了exportdefault与newVue的区别。深入讲解了<router-view/>在App.vue中的意义及单页面应用的概念。此外,还详细分析了在使用v-for循环时遇到的重复key错误及其修正方法。

1:绑定函数

v-bind; v-on; v-model

2:main.js作用

3:export default 和 new Vue的区别

4: <router-view/>在App.vue的含义,单页面应用5

5:遇到的报错:

错误

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

这两个的原因是,我在v-for中的v-bind:key没有使用唯一的标识,用的是对象

错误代码:

<tr v-bind:key="student" v-for="student in students">

正确代码:

<tr v-bind:key="student.yanID" v-for="student in students">

错误

[vue/require-v-for-key]
Elements in iteration expect to have 'v-bind:key' directives.eslint

原因,没有bind-key

错误代码:

<tr v-bind:key="student" v-for="student in students">

正确代码:

<tr v-bind:key="student.yanID" v-for="student in students">

 

内容概要:本文深入剖析了HTTPS中SSL/TLS握手的全流程,系统讲解了HTTPS的诞生背景及其相较于HTTP在安全性上的优势,重点阐述了SSL/TLS握手各阶段的技术细节,包括ClientHello、ServerHello、证书交换、密钥交换及加密通信建立等环节。文章结合加密基础概念(对称加密、非对称加密、哈希算法)和数字证书机制,解释了数据加密、身份验证与完整性保护的实现原理,并通过Wireshark抓包实例帮助读者直观理解握手过程中的数据交互。同时,归纳了常见握手失败问题及其解决方案,最后对SSL/TLS未来发展趋势进行了展望,涵盖抗量子加密算法和高效协议优化方向。; 适合人群:具备基本网络和安全知识的开发人员、运维工程师、网络安全爱好者,以及希望深入理解HTTPS底层机制的技术从业者;尤其适合1-3年经验、正在向中高级岗位发展的技术人员。; 使用场景及目标:①掌握HTTPS工作原理及SSL/TLS握手全过程,理解加密通信建立机制;②能够分析和排查HTTPS连接中的证书、加密套件、版本兼容等问题;③通过抓包实践提升对网络安全协议的实际分析能力;④为后续学习TLS 1.3、零RTT、前向保密等高级主题打下坚实基础; 阅读建议:此资源理论与实践结合紧密,建议在学习过程中同步使用Wireshark等工具进行抓包实验,对照文档中的握手阶段逐一验证各消息内容,加深对加密协商、证书验证和密钥生成过程的理解。同时关注最新TLS版本的发展趋势,拓展安全视野。
### 初学者适用的 Vue 代码示例 对于刚开始学习 Vue 的开发者来说,理解如何构建简单的组件是非常重要的。下面提供了一个基础的例子来展示如何创建一个可以切换显示消息的应用程序。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Beginner Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> </body> </html> ``` 此段代码展示了如何定义一个基本的 Vue 实例并将其挂载到 HTML 页面中的特定元素上[^1]。通过 `data` 属性设置初始状态,并利用方法属性定义了用于响应按钮点击事件的方法。当用户单击按钮时,会调用 `reverseMessage()` 方法反转字符串的内容。 #### 单文件组件方式实现相同的功能 如果采用单文件组件的方式编写相同的逻辑,则代码结构如下所示: ```vue <template> <div class="example"> <p>{{ message }}</p> <button @click="reverseMessage">Reverse Message</button> </div> </template> <script> export default { name: 'ExampleComponent', data() { return { message: 'Hello Vue!', }; }, methods: { reverseMessage() { this.message = this.message.split('').reverse().join(''); }, }, }; </script> <style scoped> .example { font-family: Arial; } </style> ``` 这种方式不仅保持了HTML、JavaScript 和 CSS 的分离,还提高了可维护性和重用性[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值