谷粒商城实战笔记-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.mzph.cn/pingmian/48222.shtml

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

相关文章

rimraf快速删除node_modules方法

rimraf快速删除node_modules方法

项目中&#xff0c;有时候会遇到下载依赖报错&#xff0c;然后想要删除node_modules再重新下载&#xff0c;但是有时候直接用yarn 或者npm install仍热不行&#xff0c;我们可以尽量用yran&#xff0c;因为npm 可能会自动下一些给一些包升级了&#xff0c;此时因为前面已经下过…
阅读更多...
JVM：GraalVM

JVM：GraalVM

文章目录 一、介绍1、什么是GraalVM&#xff1a;2、GraalVM版本 二、两种使用模式 一、介绍 1、什么是GraalVM&#xff1a; GraalVM是Oracle官方推出的一款高性能JDK&#xff0c;使用它享受比OpenJDK或者OracleJDK更好的性能。GraalVM的官网地址&#xff1a;https://www.graa…
阅读更多...
泛型新理解

泛型新理解

1.创建三个类&#xff0c;并写好对应关系 package com.jmj.gulimall.study;public class People { }package com.jmj.gulimall.study;public class Student extends People{ }package com.jmj.gulimall.study;public class Teacher extends People{ }2.解释一下这三个方法 pub…
阅读更多...
数据结构（稀疏数组）

数据结构（稀疏数组）

简介 稀疏数组是一种数据结构&#xff0c;用于有效地存储和处理那些大多数元素都是零或者重复值的数组。在稀疏数组中&#xff0c;只有非零或非重复的元素会被存储&#xff0c;从而节省内存空间。 案例引入 假如想把下面这张表存入文件&#xff0c;我们会怎么做&#xff1f;…
阅读更多...
【LeetCode】翻转二叉树

【LeetCode】翻转二叉树

目录 一、题目二、解法完整代码 一、题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root…
阅读更多...
php-fpm如何配置max_children参数

php-fpm如何配置max_children参数

前言 略 php-fpm 资源耗尽 php-fpm 的子进程耗尽的时&#xff1a; 会导致 502 出现nginx 出现错误日志 2024/07/18 20:19:10 [crit] 36390#0: *1402471 connect() to unix:/tmp/php-cgi-81.sock failed (2: No such file or directory) while connecting to upstream, cli…
阅读更多...
Spring Authorization Server实战

Spring Authorization Server实战

Spring Authorization Server实战 Spring Authorizatin Server Spring Authorizatin Server是一个框架&#xff0c;它提供了OAuth2.1和OpenID Connect 1.0规范以及其它相关规范的实现&#xff0c;它是基于Spring Security构建的 OAuth2.0协议介绍 OAuth是一个开放标准的授权…
阅读更多...
使用docker swarm搭建ruoyi集群环境

使用docker swarm搭建ruoyi集群环境

整体目标 项目背景 领导给到了我一个客户&#xff0c;客户商业模式为成本制作&#xff0c;成本核算。其中涉及到大量涉密数据&#xff0c;且与我们现有产品几乎没有兼容点&#xff08;我们是一套低代码的框架&#xff0c;客户有很多业务二开&#xff09; 测试环境给到了我6台…
阅读更多...
大模型学习笔记 - LLM模型架构

大模型学习笔记 - LLM模型架构

LLM 模型架构 LLM 模型架构 1. LLM 核心模型 Transformer2. 详细配置 2.1 归一化方法2.2 归一化模块位置2.3 激活函数2.4 位置编码 2.4.1 绝对位置编码2.4.2 相对位置编码2.4.3 旋转位置编码 RoPE2.4.4 ALiBi位置编码 2.5 注意力机制 2.5.1 完整自注意力机制2.5.2 稀疏注意力机…
阅读更多...
ChatGPT实战100例 - (20) 如何玩转影刀RPA

ChatGPT实战100例 - (20) 如何玩转影刀RPA

