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.mzph.cn/news/124799.shtml

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

相关文章

边缘计算技术的崭新篇章:赋能未来智能系统

边缘计算是近年来云计算和物联网技术发展的重要趋势。通过将数据处理和分析从云端迁移到设备边缘&#xff0c;边缘计算能够实现更低的延迟和更高的数据安全。本文将探索边缘计算技术的最新进展及其在不同行业中的应用场景。 1. 实时数据处理与决策 在需要快速响应的场景中&…

Seata入门系列【15】@GlobalLock注解使用场景及源码分析

1 前言 在Seata 中提供了一个全局锁注解GlobalLock&#xff0c;字面意思是全局锁&#xff0c;搜索相关文档&#xff0c;发现资料很少&#xff0c;所以分析下它的应用场景和基本原理&#xff0c;首先看下源码中对该注解的说明&#xff1a; // 声明事务仅在单个本地RM中执行 //…

从0到1之微信小程序快速入门(03)

目录 什么是生命周期函数 WXS脚本 ​编辑 与 JavaScript 不同 纯数据字段 组件生命周期 定义生命周期方法 代码示例 组件所在页面的生命周期 代码示例 插槽 什么是插槽 启用多插槽 ​编辑 定义多插槽 组件通信 组件间通信 监听事件 触发事件 获取组件实例 自…

推荐免费的文本转语音工具TTS-Vue【且开源】

标签&#xff1a; 文本转语音&#xff1b; 免费文本转语音软件&#xff1b; 网上有很多文本转语音的工具&#xff0c;但收费具多。 这里推荐一个免费的文本转语音工具。 不需要注册&#xff0c;下载安装就可以使用。且代码开源。 TTS-Vue 软件主页&#xff1a;https://loker…

第06章_多表查询

第06章_多表查询 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 多表查询&#xff0c;也称为关联查询&#xff0c;指两个或更多个表一起完成查询操作。 前提条件&#xff1a;这些一起查询的表之…

<蓝桥杯软件赛>零基础备赛20周--第3周--填空题

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

MySQL(1):开始

概述 DB&#xff1a;数据库&#xff08;Database&#xff09; 即存储数据的“仓库”&#xff0c;其本质是一个文件系统。它保存了一系列有组织的数据。 DBMS&#xff1a;数据库管理系统&#xff08;Database Management System&#xff09; 是一种操纵和管理数据库的大型软件…

mac 安装homebrew ,golang

mac 安装homebrew ,golang 安装homebrew安装golang选择 apple arm 版本安装配置环境变量 安装homebrew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"回车执行指令后&#xff0c;根据提示操作。具体包括以下提示操作&am…

腾讯云轻量服务器“镜像类型”以及“镜像”选择方法

腾讯云轻量应用服务器镜像类型分为应用镜像、系统镜像、Docker基础镜像、自定义镜像和共享镜像&#xff0c;腾讯云百科txybk.com来详细说下不同镜像类型说明和详细介绍&#xff1a; 轻量应用服务器镜像类型说明 腾讯云轻量应用服务器 应用镜像&#xff1a;独有的应用镜像除了包…

API安全之《大话:API的前世今生》

写在前面&#xff1a;本文结合API使用的业界现状&#xff0c;系统性地阐述API的基本概念、发展历史、表现形式等基础内容&#xff0c;主要包含以下内容&#xff1a; 1.什么是API 2.API的发展历史 3.现代API常用消息格式 4.top N 互联网企业API 使用现状 当前的世界是一个信…

九州未来入选“2023边缘计算产业图谱”三大细分领域

10月26日&#xff0c;边缘计算社区正式发布《2023边缘计算产业图谱》&#xff0c;九州未来凭借深厚的技术积累、优秀的产品服务、完善的产品解决方案体系以及开源贡献&#xff0c;实力入选图谱——边缘计算平台、边缘计算开源、边缘云服务提供商三大细分领域&#xff0c;充分彰…

uniapp保存网络图片

先执行下载uni.downloadFile接口&#xff0c;再执行保存图片uni.saveImageToPhotosAlbum接口。 // 保存二维码 saveQrcode() {var _this this;uni.downloadFile({url: _this.qrcodeUrl, //二维码网络图片的地址success(res) {console.log(res);uni.saveImageToPhotosAlbum({fi…

聊聊统一认证中的四种安全认证协议(干货分享)

大家好&#xff0c;我是陈哈哈。单点登录SSO的出现是为了解决众多企业面临的痛点&#xff0c;场景即用户需要登录N个程序或系统&#xff0c;每个程序与系统都有不同的用户名和密码。在企业发展初期&#xff0c;可能仅仅有几个程序时&#xff0c;管理账户和密码不是一件难事。但…

一文彻底理解python浅拷贝和深拷贝

目录 一、必备知识二、基本概念三、列表&#xff0c;元组&#xff0c;集合&#xff0c;字符串&#xff0c;字典浅拷贝3.1 列表3.2 元组3.3 集合3.4 字符串3.5 字典3.6 特别注意可视化展示浅拷贝总结 四、列表&#xff0c;元组&#xff0c;集合&#xff0c;字符串&#xff0c;字…

Python爬虫实战(六)——使用代理IP批量下载高清小姐姐图片(附上完整源码)

文章目录 一、爬取目标二、实现效果三、准备工作四、代理IP4.1 代理IP是什么&#xff1f;4.2 代理IP的好处&#xff1f;4.3 获取代理IP4.4 Python获取代理IP 五、代理实战5.1 导入模块5.2 设置翻页5.3 获取图片链接5.4 下载图片5.5 调用主函数5.6 完整源码5.7 免费代理不够用怎…

【UE 模型描边】UE5中给模型描边 数字孪生 智慧城市领域 提供资源下载

目录 0 引言1 Soft Outlines1.1 虚幻商城1.2 使用步骤 2 Auto Mesh Outlines2.1 虚幻商城2.2 使用步骤 3 Survivor Vision3.1 虚幻商城3.2 使用步骤 结尾 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;UE虚幻引擎专栏&#x1f4a5; 标题&#xf…

C++ 指针

*放在哪里&#xff1f; 如果声明一个变量&#xff1a;int* b; 如果声明多个变量&#xff1a;int a,*b,*c; nullptr c11中NULL的变形&#xff0c;是一个特殊值&#xff0c;可以赋给任意类型的指针&#xff0c;代表该指针指向为空。 this指针 this指针不是一个const Test*(…

关于ABB 机器人多任务的建立

关于ABB 机器人多任务的建立.需要实时监控某一区域&#xff0c;或者某一信号&#xff0c;或者计件到达某一数量机器人自动停止报警&#xff0c;显示到示教器上&#xff0c;多任务可以实现&#xff0c;类似发那科机器人后台逻辑指令 当软件选项漏选或者少选可以选择修改选项&…

新恶意软件使用 MSIX 软件包来感染 Windows

人们发现&#xff0c;一种新的网络攻击活动正在使用 MSIX&#xff08;一种 Windows 应用程序打包格式&#xff09;来感染 Windows PC&#xff0c;并通过将隐秘的恶意软件加载程序放入受害者的 PC 中来逃避检测。 Elastic Security Labs 的研究人员发现&#xff0c;开发人员通常…

pycharm使用ssh连接远程jupyter

1. 安装jupyter pip install jupyter2. 生成jupyter_notebook_config.py文件 jupyter notebook --generate-config3. 设置命令参数 jupyter notebook --no-browser --allow-root --port 8900配置Jupyter服务器 将上面的代码复制到命令行实参中&#xff1a;