Vue的学习之旅-part1

Vue的学习之旅-part1

  • vue介绍
    • vue读音
    • 编程范式
    • ES6中不用var声明变量
    • vue的声明、初始化传参
    • 使用data中数据时要用this指向
  • vue中的语法糖
  • MVVM
    • 在Vue中, MVVM的各层的对应位置
  • 方法、函数的不同之处

vue介绍

vue读音

Vue 读作 /vju:/ 不要读成v u e
Vuex 的x读作叉 不要读成埃克斯


博主 DTcode7 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!

后续还有5个part,敬请期待哦~


编程范式

一般的编程方式的编程范式:命令式编程
也就是第一步创建dom元素,第二步定义变量,第三步将变量展示到dom中去

Vue的编程范式:声明式编程
通过挂载要管理的元素,在data中定义数据,页面中使用{{}}【叫做mustache(胡须)语法,是一种模板语法】 根据data中的数据名获取到数据展示在html中。 且会随着数据的改变自动改变html中的数据(响应式)
在这里插入图片描述
在这里插入图片描述

ES6中不用var声明变量

ES6中不用var声明变量了,因为var有作用域之类的缺陷 都用let声明变量,const声明常量

vue的声明、初始化传参

在这里插入图片描述

new Vue( ) 方法里传入的options参数是个对象{}  这个对象里可以有:
el-------》指定挂在的dom的id
data----》绑定的数据 可以是对象,但是在组件中,data必须是个函数(就是有返回值)
methods:{}  -------》方法
computed:{}  -----》计算属性  注意:因为是属性,所以里面的方法命名时尽量不要起名为:getCount这样有get这种动词的名字,直接叫做count这样的名词就行,这样才是属性

还可以有,生命周期中的各种钩子函数

使用data中数据时要用this指向

注意:methods、computed等操作中要想拿到data里的数据,需要通过this来指向
在这里插入图片描述

vue中的语法糖

语法糖:一种代码的简写

v-on:click  的语法糖(简写)---》 @click  v-on:就是用于监听 DOM 事件的
v-on:hover  ===>  @hover  鼠标悬停时触发

在这里插入图片描述
后面跟着要触发的方法

v-on: 当所要触发的函数没有参数需要传入的时候,可以不写() 直接写方法名称v-bind:  ---->  语法糖:就是一个 :    v-model(数据双向绑定)本质上就是个语法糖v-slot: -----> 语法糖:是个 #    插槽

在这里插入图片描述

MVVM

MVVM:Model-View-ViewModel的简写
在这里插入图片描述
Model–》数据层,后端数据、来自服务器的数据等
View—》视图层,也就是前端html的DOM层,给客户看的页面效果
ViewModel—》视图模型层,是数据层和视图层链接的桥梁。 一:实现数据双向绑定,将Model层的数据变化实时展现到View层中。二:实现DOM监听,当页面DOM元素发生事件(点击、滚动、移入移出等),可以根据方法进行操作Model层的数据

在Vue中, MVVM的各层的对应位置

在这里插入图片描述

Model----》就是data值
View----》就是html部分的代码
ViewModel---》就是const app=new Vue()   通过new Vue()创建的实例就是数据层和视图层交互的桥梁

方法、函数的不同之处

函数:就是单独定义的一个function,供别人调用

方法:定义在一个实例里面的函数,叫做方法,是在这个实例里的,不是放在外面给谁都能用的。

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

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

相关文章

Redis高可用技术

