当前位置：首页 > news >正文

GuLi商城-前端基础Vue指令-单向绑定双向绑定

news 2026/2/7 15:09:34

什么是指令?

指令 (Directives) 是带有 `v-` 前缀的特殊特性。

指令特性的预期值是:单个 JavaScript 表达式。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

例如我们在入门案例中的 v-on，代表绑定事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app">{{msg}}  {{1+1}}  {{hello()}}<br/><span v-html="msg"></span><br/><span v-text="msg"></span></div><script src="../node_modules/vue/dist/vue.js"></script><script>new Vue({el:"#app",data:{msg:"<h1>Hello</h1>",link:"http://www.baidu.com"},methods:{hello(){return "World"}}})</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 给html标签的属性绑定 --><div id="app"> <a v-bind:href="link">gogogo</a><!-- class,style  {class名：加上？}--><span v-bind:class="{active:isActive,'text-danger':hasError}":style="{color: color1,fontSize: size}">你好</span></div><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{link: "http://www.baidu.com",isActive:true,hasError:true,color1:'red',size:'36px'}})</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 表单项，自定义组件 --><div id="app">精通的语言：<input type="checkbox" v-model="language" value="Java"> java<br/><input type="checkbox" v-model="language" value="PHP"> PHP<br/><input type="checkbox" v-model="language" value="Python"> Python<br/>选中了 {{language.join(",")}}</div><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{language: []}})</script></body>
</html>

注意：页面上显示的是小写的java，操作的是value里面大写的Java

谷粒商城项目4——前端基础 Vue框架的属性 ES6前端编程规范学习_谷粒商城mvvm思想_HotRabbit.的博客-CSDN博客

GuLi商城-前端基础Vue指令-单向绑定双向绑定

什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM 例如我们在入门案例中的 v-on，代表绑定事…...

编程日记 2023/8/22 12:50:20

前端（十三）——JavaScript 闭包的奥秘与高级用法探索

😶博主：小猫娃来啦 😶文章核心：深入理解 JavaScript 中的闭包文章目录不理解闭包？这玩意很难？闭包的定义与原理闭包是什么创建一个闭包闭包的应用场景闭包与作用域闭包与作用域之间的关系全局作用域、函…...

编程日记 2023/8/22 12:49:18

面试-快速学习计算机网络-UDP/TCP

1. OSI四层和七层映射区别： 应用层，表示层，会话层合并为了应用层数据链路层和物理层合并为了网络接口层 2. TCP和UDP的区别？ 总结： 1 . TCP 向上层提供面向连接的可靠服务 ，UDP 向上层提供无连接不可靠服…...

编程日记 2023/8/22 12:48:16

爱校对如何帮助企业和博客主提高在线可见性？

在数字化时代，内容质量已经成为增强在线曝光率的关键因素。企业和博客主经常面临挑战，如何制作高质量、无误的内容以吸引更多的在线用户。此文将详细分析“爱校对”如何帮助用户优化内容，从而提高在线可见性。 1.互联网内容的挑战搜索引擎…...

编程日记 2023/8/22 12:47:14

MATLAB中xlsread函数用法

目录语法说明示例将工作表读取到数值矩阵读取元胞的范围读取列请求数值、文本和原始数据对工作表执行函数请求自定义输出局限性 xlsread函数的功能是读取Microsoft Excel 电子表格文件语法 num xlsread(filename) num xlsread(filename,sheet) num x…...

编程日记 2023/8/22 12:46:13

Prisma.js：JavaScript中的基于代码的ORM

Prisma是一种流行的用于服务器端JavaScript和TypeScript的数据映射层（ORM）。它的核心目的是简化和自动化数据在存储和应用程序代码之间的传输方式。Prisma支持各种数据存储，并为数据持久化提供了一个强大而灵活的抽象层。通过这个基于代码的…...

编程日记 2023/8/22 12:45:12

解决问题：在cocos create中如何从b文件调用到a文件里用CC.resource.load动态加载的图集

目录 1.在a文件中定义一个公共的变量存储动态加载的图集 2.在a.js中添加一个静态方法，返回动态加载的图集 3.在b.js中使用a.js中定义的静态方法获取图集，并使用它假设a文件中用CC.resource.load动态加载了一张图集，b文件需要使用这张图集&am…...

编程日记 2023/8/22 12:44:11

分布式 - 消息队列Kafka：Kafka 消费者消费位移的提交方式

文章目录 1. 自动提交消费位移2. 自动提交消费位移存在的问题？3. 手动提交消费位移1. 同步提交消费位移2. 异步提交消费位移3. 同步和异步组合提交消费位移4. 提交特定的消费位移5. 按分区提交消费位移 4. 消费者查找不到消费位移时怎么办？5. 如何从特定…...

