谷粒商城实战笔记-37-前端基础-Vue-基本语法插件安装

文章目录

  • 一，v-model
    • 1，双向绑定
    • 2，vue的双向绑定
      • 2.1 html元素上使用指令v-model
      • 2.2 model中声明对应属性
      • 2.3，验证
        • view绑定model
        • model绑定view
    • 完整代码
  • 二，v-on
    • 1，指令简介
    • 2，在button按钮中添加v-on:click
    • 完整代码
  • 三，2个插件
    • 1， Vscode插件Vue 2 Snippets
    • 2，chrome插件Vue-devtoos

这一节的主要内容是学习Vue的2个指令：

  • v-model，双向绑定
  • v-on，事件绑定

一，v-model

1，双向绑定

所谓的双向绑定指的是：

  • 视图绑定model(数据)，即model数据的变化后，view会自动刷新
  • model绑定视图，页面上的数据变化后，model对应的数据会自动更新

Vue 的双向绑定是一种数据绑定机制，允许视图（即用户界面）与应用状态（即数据模型）之间的自动同步。

这种机制使得开发者无需手动去追踪和管理视图与数据模型之间的同步，从而大大简化了开发流程。

Vue 实现双向绑定的核心是 v-model 指令。v-model 是一个语法糖，它实际上是一个语法上的便利抽象，结合了数据绑定和事件监听器的功能，使得开发者可以轻松地在表单控件元素（如 input, select, textarea 等）上创建双向数据绑定。

2，vue的双向绑定

2.1 html元素上使用指令v-model

在index.html中添加input元素。

<input v-model="num"/>

v-model 是 Vue.js 提供的一个指令，用于在表单控件（如 input、textarea 和 select 元素）与 Vue 实例中的数据属性之间创建双向数据绑定。

2.2 model中声明对应属性

在view对象中声明num属性。

let vm = new Vue({el: '#app',data: {name: "张二强",num: 100}
})

2.3，验证

view绑定model

打开网页，首先是输入框中会显示数字100，这是因为view绑定了model，model中的数据会被渲染到view。
在这里插入图片描述

model绑定view

当我们在输入框中输入120时，model中的数据也会更新为120。

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input v-model="num"/><h1>{{name}}，非常帅，有{{num}}</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el: '#app',data: {name: "张二强",num: 100}})</script>
</body>
</html>

二，v-on

1，指令简介

v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。

v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。

2，在button按钮中添加v-on:click

在index.html中增加一个button按钮。

<button v-on:click="num++" >点赞</button>

注意，这个按钮使用了v-on:click指令，指令中是js代码，当按钮被点击后，执行这段代码，model中的num自增。

在这里插入图片描述
当然，在v-on中也可以调用model中的方法。

<button v-on:click="cancel" >取消点赞</button>

如上，在一个button中使用v-on:click指令注册了click事件，这个事件调用了cancel方法，其在vue对象中的声明如下。

let vm = new Vue({el: '#app',data: {name: "张二强",num: 100},methods:{cancel(){this.num--;}}})

注意，方法都要声明在methods下。

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input v-model="num"/><button v-on:click="num++" >点赞</button><button v-on:click="cancel" >取消点赞</button><h1>{{name}}，非常帅，有{{num}}</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el: '#app',data: {name: "张二强",num: 100},methods:{cancel(){this.num--;}}})</script>
</body>
</html>

三，2个插件

1， Vscode插件Vue 2 Snippets

在这里插入图片描述
Vue 2 Snippets 主要是指在开发 Vue.js 2 应用时使用的代码片段或模板。在代码编辑器或 IDE 中，Snippets 可以帮助开发者快速插入常用的代码结构，减少重复的手动编码工作，提高开发效率。这些 Snippets 通常包含了 Vue.js 组件的基本结构、指令、计算属性、事件处理器等常见的代码模式。

