谷粒商城实战笔记-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 应用的重要辅助手段。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【学习笔记】无人机系统（UAS）的连接、识别和跟踪（四）-无人机认证与授权

【学习笔记】无人机系统（UAS）的连接、识别和跟踪（四）-无人机认证与授权

引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 【免费】3GPPTS23.256技术报告-无人机系…
阅读更多...
【项目】星辰博客介绍

【项目】星辰博客介绍

目录 一、项目背景 二、项目功能 1. 登录功能&#xff1a; 2. 列表页面&#xff1a; 3. 详情页面&#xff1a; 4. 写博客&#xff1a; 三、技术实现 四、功能页面展示 1. 用户登录 2. 博客列表页 3. 博客编辑更新页 4.博客发表页 5. 博客详情页 五.系统亮点 1.强…
阅读更多...
C#发送内容到钉钉消息

C#发送内容到钉钉消息

文章目录 一、前提工作&#xff1a;配置钉钉机器人二、以text格式发送消息到钉钉三、以markdown格式发送消息到钉钉 一、前提工作&#xff1a;配置钉钉机器人 见链接&#xff1a;https://star-302.blog.csdn.net/article/details/135649084 下边的代码&#xff0c;钉钉安全设…
阅读更多...
【C#】| 与 及其相关例子

【C#】| 与 及其相关例子

按位或&#xff08;|&#xff09; 按位或运算符 | 对两个数的每一位进行比较&#xff0c;如果两个数中至少有一个为 1&#xff0c;则结果位为 1&#xff1b;否则&#xff0c;结果位为0。 1010 (10 in decimal) | 1100 (12 in decimal) ------1110 (14 in decimal) 力扣相关…
阅读更多...
利用patch-package补丁，解决H5预览PDF时电子签章不显示问题

利用patch-package补丁，解决H5预览PDF时电子签章不显示问题

利用patch-package补丁&#xff0c;解决H5预览PDF时电子签章不显示问题 一、问题描述 在生产环境中&#xff0c;遇到了一个紧急的技术问题&#xff1a;用户在移动端H5页面上查看电子票时&#xff0c;PDF文件预览功能正常&#xff0c;但其中的电子签章未能正常显示。这一问题直…
阅读更多...
el-select选择器修改背景颜色

el-select选择器修改背景颜色

<!--* FilePath: topSearch.vue* Author: 是十九呐* Date: 2024-07-18 09:46:03* LastEditTime: 2024-07-18 10:42:03 --> <template><div class"topSearch-container"><div class"search-item"><div class"item-name&quo…
阅读更多...
笔记：Few-Shot Learning小样本分类问题 + 孪生网络 + 预训练与微调

笔记：Few-Shot Learning小样本分类问题 + 孪生网络 + 预训练与微调

内容摘自王老师的B站视频&#xff0c;大家还是尽量去看视频&#xff0c;老师讲的特别好&#xff0c;不到一小时的时间就缕清了小样本学习的基础知识点~Few-Shot Learning (1/3): 基本概念_哔哩哔哩_bilibili Few-Shot Learning&#xff08;小样本分类&#xff09; 假设现在每类…
阅读更多...
UniVue@v1.5.0版本发布：里程碑版本

UniVue@v1.5.0版本发布：里程碑版本

前言 以后使用UniVue都推荐使用1.5.0以后的版本&#xff0c;这个版本之后&#xff0c;更新的速度将会放缓。 希望这个框架能够切实的帮助大家更好的开发游戏&#xff0c;做出一款好游戏&#xff01;本开源项目采用的开源协议为MIT协议&#xff0c;完全开源化&#xff0c;以后也…
阅读更多...
数据结构——线性表（循环链表）

数据结构——线性表（循环链表）

一、循环链表定义 将单链表中终端结点的指针端由空指针改为指向头结点&#xff0c;就使整个单链表形成一 个环&#xff0c;这种头尾相接的单链表称为单循环链表&#xff0c;简称循环链表(circular linked list)。 循环链表解决了一个很麻烦的问题。如何从当中一 个结点出发&am…
阅读更多...
二叉树的前、中、后序遍历（递归法、迭代法）leetcode144/94/145

二叉树的前、中、后序遍历（递归法、迭代法）leetcode144/94/145