编程日记 2023/8/22 12:43:10

如何利用 ChatGPT 进行自动数据清理和预处理

推荐：使用 NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 ChatGPT 已经成为一把可用于多种应用的瑞士军刀，并且有大量的空间将 ChatGPT 集成到数据科学工作流程中。如果您曾经在真实数据集上训练过机器学习模型，您就会知道数据清理和预…...

编程日记 2023/8/22 12:42:08

PHP“牵手”淘宝商品评论数据采集方法,淘宝API接口申请指南

淘宝天猫商品评论数据接口 API 是开放平台提供的一种 API 接口，它可以帮助开发者获取商品的详细信息，包括商品的标题、描述、图片等信息。在电商平台的开发中，详情接口API是非常常用的 API，因此本文将详细介绍详情接口 API 的使用…...

编程日记 2023/8/22 12:41:05

你更喜欢哪一个：VueJS 还是 ReactJS？

观点列表： 1、如果你想在 HTML 中使用 JS，请使用 Vue； 如果你想在 JS 中使用 HTML，请使用 React。当然，如果您希望在 JS 中使用 HTML，请将 Vue 与 JSX 结合使用。 2、Svelte：我喜欢它&#…...

编程日记 2023/8/22 12:40:04

PyTorch学习笔记（十六）——利用GPU训练

一、方式一网络模型、损失函数、数据（包括输入、标注） 找到以上三种变量，调用它们的.cuda()，再返回即可 if torch.cuda.is_available():mynn mynn.cuda() if torch.cuda.is_available():loss_function loss_function.cuda(…...

编程日记 2023/8/22 12:39:01

【实战】十一、看板页面及任务组页面开发（三） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十五）

文章目录一、项目起航：项目初始化与配置二、React 与 Hook 应用：实现项目列表三、TS 应用：JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…...

编程日记 2023/8/22 12:37:59

自定义指令文件 moneyFormat.js /*** v-money 金额千分位转换*/export default {inserted: inputFormatter({// 格式化函数formatter(num, util) {if(num null || num || num undefined || typeof(num) undefined){return }if(util 万元 || util 万){return formatMone…...

编程日记 2023/8/22 12:36:58

请不要用 JSON 作为配置文件，使用JSON做配置文件的缺点

我最近关注到有的项目使用JSON作为配置文件。我觉得这不是个好主意。这不是JSON的设计目的，因此也不是它擅长的。JSON旨在成为一种“轻量级数据交换格式”，并声称它“易于人类读写”和“易于机器解析和生成”。作为一种数据交换格式，JSON是…...

编程日记 2023/8/22 12:35:57

Hadabot：从网络浏览器操作 ROS2 远程控制器

一、说明 Hadabot Hadabot是一个学习ROS2和机器人技术的机器人套件。使用 Hadabot，您将能够以最小的挫败感和恐吓来构建和编程物理 ROS2 机器人。Hadabot套件目前正在开发中。它将仅针对ROS2功能，并强调基于Web的用户界面。随着开发的进展&a…...

编程日记 2023/8/22 12:34:54

Kotlin 协程

Kotlin 协程（Coroutines）是一种轻量级的并发编程解决方案，旨在简化异步操作和多线程编程。它提供了一种顺序和非阻塞的方式来处理并发任务，使得代码可以更加简洁和易于理解。Kotlin 协程通过提供一套高级 API，使并发代…...

编程日记 2023/8/22 12:33:53

maven 从官网下载指定版本

1. 进入官网下载页面 Maven – Download Apache Maven 点击下图所示链接 2. 进入文件页，选择需要的版本 3. 选binaries 4. 选文件，下载即可...

编程日记 2023/8/22 12:32:52

数据结构---串（赋值，求子串，比较，定位）

目录一.初始化顺序表中串的存储串的链式存储二.赋值操作：将str赋值给S 链式表顺序表三.复制操作：将chars复制到str中链式表顺序表四.判空操作链式表顺序表五.清空操作六.串联结链式表顺序表七.求子串链式表顺序表…...

编程日记 2023/8/22 12:31:51

WPF CommunityToolkit.Mvvm

文章目录前言ToolkitNuget安装简单使用SetProperty，通知更新RealyCommandCanExecute 新功能，代码生成器ObservablePropertyNotifyCanExecuteChangedForRelayCommand其他功能对应关系 NotifyPropertyChangedFor 前言 CommunityToolkit.Mvvm（…...

编程日记 2023/8/22 12:30:51

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点）和 Decorator（装饰节点）四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41