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

Vue (2)

news 2025/9/13 20:28:22

文章目录

  • 1. 模板语法
    • 1.1 插值语法
    • 1.2 指令语法
  • 2. 数据绑定
  • 3. 穿插 el 和 data 的两种写法
  • 4. MVVM 模型

 

1. 模板语法

 
root 容器中的代码称为 vue 模板

 

1.1 插值语法

在这里插入图片描述

 

1.2 指令语法

 
图一 ：

在这里插入图片描述

 
简写 ： v-bind: 是可以简写成 ： 的

在这里插入图片描述

 
总结 ：

插值语法 ：

  1. 功能 ： 用于解析标签体内容
  2. 写法 : {{xxx}} ， xxx 是 js 表达式 ，切可以直接读取到 data 中的所有属性

指令语法 :

  1. 功能：用于解析标签 (包括 ： 标签属性 ， 标签内容 ， 绑定事件 …)
  2. 举例 : v-bind:href = “xxxx” 或者简写为 :href=“xxx” ， xxx 同样要写 js 表达式 ,且可以直接读取到data中的所有属性
  3. 备注 ： Vue 中有很多的指令 ， 且形式都是: v-??? 此处使用 v-bind 举例

 

2. 数据绑定

 
引出 ： v-model

在这里插入图片描述

 
单向绑定 ：

在这里插入图片描述

 
双向绑定 :

在这里插入图片描述

 
注意：v-model 只能应用在表单类元素 (输入类元素) 上

在这里插入图片描述

 
v-model 简写 ：

在这里插入图片描述

 
总结 ：

Vue 中有两种数据绑定的方式 :

  1. 单向数据绑定(v-bind) ： 数据只能从 data 流向页面.

  2. 双向绑定 (v-model) ：数据不仅能从 data 流向页面 ， 还可以从页面流向 data .

    • 备注 ：1. 双向绑定一般都应用在表单类元素上 (如 ： input , select 等) 2. v-model ： value 可以简写为 v-model ，应为 v-model 默认手机的就是value值

 

3. 穿插 el 和 data 的两种写法

 
原来我们的写法 ：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el和data的两种写法</title><!-- 引入 vue --><script src="../../js/vue.js"></script>
</head><body><div id="root"><h1>Hello {{name}}</h1></div><script>let vm = new Vue({el: "#root",data: {name: "大古"}})// 通过 console.log 观察 vue 的实例对象 console.log(vm)</script>
</body></html>

 
下面来看看 vue 的实例对象

