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

news2024/12/23 18:30:10

文章目录

  • 一、模板语法
    • 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=false
            
           const v= new Vue({
              el:'#root',   //el第一种写法
              data:{
                name:'张靖奇'
              }
 
            })
         </script>
  1. mount挂载更灵活
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
           const 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=false
            
           const v= new Vue({
              el:'#root',  
            //data的第一种写法，对象式
               data:{
                name:'张靖奇'
             }
            })
            
        </script>

  1. 函数式 （推荐）

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

        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
           const 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 = 18
        let person = {
            name: '张三',
            sex: '男',
        }

        //参数一：给哪个对象添加参数
        //参数二：添加的参数叫什么名
        //参数三：配置项，可以写很多的配置
        bject.defineProperty(person, 'age', {
            value: 18,//这样就代表着age属性的值是18

            // 但是我们这样添加的元素无法进行枚举或者遍历
            // 为了我们新添加的age元素可以添加遍历，我们还需要一个配置
            enumerable: true,

            //除此之外，我们新添加的age属性在页面上无法修改，为了在页面上也可以修改，我们需要再进行配置
            // writable:true

            configurable: true,  //控制属性可以被删除

        })
</script>

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

      <script type="text/javascript">
           let number =18
           let 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.coloradmin.cn/o/1144624.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Ajax学习笔记第二天

Ajax学习笔记第二天

喜欢的东西太贵了&#xff0c;我一咬牙&#xff0c;狠下心决定不喜欢了&#xff01; 【一.GET请求】 【1.1 URL即信息】 我们知道php的相关运算都是在服务器端进行的&#xff0c;此时我们要考虑一个问题&#xff0c;如何将要计算的数字带给服务器&#xff1f;我们可以通过UR…
阅读更多...
如何能在项目具体编码实现之前能尽可能早的发现问题并解决问题

如何能在项目具体编码实现之前能尽可能早的发现问题并解决问题

在项目的具体编码实现之前尽可能早地发现并解决问题&#xff0c;可以大大节省时间和资源&#xff0c;提高项目的成功率。以下是一些策略和方法&#xff1a; 1. 明确需求和预期&#xff1a; 确保所有的项目需求都是清晰和明确的。需求模糊不清是项目失败的常见原因之一。与利益…
阅读更多...
java - IDEA IDE - 设置字符串断点

java - IDEA IDE - 设置字符串断点

文章目录 java - IDEA IDE - 设置字符串断点概述笔记END java - IDEA IDE - 设置字符串断点 概述 IDE环境为IDEA2022.3 在看一段序列化的代码, 想找出报错抛异常那个点, 理解一下代码实现. 因为序列化代码实现在第三方jar包中, 改不了(只读的). 根本数不清第几次才会开始报…
阅读更多...
vue3基础流程

vue3基础流程

目录 1. 安装和创建项目 2. 项目结构 3. 主要文件解析 3.1 main.js 3.2 App.vue 4. 组件和Props 5. 事件处理 6. 生命周期钩子 7. Vue 3的Composition API 8. 总结和结论 响应式系统&#xff1a; 组件化&#xff1a; 易于学习&#xff1a; 灵活性&#xff1a; 社…
阅读更多...
Ubuntu 23.10（Mantic Minotaur）正式发布，支持Linux 6.5和GNOME 45

Ubuntu 23.10（Mantic Minotaur）正式发布，支持Linux 6.5和GNOME 45

导读Canonical 近日正式发布了 Ubuntu 23.10&#xff08;Mantic Minotaur&#xff09;操作系统&#xff0c;其中包含一些最新的 GNU/Linux 技术、改进的硬件支持以及许多其他变化。 Ubuntu 23.10 采用了最新的 Linux 6.5 内核系列&#xff0c;并为 Ubuntu 桌面和服务器增强了 z…
阅读更多...
代码随想录Day31 贪心06 T738 单调递增的数字 T968监控二叉树

代码随想录Day31 贪心06 T738 单调递增的数字 T968监控二叉树

LeetCode T738 单调递增的数字 题目链接:738. 单调递增的数字 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 我们以332举例,题目要我们获得的是小于等于332的最大递增数字,我们知道这个数字要递增只能取299了,332 -- 329 --299 我们从后向前遍历,只要前一位大于后一位,我…
阅读更多...
嵌入式-数码管控制

嵌入式-数码管控制

一、数码管显示数字&#xff0c;P2_4, P2_3,P2_2,这三个组合起来代表1-8的二进制表示代表1-8个led。P0代表要显示的数字的16进制表示。 这个图就是表示led灯, 比如要显示数据6&#xff0c;那就是0111 1101&#xff0c;那么16进制就是0x7D,所以p00x7D 二、数码管&#xff0c;动…
阅读更多...
C/C++数据结构之深入了解树与二叉树：概念、存储结构和遍历

C/C++数据结构之深入了解树与二叉树：概念、存储结构和遍历

树是一种常见的数据结构&#xff0c;它在计算机科学和数学中都有广泛的应用。树结构的最简单形式是二叉树&#xff0c;本文将深入探讨树和二叉树的概念、存储结构以及二叉树的遍历&#xff0c;并提供一些实际的代码示例来帮助理解这些概念。 树与二叉树的概念 树 (Tree) 树是…
阅读更多...
[双指针] Leetcode 283.移动零和1089.复习零

[双指针] Leetcode 283.移动零和1089.复习零

