Vue的命令式和声明式的概念

1.命令式框架(jQuery)

这里有个小例子:

1.获取id为app的div标签

2.设置他的文本内容是hello,world

3.为其绑定点击事件

4.当点击时候弹出提示ok

1.首先我们通过$来活动app的标签
$(`#app`)//获取id为app的标签
2.然后通过text来讲内容设置为hello,world
.text(`hello world`)//将内容设置为hello,world
3.然后我们为他注册上点击事件,然后弹出ok
.on(`click`,()=>){//绑定点击事件
   alert('ok')弹出ok
})

这个是用jQuery实现方式,但是很多人可能没有用过jQuery,那我们就来用原生Js来实现这种方式

1.我们会通过document.querySelector来实现app的标签
const div=document.querySelector(`#app`)//获取app的标签
2.然后用innerText来设置内容为hello,world
div.innerText='hello,world'//将内容设置为hello,world
3.然后通过addEventListener来设置绑定点击事件
div.addEventListener['click',()=>]{//绑定点击事件
4.点击弹出ok
alert('ok')//点击弹出ok
}]

这两个写法不管是用哪一种都能与我们需求一一对应,这两种代码本身就是描述做事情的过程

2.声明式框架vue.js

我们的声明式框架会更关注与结果

看一下我们上面的需求是如何在vue如何实现的

<div @click="()=>alert('OK'))">hello world</div>

这个模板就是我们实现vue的实现方式,我们提供了一个结果,至于如何去实现的,我们不关心

vue帮我们封装了过程,因此我们能猜到vue内部实现一定是命令式的 ,但是暴露给用户确实更加的声明式

=========================================================================

此笔记原创为几何心凉的,个人没有学过vue,就看了凉哥的视频,然后做了一个比较详细的笔记

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Sentinel 授权规则规则持久化

本篇博客我们来学习授权规则&#xff0c;授权规则是对请求者的一种身份的判断。 1、授权规则 授权规则是对请求者的身份做一个判断。你有没有权限来访问我&#xff1f;那就有人可能会说这个功能&#xff0c;好像以前我们在学习微服务的时候讲过网关他不就是把门的吗&#xff1…

云上办公系统项目

云上办公系统项目1、云上办公系统1.1、介绍1.2、核心技术1.3、开发环境说明1.4、产品展示后台前台1.5、 个人总结2、后端环境搭建2.1、建库建表2.2、创建Maven项目pom文件guigu-oa-parentcommoncommon-utilservice-utilmodelservice-oa配置数据源、服务器端口号application.yml…

springboot车辆充电桩

sprinboot车辆充电桩演示录像2022开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;ecli…

文法和语言的基本知识

一、什么形式化的方法用一套带有严格规定的符号体系来描述问题的方法二、什么是非形式化的方法对程序设计语言的描述从语法、语义和语用三个方面因素来考虑所谓语法是对语言结构定义所谓语义是描述了语言的含义所谓语用则是从使用的角度去描述语言三、符号串字母表和符号串字母…

vue基于vant封装可精确到秒的时间选择器

前言 在移动开发中&#xff0c;时间选择的控件比比皆是&#xff0c;但却鲜有类似的组件可以精确到秒级别的&#xff0c;官方可能是考虑到小屏幕手机的显示问题&#xff0c;也可能是使用的场景寥寥无几&#xff0c;但是少不代表没有&#xff0c;所以最近花了点时间基于 vant 组件…

011+limou+C语言深入知识——(3)“字符串函数”和“字符分类函数”和“内存操作函数”以及“部分库函数的模拟实现”

一、字符串库函数 001、求字符串长度strlen size_t strlen ( const char * str );注意size_t是一个无符号类型&#xff0c;没有正负 #include <stdio.h> #include <string.h> int main() {char*str1 "abcdef";strcmpchar*str2 "bbb";if( …

《Roller: Fast and Efficient Tensor Compilation for Deep Learning》

《Roller: Fast and Efficient Tensor Compilation for Deep Learning》 用于深度学习 快速高效的张量编译器 作者 微软亚洲研究院以及多伦多大学等多所高校 摘要 当前编译为了产生高效的kernel时&#xff0c;搜索空间大&#xff0c;通常使用机器学习的方法 找到最优的方案…

【测试开发篇3】软件测试的常用概念

目录 一、软件测试的生命周期(5个步骤) ①需求分析(两个角度) 用户角度&#xff1a; 开发人员的角度&#xff1a; ②测试计划 ③测试设计、测试开发 ④执行测试 ⑤测试评估 二、软件测试贯穿项目的整个生命周期的体现 需求分析阶段 计划阶段 设计阶段 编码阶段 …

Keil5安装和使用小记

