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

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

news 文章来源：https://blog.csdn.net/ZHOU_VIP/article/details/132028551 2024/11/28 14:44:46

什么是指令?

指令 (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 表达式。 指令的职责是&#xff0c;当表达式的值改变时&#xff0c;将其产生的连带影响&#xff0c;响应式地作用于DOM 例如我们在入门案例中的 v-on&#xff0c;代表绑定事…...

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

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

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

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

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

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

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

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

在数字化时代&#xff0c;内容质量已经成为增强在线曝光率的关键因素。企业和博客主经常面临挑战&#xff0c;如何制作高质量、无误的内容以吸引更多的在线用户。此文将详细分析“爱校对”如何帮助用户优化内容&#xff0c;从而提高在线可见性。 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的数据映射层&#xff08;ORM&#xff09;。它的核心目的是简化和自动化数据在存储和应用程序代码之间的传输方式。Prisma支持各种数据存储&#xff0c;并为数据持久化提供了一个强大而灵活的抽象层。通过这个基于代码的…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、方式一 网络模型、损失函数、数据&#xff08;包括输入、标注&#xff09; 找到以上三种变量&#xff0c;调用它们的.cuda()&#xff0c;再返回即可 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 企业级项目（二十五）

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;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的设计目的&#xff0c;因此也不是它擅长的。JSON旨在成为一种“轻量级数据交换格式”&#xff0c;并声称它“易于人类读写”和“易于机器解析和生成”。 作为一种数据交换格式&#xff0c;JSON是…...

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

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

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

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

Kotlin 协程

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

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

maven 从官网下载指定版本

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

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

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

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

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

WPF CommunityToolkit.Mvvm

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

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

Vue开发中如何解决国际化语言切换问题

Vue开发中如何解决国际化语言切换问题 引言&#xff1a; 在如今的全球化时代&#xff0c;应用程序的国际化变得越来越重要。为了让不同地区的用户能够更好地使用应用程序&#xff0c;我们需要对内容进行本地化&#xff0c;以适应不同语言和文化环境。对于使用Vue进行开发的应用…...

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

基于springboot+vue的流动人口登记系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...

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

Stable Diffusion的使用以及各种资源

Stable Diffsuion资源目录 SD简述sd安装模型下载关键词&#xff0c;描述语句插件管理controlNet自己训练模型 SD简述 Stable Diffusion是2022年发布的深度学习文本到图像生成模型。它主要用于根据文本的描述产生详细图像&#xff0c;尽管它也可以应用于其他任务&#xff0c;如…...

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

Redis 分布式锁的实现方式

一般来说&#xff0c;在对数据进行“加锁”时&#xff0c;程序首先需要通过获取&#xff08;acquire&#xff09;锁来得到对数据排他性访问的能力&#xff0c;然后才能对数据执行一系列操作&#xff0c;最后还要将锁释放&#xff08;release&#xff09;给其他程序。 对于能够…...

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

VMware上搭建的虚拟机突然本地无法连接服务器

长时间没有使用VMware 虚拟机了&#xff0c;今天突然登录上去&#xff0c;启动虚拟服务器后发现本地等不了了&#xff0c; 经过排查发现是开启了&#xff1a;VirtualBox Host-Only Network 关闭之后就本机就可以直连服务器了...

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

JDBC回顾

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 JDBC回顾 前言一、JDBC1.JDBC是什么&#xff1f;2.如何使用&#xff1f;&#xff08;1&#xff09;注册驱动&#xff08;2&#xff09;获取连接&#xff08;3&#xff09;操作…...

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

mq 消息队列 mqtt emqx ActiveMQ RabbitMQ RocketMQ

省流&#xff1a; 十几年前&#xff0c;淘宝的notify&#xff0c;借鉴ActiveMQ。京东的ActiveMQ集群几百台&#xff0c;后面改成JMQ。 Linkedin的kafka&#xff0c;因为是scala&#xff0c;国内很多人不熟。淘宝的人把kafka用java写了一遍&#xff0c;取名metaq&#xff0c;后…...

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

沃尔玛卖家必看！解决订单被Kan、Feng号问题的终极方案！

近期有很多沃尔玛卖家和工作室联系到我提到说在沃尔玛平台上下单&#xff0c;买家号出现副款义常订单被k掉&#xff0c;是什么原因、我们该如何去解决呢&#xff1f; 以下是一些可能导至你的测评订单被k单的原因&#xff1a; 1.技术问题&#xff1a;有时&#xff0c;网站或系…...

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

浅谈日常使用的 Docker 底层原理-三大底座

适合的读者&#xff0c;对Docker有过简单了解的朋友&#xff0c;想要进一步了解Docker容器的朋友。 前言 回想我这两年&#xff0c;一直都是在使用 Docker&#xff0c;看过的视频、拜读过的博客&#xff0c;大都是在介绍 Docker 的由来、使用、优点和发展趋势&#xff0c;但对…...

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

前端面试：【DOM】编织网页的魔法

嘿&#xff0c;亲爱的代码魔法师&#xff01;在JavaScript的奇幻世界里&#xff0c;有一项强大的技能&#xff0c;那就是DOM操作。DOM&#xff08;文档对象模型&#xff09;操作允许你选择、修改和创建网页元素&#xff0c;就像是在编织一个魔法的网页。 1. 什么是DOM&#xff…...

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

织梦网站图片无缝滚动怎么做/搜索引擎优化的意思

最近在做asp.net的网页&#xff0c;需要分析一些数据&#xff0c;用到了chart控件。 在本地测试的时候好好的&#xff0c;可是已发布到IIS服务器上以后就无法显示。 通过查询相关资料&#xff0c;原来修改web.config 修改成 <add key"ChartImageHandler" v…...

编程日记 2024/11/28 11:13:08

海口模板建站平台/网络营销策划

ExecuteNonQuery()方法主要用户更新数据&#xff0c;通常它使用Update,Insert,Delete语句来操作数据库.因为名中有“Non Query”,就是执行非查询类的语句,比如update、delete、insert等数据更新操作。 【返回值】 对于 Update,Insert,Delete 语句 执行成功是返回值为该命令所影…...

编程日记 2024/11/28 9:13:42

移动网站建设服务商/萝卜建站

Spark插入MongoDB出现的错误 解决方案: 1.确认是否在spark中配置了相关的库和表 2.检测是否出现1个以上的spark(我之前检查过配置都没有问题&#xff0c;demo也可以跑&#xff0c;但是我的离线用户画像却一直插入不进去。 仔细检查发现&#xff0c;我写了个sparkSession&am…...

编程日记 2024/11/28 7:12:15

杭州网站设计推荐柚米/seo优化方式

前言 每次下班回到家就已经很累了&#xff0c;到门口还要到处翻找钥匙&#xff0c;然后开门&#xff0c;是不是觉得很烦&#xff0c;那我们有没有不用通过钥匙开门且成本低的方案了&#xff1f;下面我会教大家基于ESP8266点灯科技小爱同学来控制开门的方法 一、准备工作 1、…...

编程日记 2024/11/28 1:31:12

wordpress只能在局域网/百度信息流账户搭建

GET repository / models / {modelId} 表1.获取模型 - URL参数 参数需要值描述modelId是串要获取的模型的ID。 表2.获取一个模型 - 响应代码 响应码描述200指示已找到并返回模型。404表示找不到请求的模型。 成功回应机构&#xff1a; { "id":"5", &quo…...

编程日记 2024/11/28 1:26:10

移动端网站/长沙好的seo外包公司

elk笔记24--用gohangout替代logstash消费日志介绍使用gohangout使用gohangout前后对比注意事项说明介绍 gohangout 是 childe 大佬使用 golang 模仿的 Logstash 开源项目。用于消费 Kafka 数据&#xff0c;处理后写入 ES、Clickhouse 等。 相对于elk 中官方提供的 logstash&am…...

编程日记 2024/11/27 23:43:21