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

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

news 2026/4/6 1:47:55

文章目录

一、模板语法
- 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”，也就是指令语法

指令语法：

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

举例：

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

展示单向数据绑定

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

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

原因：单向绑定的关系

2.2 双向数据绑定

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

结果如下图

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

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

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

三、el与data的两种写法

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

3.1 el

第一种

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

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

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

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

为什么是mount？

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

3.2 data

对象式

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

函数式 （推荐）

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

        <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:'尚硅谷'}}

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

   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>

效果如下图所示

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中对应的属性

数据代理图示

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

假设我们没有数据代理，我们在使用插值语句的时候使用了**_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

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

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

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

springboot+mybatis-plus实现读写分离

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

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

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

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

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

2023高频前端面试题-CSS

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

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

我会在以下情况用到GPT

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

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

33:深入浅出x86中断机制

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

编程日记 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是用来构建镜像的，他实际上就是把在linux下的命令操作写到了Dockerfile中，通过Dockerfile去执行设置好的操作命令，保证通过Dockerfile的构建镜像是一致的。实战分析该例子来自于 chromium 项目主要干的事情&#xf…...

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

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

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

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

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

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

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

mac vscode 使用 clangd

C 的智能提示 IntelliSense 非常不准，我们可以使用 clangd clangd 缺点就是配置繁琐，优点就是跳转和提示代码精准开启 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的传输，在此版本之前只支持RGB传输。本节内容与CSICDPHY相同时请参考： CSI2与CDPHY学习-CSDN博客同时本节会做一些与CSICDPHY的比较 …...

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

环形链表（C++解法）

题目给你一个链表的头节点 head ，判断链表中是否有环。如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。为了表示给定链表中的环，评测系统内部使用整数 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 ，通过GPT的模型运行示例，从三个维度 - 模型结构、代码运行、代码逻辑说明对其源码做深入的分析。 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

婚礼的魅力

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

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

51单片机（二） --- GPIO + 中断

一、GPIO 通用输入输出口GPIO（General Purpose Input Output）即通用目的输入输出口，是 51 单片机与外部设备进行数据交互的核心通道，51 单片机的 P0、P1、P2、P3 四组口均为 GPIO 口。与入门阶段仅用到的简单电平输出不同&#xf…...

编程新知 2026/4/6 0:02:24

无效加班多，工资一般的软件开发公司有必要留在公司吗？你的代码可以重构，但你的人生不能重来。及时止损才是最理性的选择。

你的代码可以重构，但你的人生不能重来。在一家既给不了钱、又给不了成长、还在消耗你健康的公司，及时止损才是最理性的选择。无效加班多，工资一般的软件开发公司有必要留在公司吗？ 面对“无效加班多”且“工资一般”的现状&#…...

编程新知 2026/4/5 23:17:35

字节跳动开源Coze后，个人开发者如何快速上手？保姆级教程来了

字节跳动开源Coze实战指南：从零构建AI智能体的完整路径当字节跳动宣布将Coze平台全面开源时，整个开发者社区为之振奋。这个被称作"AI智能体全栈工厂"的平台，如今终于揭开了神秘面纱，让个人开发者能够深入探索其技术内核…...

编程新知 2026/4/5 23:05:24

OAK-D-S2/FFC系列深度校准实战：从原理到提升精度的几个关键技巧

OAK-D-S2/FFC系列深度校准实战：从原理到提升精度的几个关键技巧深度相机校准是计算机视觉领域的一项基础但至关重要的技术。对于OAK-D-S2和FFC系列这样的高性能设备，校准质量直接决定了深度图的精度和可靠性。本文将带您深入理解校准背后的数学原理&am…...

编程新知 2026/4/5 22:43:07

拆解Clonezilla镜像：除了partclone，你还需要知道的底层原理与工具链

拆解Clonezilla镜像：从分卷压缩到文件系统的技术全景解析当我们需要从Clonezilla备份中提取单个文件时，传统方法往往要求完整恢复整个镜像——这种"全有或全无"的方式在存储资源有限的情况下显得尤为笨重。本文将带您深入Clonezilla镜像的底层…...

编程新知 2026/4/5 22:16:45

突破企业AI应用开发瓶颈：Awesome-Dify-Workflow无代码解决方案深度剖析

突破企业AI应用开发瓶颈：Awesome-Dify-Workflow无代码解决方案深度剖析【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程，自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/…...

编程新知 2026/4/5 22:03:55

夸克网盘自动化助手：彻底告别手动转存的智能管理方案

夸克网盘自动化助手：彻底告别手动转存的智能管理方案【免费下载链接】quark_auto_save 夸克网盘签到、自动转存、命名整理、发推送提醒和刷新媒体库一条龙项目地址: https://gitcode.com/gh_mirrors/qu/quark_auto_save 还在为每天重复的夸克网盘转存操作而…...

编程新知 2026/4/5 21:09:07

如何通过智能字体处理实现前端优化：Fontmin实用指南

如何通过智能字体处理实现前端优化：Fontmin实用指南【免费下载链接】fontmin Minify font seamlessly 项目地址: https://gitcode.com/gh_mirrors/fo/fontmin 问题引入：未优化字体的性能陷阱在现代前端开发中，字体文件往往成为性能…...

编程新知 2026/4/5 18:58:49

FontForge字体设计：从零到专业字体的免费创作之路 ✨

FontForge字体设计：从零到专业字体的免费创作之路 ✨ 【免费下载链接】fontforge Free (libre) font editor for Windows, Mac OS X and GNULinux 项目地址: https://gitcode.com/gh_mirrors/fo/fontforge 还在为商业字体授权费用而烦恼吗？想要打…...

编程新知 2026/4/5 18:22:12

4大场景化解决方案：CyberpunkSaveEditor存档修改工具全指南

4大场景化解决方案：CyberpunkSaveEditor存档修改工具全指南【免费下载链接】CyberpunkSaveEditor A tool to edit Cyberpunk 2077 sav.dat files 项目地址: https://gitcode.com/gh_mirrors/cy/CyberpunkSaveEditor 当你在夜之城遭遇装备属性不足、任务进度…...

编程新知 2026/4/5 17:53:40