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

文章目录

  • 一、模板语法
    • 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/151926.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++入门精讲——入门看完这一篇就够了

C++入门精讲——入门看完这一篇就够了

文章目录 前言1. C发展历史2. 关键字3. 命名空间3.1 命名空间的概念3.2 命名空间的定义3.3 命名空间的使用 4. C输入、输出5. 缺省参数5.1 全缺省5.2 半缺省 6. 函数重载6.1 几种不同类型的函数重载6.2 函数重载的原理——名字修饰(name Mangling)6.2.1 C程序为什么不支持函数重…
阅读更多...
Python爬虫基础之Requests详解

Python爬虫基础之Requests详解

目录 1. 简介2. 安装3. 发送请求4. 处理响应5. IP代理6. Cookie登录参考文献 原文地址&#xff1a;https://program-park.top/2023/10/27/reptile_4/ 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由…
阅读更多...
如何使用gpt提高效率

如何使用gpt提高效率

如何使用gpt提高效率 自动化替代人力工作减少创意工作需求技术依赖风险实际应用领域内容生成自动回答问题自动化编程个性化推荐 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb; 《java 面试题大全》 &#x1f369;惟余辈才疏学浅&…
阅读更多...
Android [SPI,AutoSerivce,ServiceLoader]

Android [SPI,AutoSerivce,ServiceLoader]

记录一下在Android中使用SPI的过程。 1.项目gralde文件。 plugins {id kotlin-kapt } dependencies {implementation com.google.auto.service:auto-service:1.0-rc7 kapt "com.google.auto.service:auto-service:1.0-rc7" } 这个AutoServ…
阅读更多...
基于51单片机的温度测量报警系统的设计与制作

基于51单片机的温度测量报警系统的设计与制作

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、实习目的二、实习任务2.1 设计温度测量报警系统硬件电路2.2 温度测量报警系统软件编程、仿真与调试&#xff1b;2.3 完成温度测量报警系统的实物制作与调试…
阅读更多...
LVS-DR模式+keepalived+nginx+tomcat实现动静分离、负载均衡、高可用实验

LVS-DR模式+keepalived+nginx+tomcat实现动静分离、负载均衡、高可用实验

实验条件&#xff1a; test2——20.0.0.20——主服务器——ipvsadm、keepalived服务 test3——20.0.0.30——备服务器——ipvsadm、keepalived服务 nginx5——20.0.0.51——后端真实服务器1&#xff08;tomcat的代理服务器&#xff09;——nginx服务 nginx6——20.0.0.61—…
阅读更多...
NNDL：作业五

NNDL：作业五

习题4-1 对于一个神经元,并使用梯度下降优化参数w时,如果输入x恒大于0,其收敛速度会比零均值化的输入更慢. 证明&#xff1a; 激活函数以sigmoid为例。 神经元&#xff1a;有两层&#xff0c;线性层和激活层&#xff1a;yw*xb,然后y‘sigmoid(y)&#xff0c;也就是。 梯度…
阅读更多...
C++ string 类的其他操作

C++ string 类的其他操作

4.3.2 string 类的其他操作 在C新增string类之前,程序员也需要完成诸如给字符串赋值等工作。对于C语言式的字符串,程 序员使用C语言库中的函数来完成这些任务。头文件cstring(以前为string.h)提供了这些函数。例如,可 以使用函数 strcpy()将字符串复制到字符数组中,使用函数…
阅读更多...
【RTOS学习】软件定时器 | 中断处理

【RTOS学习】软件定时器 | 中断处理

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 软件定时器 | 中断处理 &#x1f3c0;软件定时器⚽守护任务守护任务的调度 ⚽使用软件定时器的函数…
阅读更多...
在Go项目中二次封装Kafka客户端功能

在Go项目中二次封装Kafka客户端功能

1.摘要 在上一章节中,我利用Docker快速搭建了一个Kafka服务,并测试成功Kafka生产者和消费者功能,本章内容尝试在Go项目中对Kafka服务进行封装调用, 实现从Kafka自动接收消息并消费。 在本文中使用了Kafka的一个高性能开源库Sarama, Sarama是一个遵循MIT许可协议的Apache Kafk…
阅读更多...
【MySQL】并发事务产生的问题及事务隔离级别

【MySQL】并发事务产生的问题及事务隔离级别

先来复习一下事务的四大特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a;事务是不可分割的最小操作单位&#xff0c;事务中的所有操作要么全部执行成功&#xff0c;要么全部失败回滚&#xff0c;不能只执行其中一部分操作。一致性&#xff08;Consisten…
阅读更多...
排序算法-堆积树排序法（HeapSort）

排序算法-堆积树排序法（HeapSort）

目录 排序算法-堆积树排序法&#xff08;HeapSort&#xff09; 1、说明 2、算法分析 3、C代码 排序算法-堆积树排序法&#xff08;HeapSort&#xff09; 1、说明 堆积树排序法是选择排序法的改进版&#xff0c;可以减少在选择排序法中的比较次数&#xff0c;进而减少排序…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023