leetcode144、二叉树的前序遍历 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[] 示例 3&#xff1a;…
阅读更多...
【Linux】Linux环境设置环境变量操作步骤

【Linux】Linux环境设置环境变量操作步骤

Linux环境设置环境变量操作步骤 在一些开发过程中本地调试经常需要依赖环境变量的参数&#xff0c;但是怎么设置对小白来说有点困难&#xff0c;今天就介绍下具体的操作步骤&#xff0c;跟着实战去学习&#xff0c;更好的检验自己的技术水平&#xff0c;做技术还是那句话&…
阅读更多...
三字棋游戏（C语言详细解释）

三字棋游戏（C语言详细解释）

hello&#xff0c;小伙伴们大家好&#xff0c;算是失踪人口回归了哈&#xff0c;主要原因是期末考试完学校组织实训&#xff0c;做了俄罗斯方块&#xff0c;后续也会更新&#xff0c;不过今天先从简单的三字棋说起 话不多说&#xff0c;开始今天的内容 一、大体思路 我们都知…
阅读更多...
pytest常用命令行参数解析

pytest常用命令行参数解析

简介&#xff1a;pytest作为一个成熟的测试框架&#xff0c;它提供了许多命令行参数来控制测试的运行方式&#xff0c;以配合适用于不同的测试场景。例如 -x 可以用于希望出现错误就停止&#xff0c;以便定位和分析问题。–rerunsnum适用于希望进行失败重跑等个性化测试策略。 …
阅读更多...
用ComfyUI安装可图Kolors大模型做手机壁纸

用ComfyUI安装可图Kolors大模型做手机壁纸

一、Kolors简介 国内科技公司快手在人工智能领域取得了显著进展&#xff0c;特别推出了「可图 Kolors」这一开源模型&#xff0c;它在图像生成质量上超越了SD3&#xff0c;与Midjourney v6模型相媲美&#xff0c;并支持中文提示词识别与生成中文字符&#xff0c;成为国产AI绘画…
阅读更多...
经典神经网络(14)T5模型原理详解及其微调(文本摘要)

经典神经网络(14)T5模型原理详解及其微调(文本摘要)

经典神经网络(14)T5模型原理详解及其微调(文本摘要) 2018 年&#xff0c;谷歌发布基于双向 Transformer 的大规模预训练语言模型 BERT&#xff0c;而后一系列基于 BERT 的研究工作如春笋般涌现&#xff0c;预训练模型也成为了业内解决 NLP 问题的标配。 2019年&#xff0c;谷歌…
阅读更多...
Qt开发网络嗅探器03

Qt开发网络嗅探器03

数据包分析 想要知道如何解析IP数据包&#xff0c;就要知道不同的IP数据包的包头结构&#xff0c;于是我们上⽹查查资料&#xff1a; 以太网数据包 ARP数据包 IPv4 IPv6 TCP UDP ICMP ICMPv6 根据以上数据包头结构&#xff0c;我们就有了我们的protocol.h文件&#xff0c;声明…
阅读更多...
node解析Excel中的考试题并实现在线做题功能

node解析Excel中的考试题并实现在线做题功能

1、背景 最近公司安排业务技能考试&#xff0c;下发excel文件的题库&#xff0c;在excel里查看并不是很方便&#xff0c;就想着像学习驾考题目一样&#xff0c;一边看一边做&#xff0c;做完之后可以查看正确答案。 2、开始分析需求 题目格式如下图 需求比较简单&#xff0c;…
阅读更多...
配置RIPv2的认证

配置RIPv2的认证

目录 一、配置IP地址、默认网关、启用端口 1. 路由器R1 2. 路由器R2 3. 路由器R3 4. Server1 5. Server2 二、搭建RIPv2网络 1. R1配置RIPv2 2. R2配置RIPv2 3. Server1 ping Server2 4. Server2 ping Server1 三、模拟网络攻击&#xff0c;为R3配置RIPv2 四、在R…
阅读更多...
ExoPlayer架构详解与源码分析（15）——Renderer

ExoPlayer架构详解与源码分析（15）——Renderer

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…
阅读更多...
拖拽上传（预览图片）

拖拽上传（预览图片）

需求 点击上传图片&#xff0c;或直接拖拽图片到红色方框里面也可上传图片&#xff0c;上传后预览图片 效果 实现 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content&…
阅读更多...
最新文章

Copyright @ 2022~2023