VUE_学习笔记

news2024/10/6 10:40:21

一、 xx

二、模板语法

1.模板语法之差值语法 :{{ }}

主要研究:{{ 这里可以写什么}}

  1. 在data中声明的变量、函数等都可以。
  2. 常量
  3. 只要是合法的javascript表达式,都可以。
  4. 模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math和Date等。(见Vue官网)

2.模板语法之指令语法: v-???

指令语法:

  1. 什么事指令?有什么用?
    指令的职责是:当表达式的值改变是,将其产生的连带影响,响应式的作用于DOM。
  2. Vue框架中的所有指令的名字都已“v-”开始。
  3. 差值是写在标签体当中的,那么指令写在哪里呢?
    Vue框架中所有的指令都是以html标签的属性形式存在的,
    例如:<span 指令是写在这里的>{{这是插值语法的位置}}< /span >
    注意:虽然指令是写在标签的属性位置上,但是这个指令浏览器是无法直接看懂的;
    是需要先让Vue框架进行编译的,编译之后的内容浏览器是可以看懂的。
  4. 指令的语法规则:
    指令的一个完成的语法格式:
    <HTML标签 v-指令名:参数=“javascript表达式”></HTML标签>
    表达式:之前在插值语法中{{这里可以写什么}},那么指令中的表达式就可以写什么。实际上是一样的 。
    但是需要注意的是:在指令中的表达式位置不能在外层再添加一个{{}}
    不是所有的指令都有参数和表达式:
    有的指令,不需要参数,也不需要表达式,例如v-once
    有的指令,不需要参数,但是需要表达式,例如v-if="表达式"
    有的指令,既需要参数,又需要表达式,例如v-bind:参数="表达式"
  5. v-once 指令
    作用: 只渲染元素一次。随后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
  6. v-if=“表达式” 指令
    作用:表达式的执行结果需要是一个布尔类型的数据:true或false
    true:这个指令所在的标签,会被渲染到浏览器当中。
    false:这个指令所在的标签,不会被渲染到浏览器当中。
  7. v-bind 指令
    它是一个负责动态绑定的指令。
    v-bind 指令详解:
    1.这个指令是干啥的?
    它可以让HTML标签的某个属性的值阐释动态的效果。
    2.v-bind指令的语法格式:
    <HTML标签 v-bind:参数=“表达式”></HTML标签>
    3.v-bind指令的编译原理:
    编译前:<HTML标签 v-bind:参数=“表达式”></HTML标签>
    编译后:<HTML标签 参数=“表达式的执行结果”></HTML标签>
    注意两项:
    第一:在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”。
    第二:表达式会关联data,当data发声改变之后,表达式的执行结果就会发声变化。
    所以,连带的就会产生动态效果。
    4.v-bind因为很常用,所以Vue框架对该指令提供了一种简写方式:
    只是针对v-bind提供了一下简写方式:
    < img :src=“imgPath”>
    5.什么时候使用插值语法?设么时候使用指令?
    凡是标签体当中的内容要想动态,需要使用插值语法;
    只要想HTML标签的属性动态,需要使用指令语法。
  8. v-model 指令
    v-bind和v-model的区别和联系
    1. v-bind和v-model这两个指令都可以完成数据绑定
    2. b-bind是单向数据绑定。
    3. v-model是上香数据绑定
    4. v-bind可以使用在任何HTML标签汇总,v-model只能使用在表单元素上,
      例如:input,select、textarea标签等
      为什么v-model的使用会有这个限制呢?
      因为表单类的元素才能给用户提供交互输入的界面。
    5. v-bind和v-model都有简写方式:
      v-bind简写方式:
      v-bind:参数=“表达式” 简写为: :参数=“表达式”
      b-model简写方式:
      v-model:value=“表达式” 简写为 v-model=“表达式”

三、MVVM分层思想

  1. MVVM是什么?
    M:Model(模型/数据)
    V:View(视图)
    VM:ViewModel(视图模型):VM是MVVM中的核心部门。
    MVVM是目前前端开发领域中非常流行的开发思想(一种架构模式)。
    目前前端的大部分主流框架都实现了这个MVVM思想,例如Vue,React等。
  2. Vue框架遵循MVVM吗?
    虽然没有完全遵循MVVM模型,但是Vue的设计也受到了它的启发。
    Vue框架基本上也是符合MVVM思想的。
  3. MVVM模型当中倡导了Model和View进行了分离,为什么要分离?
    加入Model和View不分离,使用最原始的原生的javascript代码写项目,如果数据发生任意的改动,接下来我们需要编写大篇幅的操作DOM元素的JS代码。
    将Model和View分离之后,出现了一个VM核心,这个VM把所有的脏活累活给做了,也就是说,当Model发生改变之后,VM自动去更新View,当View放生改动之后,VM自动去更新Model。我们再也不需要不间歇操作DOM的JS代码了。开发效率提高了很多。