[双指针] Leetcode 283.移动零和1089.复习零 移动零 283. 移动零 1.题意分析 (1) 给你一个数组&#xff0c;将数组中的所有0移动到数组的末尾 (2) 保证非0元素在数组中相对位置不变 (3) 在原数组中操作 2.解题思路 由于题目要求我们移动数组内容&#xff08;也就是交换两…
阅读更多...
【JAVA学习笔记】49 - String类，StringBuffer类，StringBuilder类（重要）

【JAVA学习笔记】49 - String类，StringBuffer类，StringBuilder类（重要）

String类 一、String入门 1) String对象用于保存字符串&#xff0c;也就是一组字符序列 2)字符串常量对象是用双引号括起的字符序列。例如: "你好"、 "12.97"、 "boy"等 3)字符串的字符使用Unicode字符编码&#xff0c;一个字符&#xff08;不…
阅读更多...
城市群（Megalopolis）/城际（inter-city）OD相关研究即Open Access数据集调研

城市群（Megalopolis）/城际（inter-city）OD相关研究即Open Access数据集调研

文章目录 1 城市群/城际OD定义2 理论模型与分析方法2.1 重力模型 Gravity Model2.2 干预机会模型 Intervening Opportunities Model2.3 辐射模型 Radiation Model 3 Issues related to OD flows3.1 OD Prediction3.2 OD Forecasting3.3 OD Construction3.4 OD Estimation 4 OD …
阅读更多...
Kubernetes - Ingress HTTP 负载搭建部署解决方案（新版本v1.21+）

Kubernetes - Ingress HTTP 负载搭建部署解决方案（新版本v1.21+）

在看这一篇之前&#xff0c;如果不了解 Ingress 在 K8s 当中的职责&#xff0c;建议看之前的一篇针对旧版本 Ingress 的部署搭建&#xff0c;在开头会提到它的一些简介Kubernetes - Ingress HTTP 负载搭建部署解决方案_放羊的牧码的博客-CSDN博客 开始表演 1、kubeasz 一键安装…
阅读更多...
星闪技术 NearLink 一种专门用于短距离数据传输的新型无线通信技术

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

本心、输入输出、结果 文章目录 星闪技术 NearLink 一种专门用于短距离数据传输的新型无线通信技术前言星闪技术 NearLink 的诞生背景星闪技术 NearLink 简介星闪技术 NearLink 技术是一种蓝牙技术吗星闪技术 NearLink 优势星闪技术 NearLink 应用前景弘扬爱国精神星闪技术 Nea…
阅读更多...
AlmaLinux正开发成为不包含RHEL代码但兼容RHEL的发行版本

AlmaLinux正开发成为不包含RHEL代码但兼容RHEL的发行版本

导读近日消息&#xff0c;AlmaLinux 正在创建一个不包含 Red Hat Enterprise Linux&#xff08;RHEL&#xff09;代码&#xff0c;但兼容 RHEL 的发行版本。 AlmaLinux OS 基金会主席 benny Vasquez 出席 All Things Open 开源社区大会&#xff0c;表示 AlmaLinux 发行版的目标…
阅读更多...
jenkins自动化操作步骤（gitblit）

jenkins自动化操作步骤（gitblit）

1、登陆地址&#xff1a; http://xxxxxxxxx.org:xxxx/ admin/xxxx 2、创建任务 选择构建一个maven项目 3、配置 最多只保留一天一个任务 选择git仓库和账号密码 选择代码对应分支 build项&#xff1a; 1&#xff09;使用父项目的pom文件&#xff1a;k56-boot/pom.xml 2&…
阅读更多...
什么是鱼叉式网络钓鱼？

什么是鱼叉式网络钓鱼？

鱼叉式网络钓鱼 1. 鱼叉式网络钓鱼的概念2. 鱼叉式网络钓鱼的原理3. 鱼叉式网络钓鱼与网络钓鱼的区别4. 如何防范鱼叉式网络钓鱼 1. 鱼叉式网络钓鱼的概念 鱼叉式网络钓鱼&#xff08;Spear Phishing &#xff09;&#xff0c;又称鱼叉式网络攻击&#xff0c;是一种针对特定目…
阅读更多...
SpringCore完整学习教程4，入门级别

SpringCore完整学习教程4，入门级别

本章从第4章开始 4. Logging Spring Boot使用Commons Logging进行所有内部日志记录&#xff0c;但保留底层日志实现开放。为Java Util Logging、Log4J2和Logback提供了默认配置。在每种情况下&#xff0c;记录器都预先配置为使用控制台输出和可选的文件输出。 默认情况下&…
阅读更多...
云服务器搭建Spark集群

云服务器搭建Spark集群

文章目录 1. Local 模式1.1 安装local模式1.2 命令行工具1.3 提交本地应用 2. Standlone模式2.1 集群配置2.2 修改配置文件2.3 启动集群与停止集群2.4 提交应用到集群环境2.5 提交应用的参数详细说明2.6 配置历史服务2.7 配置高可用&#xff08;HA&#xff09; 3. Yarn模式&…
阅读更多...
“爱知道”，你知道吗？

“爱知道”，你知道吗？

拥抱时代浪潮&#xff0c;加速科技变革。数字经济时代&#xff0c;杭州重点贯彻市委市政府数字经济创新提质“一号发展工程”&#xff0c;加快发展数字经济&#xff0c;推动全市数字经济往高攀升、向新进军、以融提效。基于政府对数字经济新活力的赋能、优化数字社会环节、构建…
阅读更多...
『力扣刷题本』：删除排序链表中的重复元素

『力扣刷题本』：删除排序链表中的重复元素

一、题目 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2]示例 2&#xff1a; 输入&#xff1a;head [1,1,2,3,3] 输出&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023