一.Redis高可用介绍: 高可用是指:服务器正常访问的时间 衡量的标准是:在多长时间内可以提供正常服务99.9%、99.99%、99.999%等等 但是在Redis语境中, 高可用的含义似乎要宽泛一些,除了保证提供正常服务(如主从分离、…

IntelliJ IDEA中文---强化智能编码与重构,提升开发效率

IntelliJ IDEA 2023是一款功能强大的集成开发环境(IDE),专为Java开发人员设计。它支持智能代码编辑、自动补全和重构,帮助开发者提高编码效率。同时,内置了丰富的调试工具,支持断点调试和变量监视&#xff…

C语言--文件操作

1.标准流 • stdin - 标准输⼊流,在⼤多数的环境中从键盘输⼊,scanf函数就是从标准输⼊流中读取数据。 • stdout - 标准输出流,⼤多数的环境中输出⾄显⽰器界⾯,printf函数就是将信息输出到标准输出 流中。 • stderr - 标…

丰诺畅机电科技将莅临2024年第13届生物发酵展

参展企业介绍 无锡丰诺畅机电科技有限公司,是一家分离设备专业制造公司,集开发、设计、制造、销售、服务于一体;具有专业的生产技术,先进的生产工艺,精良的制造设备,完善的检测手段;为满足不同用户的过滤需求&#xf…

HTTP/UDP/TCP/IP网络协议

文章目录 计算机网络基础HTTPUDPTCP连接管理(三次握手/四次挥手)TCP可靠传输(确认答应)超时重传滑动窗口流量控制拥塞控制延时应答捎带应答粘包问题其他 IP数据链路层MUT 相关问题TCP会粘包、UDP永远不会粘包 学习博客 计算机网络基础 OSI模型定义了网络互连的七层框架&#x…

esp32控制舵机---待完善

舵机有三个引脚,分别是电源、电源GND和信号线。如下图所示: ESP32-WROOM-32E的引脚的定义如下: 图来自乐鑫官网:ESP32-DevKitC V4 入门指南 - ESP32 - — ESP-IDF 编程指南 v5.2.1 文档 硬件连接图: 待补充

013——超声波模块驱动开发(基于I.MX6uLL与SR04)

目录 一、 模块介绍 1.1 产品特色 1.2 产品实物图 1.3 接口定义 1.4 测距调节 1.5 模块工作原理 1.6 注意 二、 编码思路 三、 驱动程序 四、 应用程序 五、 Makefile 六、 其它及实验 一、 模块介绍 超声波测距模块是利用超声波来测距。模块先发送超声波&#xf…

边缘计算盒子与云计算:谁更适合您的业务需求?

边缘计算盒子和云计算,这两个概念听起来可能有点复杂,但其实它们就是两种不同的数据处理方式。那谁更适合您的业务需求呢?咱们来详细说说。 边缘计算盒子,就像是个小型的数据处理中心,放在离你业务现场比较近的地方。它…

WPS二次开发专题:如何获取应用签名SHA256值

作者持续关注WPS二次开发专题系列,持续为大家带来更多有价值的WPS开发技术细节,如果能够帮助到您,请帮忙来个一键三连,更多问题请联系我(QQ:250325397) 在申请WPS SDK授权版时候需要开发者提供应用包名和签…

美创科技获浙江省网络空间安全协会多项荣誉认可

4月2日,浙江省网络空间安全协会第二届会员大会第一次会议在杭州隆重召开,近180家会员单位代表、数十位特邀专家、嘉宾莅临现场。浙江省委网信办副主任马晓军出席会议并致辞,本次大会由协会秘书长吴铤主持。 凝心聚力,继往开来&…

SAP:无法在插件模式 HTTP 中处理消息 E ** xxx

问题描述:利用post方式接口,返回信息为 无法在插件模式 HTTP 中处理消息 E ** xxx ,如何排查是因为什么问题导致的? 解决方法: 事务码:SE91, 输入消息类,消息编号,点击显示,查看报…

【NLP笔记】LLM应用之AI Agent LangChain实战

文章目录 AI Agent概述LangChain实战构建prompt模版LLM调用调用HuggingFace开源大模型(在线)调用HuggingFace开源大模型(本地)调用文心一言 ChainsSingle ChainSequential ChainSimple Sequential ChainComplex Sequential Chain …

【重学C语言】三、C语言最简单的程序

【重学C语言】三、C语言最简单的程序 最简单的程序头文件使用尖括号 < >使用双引号 ""区别与注意事项示例 主函数认识三个错误 常量和变量常量ASCII 码表转义字符 关键字数据类型关键字存储类关键字修饰符关键字控制流程关键字函数相关关键字其他关键字 变量变…

长连接详解

一分钟了解长连接 、短连接、心跳机制与断线重连 - 知乎 (zhihu.com) websocket 实现长连接原理_websocket 是长连接吗-CSDN博客

kettle使用MD5加密增量获取接口数据

kettle使用MD5加密增量获取接口数据 场景介绍&#xff1a; 使用JavaScript组件进行MD5加密得到Http header&#xff0c;调用API接口增量获取接口数据&#xff0c;使用json input组件解析数据入库 案例适用范围&#xff1a; MD5加密可参考、增量过程可参考、调用API接口获取…

Jenkins--任务详解

一、任务类型 Jenkins的主要功能的实现是由执行任务去完成的&#xff0c;常用的任务类型主要有以下三种&#xff1a; 自由风格任务(Free Style Project): 这是Jenkins中最常用的任务类型&#xff0c;允许你自定义各种构建步骤和配置选项&#xff0c;如源码管理、构建触发器、…

JMM内存模型 volatile关键字解析

前言 对于多线程等等的各种操作,相比各位都了然于胸,现在我们来介绍一下更底层一点点的JMM内存模型,其实也是一个很简单的理想的内存模型 注意与JVM的内存模型区分 多线程内存模型主要是基于CPU缓存搭建起来的 这里就区分工作内存和主内存了 我们线程操作的其实是主内存的一个副…

构建第一个JS应用(FA模型)

创建JS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择Application应用开发&#xff08;本文以应用开发为例&#xff0c;Atomic Service对…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之一 简单视频放大抖动效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之一 简单视频放大抖动效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之一 简单视频放大抖动效果 一、简单介绍 二、简单视频放大抖动效果实现原理 三、简单视频放大…

R语言数据挖掘:随机森林(1)

数据集heart_learning.csv与heart_test.csv是关于心脏病的数据集&#xff0c;heart_learning.csv是训练数据集&#xff0c;heart_test.csv是测试数据集。要求&#xff1a;target和target2为因变量&#xff0c;其他诸变量为自变量。用决策树模型对target和target2做预测&#xf…