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

Vue (2)

news 2026/1/28 2:18:05

文章目录

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

1. 模板语法

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

1.1 插值语法

在这里插入图片描述

1.2 指令语法

图一：

在这里插入图片描述

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

在这里插入图片描述

总结：

插值语法：

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

指令语法 :

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

2. 数据绑定

引出： v-model

在这里插入图片描述

单向绑定：

在这里插入图片描述

双向绑定 :

在这里插入图片描述

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

在这里插入图片描述

v-model 简写：

在这里插入图片描述

总结：

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

单向数据绑定(v-bind) ：数据只能从 data 流向页面.
双向绑定 (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 的两种写法：

el 有两种写法：

a. new Vue 时候配置 el 属性

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

a.对象式

b.函数式

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

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 指令语法图一 ： 简写 ： v-bind: 是可以简写成 ： 的总结 ： …...

编程日记 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、初始化的前置方法和后置方法（重写） 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安装到哪个文件夹里了，需要将这两个文件夹添加进环境变量Path中。如果你记不清了，可以用everything全局搜索一下“VBoxManage.exe’以及“vmware-vdiskmanager.exe”，看一眼这个程序放到哪…...

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

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

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

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

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

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

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

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

文章目录写在前面关键类ConfigurationClassPostProcessor1、ConfigurationClassPostProcessor的注册2、ConfigurationClassPostProcessor的处理过程（1）parse方法中，Bean方法的处理（2）注册解析Bean标注的方法写在前面 …...

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

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2026/1/26 20:17:04

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/1/25 3:17:22

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到跨域请求接口的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。什么是代理（proxy）？代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...

编程新知 2025/9/29 4:00:38

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机配置虚拟机飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/17 16:47:12

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...

编程新知 2026/1/17 15:37:22

c# 局部函数定义、功能与示例

C# 局部函数：定义、功能与示例 1. 定义与功能局部函数（Local Function）是嵌套在另一个方法内部的私有方法，仅在包含它的方法内可见。 • 作用：封装仅用于当前方法的逻辑，避免污染类作用域，提升…...

编程新知 2025/9/18 4:17:51

Java并发编程实战 Day 11：并发设计模式

【Java并发编程实战 Day 11】并发设计模式开篇这是"Java并发编程实战"系列的第11天，今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案，它们不仅提供了优雅的设计思路，还能显著提升系统的性能…...

编程新知 2025/12/10 19:17:05

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2026/1/23 11:47:13

CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？

在现代前端开发中，Utility-First (功能优先) CSS 框架已经成为主流。其中，Tailwind CSS 无疑是市场的领导者和标杆。然而，一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。这篇文章将深入探讨这两款工具的核心理念、技术差…...

编程新知 2026/1/20 7:47:04

文章目录

1. 模板语法

1.1 插值语法

1.2 指令语法

2. 数据绑定

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

4. MVVM 模型

相关文章：