文章目录 ChatGPT实战100例 - (20) 如何玩转影刀RPA背景需求需求分析与流程设计一、需求收集二、流程梳理三、可行性分析流程设计（详细步骤）具体步骤的影刀RPA实现流程图总结AIGC在影刀RPA中的使用总结其他RPA步骤中可能用到AIGC的地方展望总结ChatGPT实战100例 - (20) 如何玩…
阅读更多...
LeYOLO, New Scalable and Efficient CNN Architecture for Object Detection

LeYOLO, New Scalable and Efficient CNN Architecture for Object Detection

LeYOLO, New Scalable and Efficient CNN Architecture for Object Detection 论文链接&#xff1a;http://arxiv.org/abs/2406.14239 代码链接&#xff1a;https://github.com/LilianHollard/LeYOLO 一、介绍 本文关注基于FLOP的高效目标检测计算的神经网络架构设计选择&am…
阅读更多...
【Vite】快速入门及其配置

【Vite】快速入门及其配置

概述 Vite是前端构建工具。vite 相较于webpack,vite采用了不同的运行方式&#xff1a; 开发时&#xff0c;并不对代码打包&#xff0c;而是直接采用ESM的方式来运行项目在项目打包部署时&#xff0c;使用 rollup 对项目进行打包除了速度外&#xff0c;vite使用起来也更加方便…
阅读更多...
驱动程序在\device\raidport1 上检测到控制器错误

驱动程序在\device\raidport1 上检测到控制器错误

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…
阅读更多...
全新UI自助图文打印系统小程序源码/自助云打印机前后端源码

全新UI自助图文打印系统小程序源码/自助云打印机前后端源码

全新UI自助图文打印系统小程序源码&#xff0c;自助云打印机前后端源码。最新的自助图文打印系统和证件照云打印小程序源码采用了PHP作为后端开发语言&#xff0c;旨在为用户提供全面的自助打印服务。 这些服务覆盖了多种文件格式&#xff0c;包括文档、图片、表格等。除此之外…
阅读更多...
pipeline:无题

pipeline:无题

这里写自定义目录标题 复盘我是如何做的撰写评审文档O-KR-KA任务网络图与计划资源需求 && 风险项资源需求风险项 其他 讨论、评审文档撰写评审纪要、结论 反思 复盘 目前工作中的一个现状是&#xff0c;在季度开始的时候需要自己思考方向、规划工作&#xff1b;可能还需…
阅读更多...
手机接Usb hub再连接电脑下D+D-波形

手机接Usb hub再连接电脑下D+D-波形

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…
阅读更多...
医联体信息平台建设方案PPT(54页)

医联体信息平台建设方案PPT(54页)

文章摘要&#xff1a; 医联体信息平台现状当前医联体信息平台存在脱离医疗业务建设的倾向&#xff0c;导致信息孤岛&#xff0c;业务协同困难。 建设存在的问题主要问题包括健康档案无法动态更新和共享&#xff0c;信息系统之间信息共享和协同不足。 医联体信息平台建设方案方…
阅读更多...
堆及堆的管理

堆及堆的管理

堆的作用 堆是用来作为存储空间的 堆的创建与释放 分离的空闲空间的管理建议使用链表 在链表中指定空间大小及下一块空闲链表
阅读更多...
2.3 大模型硬件基础：AI芯片（上篇） —— 《带你自学大语言模型》系列

2.3 大模型硬件基础：AI芯片（上篇） —— 《带你自学大语言模型》系列

本系列目录 《带你自学大语言模型》系列部分目录及计划&#xff0c;完整版目录见&#xff1a;带你自学大语言模型系列 —— 前言 第一部分 走进大语言模型&#xff08;科普向&#xff09; 第一章 走进大语言模型 1.1 从图灵机到GPT&#xff0c;人工智能经历了什么&#xff1…
阅读更多...
Qt创建列表，通过外部按钮控制列表的选中下移、上移以及左侧图标的显现

Qt创建列表，通过外部按钮控制列表的选中下移、上移以及左侧图标的显现

引言 项目中需要使用列表QListWidget，但是不能直接拿来使用。需要创建一个列表，通过向上和向下的按钮来向上或者向下移动选中列表项，当当前项背选中再去点击确认按钮，会在列表项的前面出现一个图标。 实现效果 本实例实现的效果如下： 实现思路 思路一 直接采用QLis…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023