【Vue】Vue简介、引入、命令式和声明式编程

这篇具有很好参考价值的文章主要介绍了【Vue】Vue简介、引入、命令式和声明式编程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

💭💭

✨: 开始陆陆续续更新vue啦

💟:东非不开森的主页

💜:如果有幸和你一起学习一起进步,那就太棒啦,一起学习吧。💜💜

一、初识Vue

1.1.vue简介

Vue 是一套用于构建用户界面的渐进式 JavaScript框架。

  • 全称是Vue.js或者Vuejs;
  • 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型;
  • 帮助你高效地开发用户界面,无论任务是简单还是复杂;


注:渐进式框架是表示我们可以在项目中一点点来引入和使用Vue,而不一定需要全部使用Vue来开发整个项目;

Vue3命名为One Piece海贼王

vue是声明式ui还是命令式,Vue,vue.js,javascript,前端,前端框架

1.2.Vue引入方式
  1. 在页面中通过CDN的方式来引入;
<script src="https://unpkg.com/vue@next"></script>
  1. 下载Vue的JavaScript文件,并且自己手动引入;
  • 下载Vue的源码,可以直接打开CDN的链接复制所有代码到一个新的文件夹里vue.js
    然后引入
<script src="../vue.js"></script>

注意路径问题,根据自己的情况而定

1.3.计数器案例原生js和vue开发不同

💡💡

  • 原生js实现计数器功能
<h2>当前计数:<span class="counter"></span></h2>
<button class="add">+1</button>
<button class="sub">-1</button>
<script>
//1.获取dom
const h2E1 = document.querySelector("h2");
const counterE1 = document.querySelector(".counter");
const addBtnE1 = document.querySelector(".add");
const subBtnE1 = document.querySelector(".sub");

// 2.定义一个变量记录数据
let counter = 100;
counterE1.textContent = counter;
//3.监听按钮的点击
addBtnE1.onclick = function () {
      counter++;
      counterE1.textContent = counter;
    };
subBtnE1.onclick = function () {
      counter--;
      counterE1.textContent = counter;
    };

步骤:

  • 获取事件
  • 注册事件
  • 绑定事件
  • 添加事件处理程序

我们因此可以发现,在原生实现的过程中,我们每完成一个操作,都需要通过JavaScript编写一个代码,来给浏览器一个指令。一步一步的步骤操作,一步一步的执行。

  • Vue实现计数器功能
<div id="app">
	<h2>当前计数:{{counter}}</h2>
	<button @click="increment">+1</button>
	<button @click="decrement">-1</button>
</div>

<script src="./lib/vue.js"></script>
<script>
      const app = Vue.createApp({
        // @click 绑定

        data: function () {
          return {
            counter: 0,
          };
        },
        methods: {
          increment: function () {
            this.counter++;
          },
          decrement: function () {
            this.counter--;
          },
        },
      });
app.mount("#app");


从两个对比来看,我们可以发现Vue是不是更为简洁,而原生JS就是根据命令一步步去执行

1.4.声明式编程和命令式编程

💡💡
从刚刚计数器的案例我们可以发现二者的不同点

  • 在原生js中:
    每完成一个操作,都需要通过JavaScript编写一条代码,来给浏览器一个指令;
    每一步的指令都是按顺序执行的,称为命令式编程

  • 在vue的实现过程中:
    我们会在createApp传入的对象中声明需要的内容,模板template、数据data、方法methods;称为是声明式编程;文章来源地址https://www.toymoban.com/news/detail-790947.html

到了这里,关于【Vue】Vue简介、引入、命令式和声明式编程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SQL server建立学生库(大学生入门---交互式和命令式)

    学生课程数据库 一、建库 create database xs 1.选择数据库右击,选择“新建数据库” 2. 输入数据库名(版本不一样界面也不一样),大小默认,随后点击确定 二、建表 (1)学生信息表 create table student (sno int primary key, sname varchar(50), ssex varchar(10) check(ssex=\\\'男\\\' or ssex=\\\'女\\\'), sage in

    2024年04月16日
    浏览(43)
  • 【云原生 | Kubernetes 系列】K8s 实战 Kubernetes 对象管理之指令式命令管理和配置文件命令式管理

    kubectl 工具能够支持三种对象管理方式: 声明式对象配置 指令式命令 指令式对象配置 前面我使用了两篇文章讲解了 使用配置文件对 Kubernetes 对象进行声明式管理 的相关知识点,本篇文章我将带领大家一起学习剩下的两个Kubernetes 对象管理的指令式命令管理和配置文件命令式

    2023年04月15日
    浏览(81)
  • 【前端知识】React 基础巩固(十四)——JSX 的转换过程和声明式编程

    jsx 仅仅只是 React.createElement(component, props, …children)函数的语法糖 所有的 jsx 最终都会被转换成 React.createElement 的函数调用 createElement 需要传递三个参数: type 当前 ReactElement 的类型 如果是标签元素,那么就使用字符串表示 “div” 如果是组件元素,那么就直接使用组件的名称

    2024年02月09日
    浏览(84)
  • 进入现代云技术的世界-APIGateway、ServiceMesh、OpenStack、异步化框架、云原生框架、命令式API与声明式API

    目录 APIGateway Service Mesh OpenStack 异步化框架 云原生框架 命令式API与声明式API             API网关(API Gateway)是一个 服务器 ——充当了客户端和内部服务之间的中间层。API网关负责处理API请求,将客户端的请求路由到相应的后端服务,并将服务的响应聚合后返回给客户端

    2024年02月13日
    浏览(41)
  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(63)
  • 大数据Flink(五十一):Flink的引入和Flink的简介

    文章目录 Flink的引入和Flink的简介 一、Flink的引入 1、第1代——Hadoop MapReduce

    2024年02月15日
    浏览(46)
  • 基于和声算法的无人机航迹规划-附代码

    摘要:本文主要介绍利用和声算法来优化无人机航迹规划。 和声算法原理请参考:https://blog.csdn.net/u011835903/article/details/118724731 ? 环境模型的建立是考验无人机是否可以圆满完成人类所赋予各项任务的基 础和前提,其中第一步便是如何描述规划空间中的障碍物。首先我们将采

    2024年02月06日
    浏览(54)
  • 路径规划算法:基于和声优化的路径规划算法- 附代码

    摘要:本文主要介绍利用智能优化算法和声算法来进行路径规划。 和声算法原理请参考:https://blog.csdn.net/u011835903/article/details/118724731 1.1 环境设定 在移动机器人的路径优化中,每个优化算法的解代表机器人的一条运动路径。优化算法会通过优化计算在众多路径中找出一条最

    2024年02月08日
    浏览(46)
  • 引入MySQL驱动包进行JDBC编程

    每个数据库都会提供一组API来支持程序员实现自己客户端,自己根据需求来完成一些具体的增删查改的功能。但数据库也有很多种,例如Oracle、MySQL、SQL Server等。显然,这些不同的数据库是出自不同的厂商之手,而对于数据库API的约定,并没有一个业界统一的标准。 Java这种

    2024年02月10日
    浏览(49)
  • kubectl详解之声明式管理方法

    适合于对资源的修改操作 声明式资源管理方法依赖于资源配置清单文件对资源进行管理 资源配置清单文件有两种格式:yaml(人性化,易读),json(易于api接口解析) 对资源的管理,是通过事先定义在统一资源配置清单内,再通过陈述式命令应用到k8s集群里 语法格式: ku

    2024年02月12日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包