使用 Vue 2 Snippets 的主要作用包括：

  1. 加速开发：

    • 快速生成预定义的代码块，减少键盘输入，节省时间。

  2. 代码标准化：

    • 保证项目中代码风格的一致性，遵循最佳实践。

  3. 减少错误：

    • 自动插入正确的语法和结构，减少因手写代码而引入的错误。

  4. 易于学习：

    • 对于初学者来说，Snippets 可以作为学习 Vue.js 结构和语法的参考。

  5. 提升团队协作：

    • 当团队成员都使用相同的 Snippets 时，代码更加统一，便于理解和维护。

  6. 智能提示和补全：

    • 许多现代编辑器和 IDE 都支持基于 Snippets 的智能代码补全功能。

例如，在 Visual Studio Code 中，你可以安装专门针对 Vue.js 的扩展插件，如 “Vetur”，它提供了大量的 Vue 2 Snippets。当你开始输入某个触发词时，如 “v-comp”，然后按 Tab 键，就可以自动生成一个 Vue.js 组件的完整模板。

<template><div class="name-of-component"><!-- Your component's template goes here --></div>
</template><script>
export default {name: 'NameOfComponent',props: [],data() {return {// your component's data properties go here};},computed: {},methods: {},created() {},mounted() {},
};
</script><style scoped>
/* Your component's styles go here */
</style>

这样的 Snippets 不仅可以帮助你快速搭建组件框架，还可以让你专注于逻辑实现，而不是花费时间在基础结构的编写上。

2，chrome插件Vue-devtoos

F12打开调试界面，在命令行控制台可以看到安装Vue-devtools插件的提示。

在这里插入图片描述

Vue Devtools 是一个专为 Vue.js 应用程序设计的浏览器扩展工具，它提供了深入的调试功能和可视化界面，帮助开发者更有效地理解和调试 Vue.js 应用。以下是 Vue Devtools 的一些主要作用：

  1. 组件树视图：

    • 显示应用程序中组件的层次结构，便于理解组件之间的父子关系。
    • 高亮显示当前激活的组件，帮助定位和跟踪用户交互。

  2. 组件实例检查：

    • 允许查看和修改组件的状态，包括 data、computed、props、methods 等。
    • 可以查看组件的模板、样式和源代码，以及它们的依赖项。

  3. 时间旅行调试：

    • 记录组件的状态快照，允许开发者回溯到之前的状态，查看状态变化历史。
    • 支持“跳转”到特定的时间点，重现问题发生时的环境。

  4. 性能监控：

    • 监测每个组件的渲染时间和渲染次数，帮助识别性能瓶颈。
    • 提供性能分析工具，如 Profiler，用于详细分析渲染性能。

  5. 事件监听：

    • 显示组件上触发的所有事件，包括自定义事件和内置事件。
    • 可以监听特定事件，观察事件流和事件处理器的行为。

  6. 调试工具：

    • 提供断点调试能力，允许在特定组件或方法上调试。
    • 集成了 Chrome 开发者工具的其他功能，如网络请求监控、CSS 编辑等。

  7. 版本兼容性：

    • 支持多种 Vue.js 版本，包括 Vue 2 和 Vue 3。
    • 提供了版本切换功能，确保工具与应用版本匹配。

  8. 社区支持与更新：

    • 定期更新以修复 bug 和改进功能，保持与最新 Vue.js 核心库的兼容性。
    • 社区活跃，有丰富的文档和教程资源。

总之，Vue Devtools 是 Vue.js 开发者不可或缺的工具之一，它极大地提高了开发效率和调试体验，是学习和优化 Vue.js 应用的重要辅助手段。

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

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

相关文章

llama 2 改进之 RMSNorm

llama 2 改进之 RMSNorm

RMSNorm 论文&#xff1a;https://openreview.net/pdf?idSygkZ3MTJE Github&#xff1a;https://github.com/bzhangGo/rmsnorm?tabreadme-ov-file 论文假设LayerNorm中的重新居中不变性是可有可无的&#xff0c;并提出了均方根层归一化(RMSNorm)。RMSNorm根据均方根(RMS)将…
阅读更多...
前端JS特效第50集：zyupload图片上传

前端JS特效第50集：zyupload图片上传

zyupload图片上传&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; var operimg_id; var zoom_rate100; var zoom_timeout; function rotateimg(){var smallImg$("#"operimg_id);var numsmallImg.attr(curr_rotate);if(nu…
阅读更多...
2024 HNCTF PWN（hide_flag Rand_file_dockerfile Appetizers TTOCrv_）

2024 HNCTF PWN（hide_flag Rand_file_dockerfile Appetizers TTOCrv_）

文章目录 参考hide_flag思路exp Rand_file_dockerfile libc 2.31思路exp Appetizers glibc 2.35绕过关闭标准输出实例客户端 关闭标准输出服务端结果exp TTOCrv_&#x1f3b2; glibc 2.35逆向DT_DEBUG获得各个库地址随机数思路exp 参考 https://docs.qq.com/doc/p/641e8742c39…
阅读更多...
语音识别 语音识别项目相关笔记内容

语音识别 语音识别项目相关笔记内容

语音识别 语音识别项目相关笔记内容 语音识别应用范畴语音识别框架语音基本操作使用scipy.io.wavfile读取wav音频文件获取采样率、长度、通道数使用numpy读取pcm格式音频文件读取wav音频文件，并绘制图像读取双声道的wav音频文件，分别绘制不同声道的波形图读取一个采样率为16k…
阅读更多...
【k8s故障处理篇】calico-kube-controllers状态为“ImagePullBackOff”解决办法

【k8s故障处理篇】calico-kube-controllers状态为“ImagePullBackOff”解决办法

【k8s故障处理篇】calico-kube-controllers状态为“ImagePullBackOff”解决办法 一、环境介绍1.1 本次环境规划1.2 kubernetes简介1.3 kubernetes特点二、本次实践介绍2.1 本次实践介绍2.2 报错场景三、查看报错日志3.1 查看pod描述信息3.2 查看pod日志四、报错分析五、故障处理…
阅读更多...
【Vue】深入了解 v-for 指令：从基础到高级应用的全面指南

【Vue】深入了解 v-for 指令：从基础到高级应用的全面指南

文章目录 一、v-for 指令概述二、v-for 指令的基本用法1. 遍历数组2. 遍历对象3. 使用索引 三、v-for 指令的高级用法1. 组件列表渲染2. 使用 key 提升性能3. 嵌套循环 四、结合其他功能的高级用法1. 处理过滤和排序后的结果2. 迭代数值范围3. 结合其他命令使用模板部分 (<t…
阅读更多...
基于vue3 + vite产生的 TypeError: Failed to fetch dynamically imported module

基于vue3 + vite产生的 TypeError: Failed to fetch dynamically imported module

具体参考这篇衔接&#xff1a; Vue3报错&#xff1a;Failed to fetch dynamically imported module-CSDN博客 反正挺扯淡的&#xff0c;错误来源于基于ry-vue-plus来进行二次开发的时候遇到的问题。 错误起因 我创建了一个广告管理页面。然后发现访问一直在加载中。报的是这样…
阅读更多...
Unity点击生成节点连线

Unity点击生成节点连线

Unity点击生成节点连线 效果 2.主要代码 Test_Line 控制类 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems;public class Test_Line : MonoBehaviour {public GameObject qiu_prefab;public List<Game…
阅读更多...
h5点击电话号跳转手机拨号

h5点击电话号跳转手机拨号

需要使用到h5的 <a>标签 我们首先在<head>标签中添加代码 <meta name"format-detection" content"telephoneyes"/>然后再想要的位置添加代码 <a href"tel:10086"> 点击拨打&#xff1a;10086 </a> 这样功能就实现…
阅读更多...
【Day1415】Bean管理、SpringBoot 原理、总结、Maven 高级

【Day1415】Bean管理、SpringBoot 原理、总结、Maven 高级

0 SpringBoot 配置优先级 从上到下 虽然 springboot 支持多种格式配置文件&#xff0c;但是在项目开发时&#xff0c;推荐统一使用一种格式的配置 &#xff08;yml是主流&#xff09; 1 Bean管理 1.1 从 IOC 容器中获取 Bean 1.2 Bean 作品域 可以通过注解 Scope("proto…
阅读更多...
深入浅出WebRTC—ALR

深入浅出WebRTC—ALR

ALR&#xff08;Application Limited Region&#xff09;指的是网络传输过程中&#xff0c;由于应用层的限制&#xff08;而非网络拥塞&#xff09;导致带宽未被充分利用的情况。在这种情况下&#xff0c;应用层可能因为处理能力、手动配置或其他因素无法充分利用可用带宽&…
阅读更多...
Mybatis配置代码解读（事务管理与连接池）

Mybatis配置代码解读（事务管理与连接池）

目录 配置代码解读 事务管理方式 数据库连接池 测试代码解读 SqlSessionFactory SqlSession 接口的代理对象 ▐ 前言 在上一篇文章 手把手教你搭建Mybatis框架-CSDN博客 中分享了如何搭建Mybatis框架&#xff0c;但没有对一些配置文件和语法做出详细解读&#xff0c;刚…
阅读更多...
免费【2024】springboot 必录德健身器材用品网的设计与实现

免费【2024】springboot 必录德健身器材用品网的设计与实现

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…
阅读更多...
maven私服上传jar包 400 Bad Request 错误

maven私服上传jar包 400 Bad Request 错误

文章目录 前言一、直接看报错二、问题处理三 maven 私服配置说明总结 前言 maven仓库的私服,一般会存放公司或者个人封装的jar包,用来共享给二次开发和协作伙伴用,很方便 第一次发布没有问题,但是我第二次发布,开始报错了 一、直接看报错 401 无权限我这个是400 说明用户名密…
阅读更多...
Sql Server缓冲池、连接池等基本知识（附Demo）

Sql Server缓冲池、连接池等基本知识（附Demo）

目录 前言1. 缓存池2. 连接池3. 彩蛋 前言 基本的知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;Mysql优化高级篇&#xff08;全&#xff09;Mysql底层原理详细剖析常见面试题&#xff08;全&#xff09; 1…
阅读更多...
昇思25天学习打卡营第14天|计算机视觉

昇思25天学习打卡营第14天|计算机视觉

昇思25天学习打卡营第14天 文章目录 昇思25天学习打卡营第14天FCN图像语义分割语义分割模型简介网络特点数据处理数据预处理数据加载训练集可视化 网络构建网络流程 训练准备导入VGG-16部分预训练权重损失函数自定义评价指标 Metrics 模型训练模型评估模型推理总结引用 打卡记录…
阅读更多...
Atom - hackmyvm

Atom - hackmyvm

简介 靶机名称&#xff1a;Atom 难度&#xff1a;简单 靶场地址&#xff1a;https://hackmyvm.eu/machines/machine.php?vmAtom 本地环境 虚拟机&#xff1a;vitual box 靶场IP&#xff08;Atom&#xff09;&#xff1a;192.168.56.101 跳板机IP(windows 11)&#xff1…
阅读更多...
Linux之基础IO（上）

Linux之基础IO（上）

目录 库函数文件操作 写文件 读文件 系统调用文件操作 写文件 读文件 文件描述符fd 深刻理解linux下一切皆文件 重定向原理 在c语言中我们学习了fopen&#xff0c;fread&#xff0c;fwrite接口&#xff0c;用于进行文件相关的操作&#xff0c;在之前我们学习了计算…
阅读更多...
科普文：银行信贷系统概叙

科普文：银行信贷系统概叙

信贷业务流程 资金需求者提交申请&#xff1a;资金需求者通过不同渠道&#xff08;如APP、网站、门店等&#xff09;提交贷款申请。 系统交互完成审批&#xff1a;系统通过自动化和人工相结合的方式&#xff0c;对贷款申请进行初步筛选和审批。 系统交互完成策略判断&#xf…
阅读更多...
AFAC2024-基于保险条款的问答 比赛日记 llamafactory qwen npu 910B1

AFAC2024-基于保险条款的问答 比赛日记 llamafactory qwen npu 910B1

AFAC2024: 基于保险条款的问答挑战——我的实战日记 概述 在最近的AFAC2024竞赛中&#xff0c;我参与了基于保险条款的问答赛道。这是一次深度学习与自然语言处理的实战演练&#xff0c;旨在提升模型在复杂保险文本理解与问答生成方面的能力。本文将分享我的参赛过程&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023