在这里插入图片描述

 
data 的两种写法 :

 
对象式 ：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el和data的两种写法</title><!-- 引入 vue --><script src="../../js/vue.js"></script>
</head><body><div id="root"><h1>Hello {{name}}</h1></div><script>let vm = new Vue({el: "#root",// 对象式data: {name: "大古"}})</script>
</body></html>

 
函数式 ：

<body><div id="root"><h1>Hello {{name}}</h1></div><script>let vm = new Vue({el: "#root",// 函数式 :data: function () {return {name: '大古'}}})</script>
</body>

 
注意 ： 当前 data 函数中的 this 是 vue 实例对象

 
另外 ： 这里写成 箭头函数 ， data 函数中的 this 就是 window

在这里插入图片描述

总结 ：

data 与 el 的 两种写法 ：

  1. el 有两种写法 ：

    a. new Vue 时候 配置 el 属性

    b. 先创建 Vue 实例 ， 随后再通过 vm.$mount(‘#root’) 指定 el 的值

  2. data 有两种写法 :

    a.对象式

    b.函数式

    如何选择 ： 目前那种写法都可以 ， 后面学到组件时， 必须使用函数式 ，要不然会报错

  3. 一个重要原则

    a.由Vue 管理的函数 一定不要写箭头函数 ， 一旦写了箭头函数 ， this 就不再是Vue 实例了

 

4. MVVM 模型

 
引用 ：

在这里插入图片描述

 
从上面可以知道 vue 是参考了 MVVM 模型的 ， 下面就来看看 vue 通过 MVVM 模型设计出来了 什么。

 
先看模型 ：

在这里插入图片描述

别看 MVVM 是 四个字母 其实就 三个

  • M：模型Model —>也就是data中的数据
  • V：视图View —>也就是模板代码
  • VM：视图模型ViewModel —>也就是Vue实例（vm）

在这里插入图片描述

 
补充 :

在这里插入图片描述

相关文章：

Vue (2)

文章目录1. 模板语法1.1 插值语法1.2 指令语法2. 数据绑定3. 穿插 el 和 data 的两种写法4. MVVM 模型1. 模板语法 root 容器中的代码称为 vue 模板 1.1 插值语法 1.2 指令语法 图一 &#xff1a; 简写 &#xff1a; v-bind: 是可以简写成 &#xff1a; 的 总结 &#xff1a; …...

编程日记 2023/2/9 21:14:50

ESP8266 + STC15基于AT指令通过TCP通讯协议获取时间

ESP8266 + STC15基于AT指令通过TCP通讯协议获取时间 如果纯粹拿32位的ESP8266模块给8位的单片机仅供授时工具使用，有点大材小用了。这里不讨论这个拿esp8266来单独开发使用。本案例只是通过学习esp8266 AT指令功能来验证方案的可行性。 🔖STC15 单片机采用的是：STC15F2K60S…...

编程日记 2023/2/9 21:13:45

谈谈Spring中Bean的生命周期？（让你瞬间通透~）

目录 1.Bean的生命周期 1.1、概括 1.2、图解 2、代码示例 2.1、初始化代码 2.2、初始化的前置方法和后置方法&#xff08;重写&#xff09; 2.3、Spring启动类 2.4、执行结果 2.5、经典面试问题 3.总结 1.Bean的生命周期 1.1、概括 Spring中Bean的生命周期就是Bean在…...

编程日记 2023/5/31 2:14:48

如何将VirtualBox虚拟机转换到VMware中

转换前的准备 首先需要你找到你的virtualbox以及VM安装到哪个文件夹里了&#xff0c;需要将这两个文件夹添加进环境变量Path中。 如果你记不清了&#xff0c;可以用everything全局搜索一下“VBoxManage.exe’以及“vmware-vdiskmanager.exe”&#xff0c;看一眼这个程序放到哪…...

编程日记 2023/5/31 2:14:48

洞庭龙梦（开发技巧和结构理论集）

1、经验来源&#xff0c;单一获取方式。进行形态等级展示。唯一游戏系统经验来源。无主线和支线剧情。2、玩家使用流通货币&#xff08;充值货币&#xff09;&#xff0c;到玩家空间商城充值游戏&#xff0c;两人以上玩家进行游戏&#xff0c;掉落道具。交易系统游戏玩法&#…...

编程日记 2023/5/25 19:04:38

【23种设计模式】创建型模式详细介绍

前言 本文为 【23种设计模式】创建型模式详细介绍 相关内容介绍&#xff0c;下边具体将对单例模式&#xff0c;工厂方法模式&#xff0c;抽象工厂模式&#xff0c;建造者模式&#xff0c;原型模式&#xff0c;具体包括它们的特点与实现等进行详尽介绍~ &#x1f4cc;博主主页&…...

编程日记 2023/5/31 2:14:48

@Bean的处理流程，源码分析@Bean背后发生的事

文章目录写在前面关键类ConfigurationClassPostProcessor1、ConfigurationClassPostProcessor的注册2、ConfigurationClassPostProcessor的处理过程&#xff08;1&#xff09;parse方法中&#xff0c;Bean方法的处理&#xff08;2&#xff09;注册解析Bean标注的方法写在前面 …...

编程日记 2023/5/24 14:17:51

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/9/9 12:46:40

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/9/9 14:49:22

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/9/10 3:52:13

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/8/30 10:09:32

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/8/25 20:38:36

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/9 1:34:25

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/9/2 16:53:17

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

编程新知 2025/8/3 13:40:26

​​企业大模型服务合规指南：深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...

编程新知 2025/9/13 12:59:43