随着keil版本的更新&#xff0c;一些使用问题一随之产生。本文针对安装目前最新版本keil软件和使用问题做一些总结。 目录1 Keil5下载&安装1.1 官网下载链接1.2 软件安装1.2.1 安装说明1.2.2 关于 51 和 ARM 共存的问题1.3 软件破解2 pack包安装 & 破解2.1 下载2.2 安装…

智能生活垃圾检测与分类系统(UI界面+YOLOv5+训练数据集)

摘要&#xff1a;智能生活垃圾检测与分类系统用于日常生活垃圾的智能监测与分类&#xff0c;通过图片、视频和摄像头识别生活垃圾&#xff0c;对常见的可降解、纸板、玻璃、金属、纸质和塑料等类别垃圾进行检测和计数&#xff0c;以协助垃圾环保分类处理。本文详细介绍基于YOLO…

找一找马里奥-第14届蓝桥杯STEMA测评Scratch真题精选

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第110讲。 蓝桥杯选拔赛现已更名为STEMA&#xff0c;即STEM 能力测试&#xff0c;是蓝桥杯大赛组委会与美国普林斯顿多…

《Linux的权限》

本文主要对linux的一些基本权限进行讲解 文章目录前言Linux权限&#xff08;1&#xff09;权限的概念&#xff08;2&#xff09;linux下用户分类(root,普通)(3)linux的文件属性文件属性的分类文件权限修改文件权限1、chmod2、chown和chgrp3、fiile权限的三个重要的问题第一个问…

Java面向对象:接口的学习

本文介绍了Java中接口的基本语法, 什么是接口, java中的接口 语法规则, 接口的使用,接口的特性,如何实现多个接口,接口间的继承,以及抽象类和接口的区别 Java接口的学习一.接口的概念二.Java中的接口1.接口语法规则2.接口的使用3.接口的特性4.实现多个接口5.接口间的继承三.抽象…

C++线程池理解

线程池基本信息 线程池是一种结合池化思想衍生出来的一种线程管理及使用的方案 其主要针对服务器端多线程场景下&#xff0c;服务器频繁接收请求&#xff0c;每个请求都分配一个单独的线程去处理。 使用线程的开销&#xff1a; 创建和销毁线程调度线程 线程池主要解决的核…

你是真的“C”——结构体中鲜有人知的“秘密”

你是真的“C”——结构体中的精髓剖析【内存对齐】 【位段】 &#x1f60e;前言&#x1f64c;结构体内存对齐&#xff1a;&#x1f60a;结构体内存对齐存在的意思是什么&#xff1f;&#x1f618;内存对齐例子详细剖析&#xff1a;&#x1f618;结构体中的位段&#xff1a;&…

基于Vue+Vue-cli+webpack搭建渐进式高可维护性前端实战项目

本文是专栏《Vue SpringBoot前后端分离项目实战》的实战第一篇&#xff0c;将从Vue脚手架安装开始&#xff0c;逐步带你搭建起一套管理系统所需的架构。当然&#xff0c;在默认安装完成之后&#xff0c;会对文件目录进行初步的细化拆分&#xff0c;以便后续功能迭代和维护所用…

ChatGPT没有API?OpenAI官方API带你起飞

目录ChatGPT没有API&#xff1f;OpenAI官方API带你起飞安装 OpenAI 的 API 库包装个函数包装个UIAPI 调不通怎么办&#xff1f;ChatGPT没有API&#xff1f;OpenAI官方API带你起飞 前段时间ChatGPT爆火&#xff0c;OpenAI 的 GPT API也被大家疯狂调用&#xff0c; 但其实这个AP…

超详细的堆排序,进来看看吧。

1.堆的基本概念1.1什么是堆堆是一种叫做完全二叉树的数据结构&#xff0c;1.2大堆和小堆大堆:每个节点的值都大于或者等于他的左右孩子节点的值小根堆:每个结点的值都小于或等于其左孩子和右孩子结点的值1.3完全二叉树节点之间的关系leftchild parent*2 1rightchild parent*…

string类(上)

string类&#xff08;上&#xff09;1.标准库中的string类2.string类对象的常见构造①string()②string(const char* s)③string(size_t n,char c)④string(const string&s)⑤string(const string& str,size_t pos,size_t lennpos)⑥string&#xff08;const char* s,s…

【基于协同过滤算法的推荐系统项目实战-2】了解协同过滤推荐系统

本文目录1、推荐系统的关键元素1.1 数据1.2 算法1.3 业务领域1.4 展示信息2、推荐算法的主要分类2.1 基于关联规则的推荐算法基于Apriori的算法基于FP-Growth的算法2.2 基于内容的推荐算法2.3 基于协同过滤的推荐算法3、推荐系统常见的问题1、冷启动2、数据稀疏3、不断变化的用…