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

2.Vue — 模板语法、数据绑定、el与data的写法、数据代理

news 2025/9/16 14:07:50

文章目录

  • 一、模板语法
    • 1.1 插值语法
    • 1.2指令语法
  • 二、数据绑定语法
    • 2.1 单向数据绑定
    • 2.2 双向数据绑定
  • 三、el与data的两种写法
    • 3.1 el
    • 3.2 data
  • 四、数据代理
    • 4.1 Object.defineProperty
    • 4.2 Vue数据代理
      • 4.2.1 展示数据代理
      • 4.2.2 Vue数据代理

一、模板语法

root容器里面的代码被称为【vue模板】

Vue模板语法有两大类:插值语法、指令语法

插值语法一般动态指定标签体内容，解析标签体内容

指令语法一般动态指定标签属性值，解析标签

1.1 插值语法

插值语法：

​ 功能：用于解析标签体的内容

​ 语法: {{xxx}}**，**xxx是js表达式，且可以直接读取到data中的所有属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root"><h1>插值语法</h1><h3>你好,{{name}} </h3><hr/></div><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=false new  Vue({el:'#root',data:{name:'jack'}})</script>   </body>
</html>

1.2指令语法

假如我们使用下图的方式获取data中url的内容，控制台会有一个报错

<a  :href="url">点我去一个好地方</a>

            new  Vue({el:'#root',data:{name:'jack',url:'http://www.baidu.com'}

报错信息：插值语法去动态指定标签里面的属性值的方式已经被移除了，我们可以使用v-bind或 :id=“val”，也就是指令语法

image-20231027213522883

指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

举例：

v-bind:href=“xxx” 可简写成 :href=“xxx”

xxx同样要写js表达式，且可以直接读取到data中的所有属性

备注：Vue中有很多的指令，且形式都是：v-???

        <div id="root"><h1>插值语法</h1><h3>你好,{{name}} </h3><hr/><h1>指令语法</h1><!-- 带有v-的都是指令语法  bind是绑定的意思 --><!-- 在这个地方把url的结构绑定给href   url为js表达式 --><!-- v-bind可以动态的给属性绑定值 --><!-- <a v-bind:href="url">点我去一个好地方</a> --><!-- 其中v-bind都可以省略写成 ：  --><a  :href="url">点我去一个好地方</a></div>

        <script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=false new  Vue({el:'#root',data:{name:'jack',url:'http://www.baidu.com'}})</script>

原因：下面的url被当做url表达式来执行了

<a v-bind:href="url">

二、数据绑定语法

Vue中有两种数据绑定方式：

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

2.双向绑定（v-model）：数据能从data和页面互相流向

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为v-model，因为v-model默认手机的就是value值

2.1 单向数据绑定

我们之前在指令语法中见到了

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root">单行数据绑定： <input type="text"  :value="name"></div><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=false new  Vue({el:'#root',data:{name:'尚硅谷123'}})</script>   </body>
</htm

展示单向数据绑定

image-20231027215746640

当我们在Vue中修改name的值的时候，页面的值也会随着修改，如下图

image-20231027215815606

但是我们在文本框中修改内容的时候，Vue中的name值不会改变

image-20231027215839512

原因： 单向绑定的关系

image-20231027215856873

2.2 双向数据绑定

        <div id="root">单行数据绑定： <input type="text"  :value="name"><br>双向数据绑定： <input type="text"  v-model:value="name"></div>

结果如下图

image-20231027215944645

当我们修改Vue中name时，我们发现两个文本框都会改变

image-20231027220040884

当我们修改双向绑定文本框的时候，我们发现Vue的name值也会改变 （单向文本框也会改变的原因是因为Vue的name值改变了）

image-20231027220118365

产生了一个类似下图的连锁反应

image-20231027220129363

三、el与data的两种写法

以后会在学组件的时候使用到el与data

3.1 el

  1. 第一种
        <script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst v= new Vue({el:'#root',   //el第一种写法data:{name:'张靖奇'}})</script>
  1. mount挂载更灵活
        <script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst v= new Vue({data:{name:'张靖奇'}})v.$mount('#root')  //el第二种写法   mount是挂载的意思</script>

在Vue实例中有几个很特别的属性，带着$符，这些都是给我们用的

不带$符的都不是给程序员用的（Vue底层自己在用）

我们使用$mount替换el

image-20231027221904048

image-20231027222130348

为什么说这种方式更灵活呢？

比如下段代码我们设置了一个定时器，在1秒之后才将Vue实例和root容器关联

image-20231027222345738

为什么是mount？

我们要把我们的模板root交给Vue实例进行解析，解析完之后将内容放到（挂载到）页面上指定位置展示

3.2 data

  1. 对象式
        <script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst v= new Vue({el:'#root',  //data的第一种写法，对象式data:{name:'张靖奇'}})</script>

  1. 函数式 （推荐）

    函数式必须要返回一个对象，对象中的数据就是我们所需要的

        <script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst v= new Vue({el:'#root',  //data的第二种写法，函数式data:function(){return{name:'张靖奇'}}})</script>

而且我们的data函数是Vue帮我们调用的，我们可以验证一下

下图中的this是Vue实例对象 （前提是把下图中的data写成普通函数，如果写成箭头函数便不可以，因为箭头函数中没有this，就会往外找，找到全局的window）

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

   data:function(){console.log('@@@',this)return{name:'尚硅谷'}}

image-20231027223241642

我们一般都下面这样写,比较方便

   data(){return{}}

四、数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

4.1 Object.defineProperty

给一个对象添加或定义属性使用

比如下面有一个person对象，然后我们想增加一个“age”属性，怎么办？

 let person = {name: '张三',sex: '男',}

如下所示：

<script type="text/javascript">let number = 18let person = {name: '张三',sex: '男',}//参数一：给哪个对象添加参数//参数二：添加的参数叫什么名//参数三：配置项，可以写很多的配置bject.defineProperty(person, 'age', {value: 18,//这样就代表着age属性的值是18// 但是我们这样添加的元素无法进行枚举或者遍历// 为了我们新添加的age元素可以添加遍历，我们还需要一个配置enumerable: true,//除此之外，我们新添加的age属性在页面上无法修改，为了在页面上也可以修改，我们需要再进行配置// writable:trueconfigurable: true,  //控制属性可以被删除})
</script>

假如我想把自定义的变量number赋值给person的新属性age怎么做？

      <script type="text/javascript">let number =18let person ={name:'张三',sex:'男',}Object.defineProperty(person,'age',{enumerable:true,// writable:true,configurable:true , //当有人读取person的age属性时，get函数或者说getter就会被调用，且返回值就是age的值get:function(){console.log('有人读取了age属性')return number},// 当有人修改person的age属性时，set函数或者说setter就会被调用，且会受到具体的值set(value){console.log('有人修改了age属性时，且值是',value)number=value}})</script>

4.2 Vue数据代理

4.2.1 展示数据代理

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root"></div><script type="text/javascript">let obj= { x:100 } let obj2={ y:200 }Object.defineProperty(obj2,'x',{//当有人想获取obj2中的x属性时，我们把obj的x属性给他get(){return obj.x},// setter被调用时说明有人想修改obj2的x//  当有人想修改obj2中x属性时，我们把obj中的x属性值给改掉就可以了set(value){obj.x=value}})</script>   </body>
</html>

效果如下图所示

image-20231028172004702

4.2.2 Vue数据代理

  • Vue中数据代理

​ 通过vm对象来代理data对象中属性的操作（读或写）

  • Vue中数据代理的好处

​ 更加方便的操作data中的数据。

我们在data中定义的数据，在Vue实例中是"_data"的形式存在，即vm._data=data

  • 基本原理

通过Object.defineProperty（）把data对象中所有属性添加到vm上

为每个添加到vm上的属性都指定一个getter和setter

在getter/setter内部去操作（读或写）data中对应的属性

数据代理图示

image-20231028193500899

下图中右下角黄色和紫色的先就代表着数据代理

image-20231028194831487

假设我们没有数据代理，我们在使用插值语句的时候使用了**_data.xxxx**这样就增加了代码量，也非常的不方便，故我们使用了上面的数据代理

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root"><h1> {{_data.name}}</h1><h1> {{_data.address}}</h1></div><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=false new Vue({el:'#root',data:{name:'尚硅谷',address:'洪福科技园'}})</script>   </body>
</html>

相关文章：

2.Vue — 模板语法、数据绑定、el与data的写法、数据代理

文章目录 一、模板语法1.1 插值语法1.2指令语法 二、数据绑定语法2.1 单向数据绑定2.2 双向数据绑定 三、el与data的两种写法3.1 el3.2 data 四、数据代理4.1 Object.defineProperty4.2 Vue数据代理4.2.1 展示数据代理4.2.2 Vue数据代理 一、模板语法 root容器里面的代码被称为…...

编程日记 2023/10/28 20:49:54

管理类联考——数学——汇总篇——知识点突破——数据分析——记忆

文章目录 考点记忆/考点汇总——按大纲 整体目录大纲法记忆宫殿法绘图记忆法 局部数字编码法对号不对号 归类记忆法重点记忆法歌决记忆法口诀&#xff1a;加法分类&#xff0c;类类相加&#xff1b;乘法分步&#xff0c;步步相乘。 谐音记忆法涂色 理解记忆法比较记忆法转图像记…...

编程日记 2023/10/28 20:48:53

springboot+mybatis-plus实现读写分离

shigen坚持日更的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。坚持记录和分享从业两年以来的技术积累和思考&#xff0c;不断沉淀和成长。 最近shigen加班也比较严重&#xff0c;很多天文章没有更新了&#xff0c;各位读者和伙伴见…...

编程日记 2023/10/28 20:46:51

java将list转为逗号隔开字符串，将逗号连接的字符串转成字符数组，​将逗号分隔的字符串转换为List​（Java逗号分隔-字符串与数组相互转换）

一、通过testList.stream().collect(Collectors.joining(",")) &#xff0c;通过流转换&#xff0c;将list转为逗号隔开字符串 List<String> testList new ArrayList<>(); testList.add("test1"); testList.add("test2"); testList…...

编程日记 2023/10/28 20:44:49

2023高频前端面试题-CSS

1. CSS 选择器的优先级是怎么样的&#xff1f; CSS 选择器的优先级顺序&#xff1a; 内联样式 > ID选择器 > 类选择器 > 标签选择器 优先级的计算&#xff1a; 优先级是由 A、B、C、D 四个值来决定的&#xff0c;具体计算规则如下 A{如果存在内联样式则为 1&…...

编程日记 2023/10/28 20:43:48

我会在以下情况用到GPT

ChatGPT可以在各种情况下派上用场&#xff0c;包括但不限于以下情况&#xff1a; 获取信息&#xff1a;你可以使用ChatGPT来获取关于各种主题的信息&#xff0c;例如历史事件、科学知识、文化背景等。ChatGPT可以用作一个知识库&#xff0c;回答你的问题。 学习新知识&#xf…...

编程日记 2023/10/28 20:42:47

33:深入浅出x86中断机制

背景 我们知道使用0x10号中断&#xff0c;可以在屏幕上打印一个字符。 问题 系统中的 中断 究竟是什么&#xff1f; 生活中的例子 来看一个生活中例子&#xff1a; 小狄的工作方式 在处理紧急事务的时候&#xff0c;不回应同事的技术求助。老板的召唤必须回应&#xff0c;…...

编程日记 2023/10/28 20:41:46

docker docker-compose安装（centos7）

docker安装 1.卸载旧版 卸载旧版 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine2.安装一个yum工具 yum install -y yum-utils3.配置docker的yum源 yum-config-manager -…...

编程日记 2023/10/28 20:40:45

Dockerfile文件详细教程

写在前面 Dockerfile是用来构建镜像的&#xff0c;他实际上就是把在linux下的命令操作写到了Dockerfile中&#xff0c;通过Dockerfile去执行设置好的操作命令&#xff0c;保证通过Dockerfile的构建镜像是一致的。 实战分析 该例子来自于 chromium 项目 主要干的事情&#xf…...

编程日记 2023/10/28 20:39:44

机器学习-模型评估与选择

文章目录 评估方法留出法交叉验证自助法 性能的衡量回归问题分类问题查准率、查全率与F1ROC与AUC 在机器学习中&#xff0c;我们通常面临两个主要问题&#xff1a;欠拟合和过拟合。欠拟合指模型无法在训练数据上获得足够低的误差&#xff0c;通常是因为模型太简单&#xff0c;无…...

编程日记 2023/10/28 20:38:43

分享一下办公自动化常用的思想

目录 网页获取数据需求①大体思路&#xff1a;PythonseleniumXpath 网页获取数据需求②大体思路&#xff1a;requests爬虫 批量生成需求①文件的移动、重命名②word、Excel批量生成 匹配需求 网页获取数据需求① 大体思路&#xff1a;PythonseleniumXpath 我们在利用Python做…...

编程日记 2023/10/28 20:37:42

mac vscode 使用 clangd

C 的智能提示 IntelliSense 非常不准&#xff0c;我们可以使用 clangd clangd 缺点就是配置繁琐&#xff0c;优点就是跳转和提示代码精准 开启 clangd 之后会提示你关闭 IntelliSense 1、安装插件 clangd 搜索第一个下载多的就是 2、配置 clangd 可执行程序路径 clangd 插…...

编程日记 2023/10/28 20:36:41

DSI及DPHY的学习

DSI的物理层PHY只能是DPHY 本节讲述的DSI是V1.02.00---2010.6.28 从DSI V1.02开始DSI支持图像数据包RGB和YCbCr的传输&#xff0c;在此版本之前只支持RGB传输。 本节内容与CSICDPHY相同时 请参考&#xff1a; CSI2与CDPHY学习-CSDN博客 同时本节会做一些与CSICDPHY的比较 …...

编程日记 2023/10/28 20:35:38

环形链表（C++解法）

题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&#…...

编程日记 2023/10/28 20:34:37

星闪技术 NearLink 一种专门用于短距离数据传输的新型无线通信技术

本心、输入输出、结果 文章目录 星闪技术 NearLink 一种专门用于短距离数据传输的新型无线通信技术前言星闪技术 NearLink 的诞生背景星闪技术 NearLink 简介星闪技术 NearLink 技术是一种蓝牙技术吗星闪技术 NearLink 优势星闪技术 NearLink 应用前景弘扬爱国精神星闪技术 Nea…...

编程日记 2023/10/28 20:33:37

【Python机器学习】零基础掌握RandomForestRegressor集成学习

如何预测房价是不是一直困扰着大家？特别是在房地产市场波动不定的情况下，这样的预测可以说是切实需要。 要解决这个问题，一个可行的方法是利用历史房价数据和房屋的各种属性（如面积、楼层、地理位置等）进行分析。通过这些数据，可以用一个模型来预测未来房价。 假设有以…...

编程日记 2023/10/28 20:32:36

FreeRTOS深入教程（任务创建的深入和任务调度机制分析）

文章目录 前言一、深入理解任务的创建二、任务的调度机制1.FreeRTOS中任务调度的策略2.FreeRTOS任务调度策略实现的核心3.FreeRTOS内部链表源码解析4.如何通过就绪链表管理任务的执行顺序 三、一个任务能够运行多久1.高优先级任务可抢占低优先级任务一直运行2.相同优先级的任务…...

编程日记 2023/10/28 20:31:35

Megatron-LM GPT 源码分析（一） Tensor Parallel分析

引言 本文基于开源代码 GitHub - NVIDIA/Megatron-LM: Ongoing research training transformer models at scale &#xff0c;通过GPT的模型运行示例&#xff0c;从三个维度 - 模型结构、代码运行、代码逻辑说明 对其源码做深入的分析。 Tensor Parallel源码分析...

编程日记 2023/10/28 20:30:34

分类预测 | MATLAB实现SSA-CNN-GRU麻雀算法优化卷积门控循环单元数据分类预测

分类预测 | MATLAB实现SSA-CNN-GRU麻雀算法优化卷积门控循环单元数据分类预测 目录 分类预测 | MATLAB实现SSA-CNN-GRU麻雀算法优化卷积门控循环单元数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现SSA-CNN-GRU麻雀算法优化卷积门控循环单元数据…...

编程日记 2023/10/28 20:29:33

婚礼的魅力

昨日有幸被邀请去当伴郎&#xff0c;虽然是替补&#xff0c;即别人鸽了&#xff0c;过去救急&#xff0c;但总归是去起作用。 婚礼的魅力&#xff0c;感受到了&#xff0c;满满的仪式感&#xff0c;紧凑的流程&#xff0c;还有不断的拍照&#xff0c;做视频&#xff0c;留下美好…...

编程日记 2023/10/28 20:28:32

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/9/15 13:39:23

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/9/14 3:07:02

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/9/14 10:39:35

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/9/14 10:15:03

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/30 14:13:39

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/8/12 1:19:44

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/6/21 15:17:11

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/9/2 18:36:21

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/7/27 0:38:54