四、认识vm

  1. 通过Vue实例都可以访问哪些属性(通过vm都可以vm.什么)?
    Vue实力老钟的属性很多,有的以“ ”开始,有的以 “ ” 开始所有以“ ” 开始,有的以“_”开始 所有以“ 开始,有的以开始所有以”开始的属性,可以看做是公开的属性,这些属性是提供程序员使用的。
    所有以“_”开始的属性,可以看做是私有的属性,这些属性是Vue框架低层使用的。一般程序员很少使用。
    通过vm 也可以方位Vue实例对象的原型对象上的属性,例如:vm.$delete …

五、Object.defineProperty()

  1. 这个方法是ES5新增的 。
  2. 这个方法的作用是:给对象新增属性,或者设置对象原有的属性。
  3. 怎么用?
    Object.defineProperty(给那个对象新增属性,’ 新增的这个属性叫啥 ',{给新增的属性设置相关的配置项key:value对})
  4. 第三个参数时属性相关的 配置项,配置项都有哪些?每个配置项的左右是啥?
    value 配置项:给属性指定值
    writable 配置项:设置该属性的值是否可以被修改。true标识可以修改。false表示不能修改。
    getter方法 配置项: 不需要手动调用。当读取属性值的时候,getter方法被自动调用。
    getter方法的返回值非常重要,这个返回值就代表这个属性的它的值;
    setter方法 配置项: 不需要手动调用。当修改属性值的时候,setter方法被自动调用。
    setter方法上是有一个参数的,这个参数可以接受传过来的值。
    注意:当配置项当中有setter和setter的时候,value和writable配置项都不能存在。
    在这里插入图片描述

六、数据代理机制

  1. 什么是数据代理机制?
    通过方位代理对象的属性来简介访问目标对象的属性。
  2. 数据代理机制的实现需要依靠:Object。defineProperty()方法。

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

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

相关文章

精准关键词获取-行业搜索词分析

SEO关键词的收集通常可以通过以下几种方法&#xff1a; 根据市场价值、搜索词竞争性和企业实际产品特征进行筛选&#xff1a;确定您的关键词列表之前&#xff0c;建议先进行市场分析&#xff0c;了解您的竞争对手、行业状况和目标受众等信息&#xff0c;以更好的了解所需的特定…

MySQL日志

MySQL日志 错误日志 错误日志是MySQL中最重要的日志之一&#xff0c;它记录了当mysqld启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当数据库出现任何故障导致无法正常使用时&#xff0c;建议首先查看此日志。 使用如下命令&#xff0c;可…

ChatGPT宝藏插件丨装上之后,上网、语音聊天、一键分享对话……简直让你爽到起飞!

今天分享4个让你的 ChatGPT 功能更强大的浏览器插件&#xff0c;装上就能用&#xff0c;每一个都是精挑细选。 1. WebChatGPT 很多小伙伴在用 ChatGPT查阅信息时&#xff0c;发现它有一个致命的问题&#xff1a; ChatGPT的知识库全部截止到 2021年9月&#xff0c;正常情况下…

航拍构图方法

目录 简介 对比构图 重复对比 明暗对比 颜色对比 空间错位 点构图 中心点构图 九宫格构图 线构图 二分线&#xff08;水平、对称&#xff09;构图 三分线构图 平行线构图 对角线构图 引导线构图 面构图 前景构图 简化构图 总结 简介 最近接触了无人机&#xf…

MySQL数据库备份(导出导入)的命令详解mysqldump

![在这里插入图片描述](https://img-blog.csdnimg.cn/174ee9e5170445b7acab94c5d97684ea.png [options] 参数参数说明-A, --all-databases导出所有数据库-B, --databases导出指定数据库-h, --hostname指定ip&#xff0c;默认本机-P, --port#指定端口&#xff0c;默认3306-u, …

【Java面试八股文宝典之MySQL篇】备战2023 查缺补漏 你越早准备 越早成功!!!——Day21

大家好&#xff0c;我是陶然同学&#xff0c;软件工程大三即将实习。认识我的朋友们知道&#xff0c;我是科班出身&#xff0c;学的还行&#xff0c;但是对面试掌握不够&#xff0c;所以我将用这100多天更新Java面试题&#x1f643;&#x1f643;。 不敢苟同&#xff0c;相信大…

JavaEE——文件操作与IO操作

目录 文件路径 文件类型 File类 文件的创建 文件流 File类文件读写操作 通过PrintWriter写或Scanner读 PrintWriter写 Scanner读 文件路径 计算机中的文件是以树形结构进行存储的。要找一个文件&#xff0c;需要通过根目录一层一层找&#xff0c;直到找到&#xff0c;…

不敲代码用ChatGPT开发一个App

先说下背景&#xff0c;有一天我在想 ChatGPT 对于成熟的开发者来说已经是一个非常靠谱的助手了&#xff0c;身边也确实有很多同事把它作为一个离不开的助理担当。 但是如果我只是略微懂一点前端知识的新人&#xff0c;了解 HTML、CSS、JS 相关的知识&#xff0c;想开发一个安…

华为进军ERP,北用友南金蝶格局或将生变?用户:No!我们选择它

目录 华为搅局ERP市场 用友金蝶如何应对 我们另有选择 那么这款软件是什么&#xff1f; 小结 华为搅局ERP市场 任正非表示4月份将上线MetaERP&#xff01;受此消息影响&#xff0c;ERP市场的两大巨头用友、金蝶股价纷纷跳水。 在机构的定价逻辑里&#xff0c;用友网络、金…

主机发现和端口扫描基本原理和工具选择

发现主机 扫描端口指令sudo nmap -sn ip 实则是封装ping指令 可以找目标靶机 sudo nmap --min-rate 10000 -p- 192.168.10.191 -p端口号 -p-从一开始扫 设置最小速度扫描 -p-指定靶机 10000是较好的速度 在工作中最好扫两遍 UDP扫描 sudo nmap -sU --min-rate 10000 …

10 kafka生产者发送消息的原理

1.发送原理&#xff1a; 在消息发送的过程中&#xff0c;涉及到了两个线程——main 线程和 Sender 线程。在 main 线程 中创建了一个双端队列 RecordAccumulator。main 线程将消息发送给 RecordAccumulator&#xff0c; Sender 线程不断从 RecordAccumulator 中拉取消息发送到…

大数据自我进阶(数据仓库)-暂未完全完成

什么时候需要数据仓库&#xff1f; 1.当决策者要进行战略分析或者展示统计的需求。 2.并且数据量非常庞大&#xff0c;而且各个都是数据孤岛。 当满足这2个条件后&#xff0c;就需要搭建数据仓库。 数据仓库的第一步&#xff08;数据清洗&#xff09; 为了能准确的分析&am…

python编辑工具PyCharm下载安装步骤

开发python程序的途径还是不少的 用解释器一行行执行代码 或者 通过解释器程序执行一个python代码文件 但这两种方式 其实都只是测试场景下的使用 就好像古代打仗&#xff0c;光有英雄好汉没用&#xff0c;他还有有一件趁手的兵器&#xff0c;大部分python程序都是在PyCharm上开…

MIPI 打怪升级之DPI篇

目录1 Overview2 Display Architectures2.1 Type 1 Display Architecture Block Diagram2.2 Type 2 Display Architecture Block Diagram2.3 Type 3 Display Architecture Block Diagram2.4 Type 4 Display Architecture Block Diagram3 Interface Signal Description3.1 Power…

逆波兰表达式求值(力扣刷题代码随想录刷题)

给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。 每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或者另一个表达式。 两…

4月9日第壹简报,星期日,农历闰二月十九

4月9日第壹简报&#xff0c;星期日&#xff0c;农历闰二月十九坚持阅读&#xff0c;静待花开1. “2023中国品牌女性500强”榜单揭晓&#xff0c;屠呦呦、张桂梅、董明珠、刘洋、孟晚舟、谷爱凌等入选。2. 京东集团副总裁&#xff1a;将在今年发布“京东版”ChatGPT。3. 以冒名顶…

壹-prometheus安装

https://blog.csdn.net/hancoder/article/details/121703904 安装 壹&#xff0c; prometheus server 安装 github 1,上传安装包 # 解压到/opt/module 目录下&#xff1a; mkdir /opt/module tar -zxvf prometheus-2.29.1.linux-amd64.tar.gz -C /opt/module # 修改目录…

vscode+gitee

临近毕业&#xff0c;程序整理很麻烦&#xff0c;学习了一下gitee。 使用方法 1.安装必要的软件 &#xff08;1&#xff09;.vscode&#xff1a;参照之前环境配置的博文 &#xff08;2&#xff09;.git 2.在gitee新建仓 &#xff08;1&#xff09;新建仓 &#xff08;2&…

学会吊打面试官之容器终篇priority_queue

小白&#xff1a;大牛您好&#xff0c;我即将毕业需要找工作&#xff0c;但是我对于常用容器的特点和用法不是很清楚&#xff0c;能否跟我聊聊呢&#xff1f; 大牛&#xff1a;没问题&#xff0c;我很乐意帮助你。常用容器有 vector、list、set、map 和 priority_queue。其中&…

Linux中你必须掌握的CPU load

文章目录1. 查看CPU load2.CPU load含义2.1 单核CPU2.2 多核CPU3. 获得系统的CPU信息1. 查看CPU load uptimeloadd average后的三个数字分别代表1分钟、5分钟、15分钟的负载情况平均值 2.CPU load含义 CPU load是一段时间内CPU正在处理以及等待CPU处理的进程数之和的统计信息…