草庐IT

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

东非不开森 2023-09-09 原文

💭💭

✨： 开始陆陆续续更新vue啦
 
💟：东非不开森的主页
 
💜：如果有幸和你一起学习一起进步，那就太棒啦，一起学习吧。💜💜
 

初识vue

一、初识Vue

1.1.vue简介

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

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

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

Vue3命名为One Piece（海贼王）
 

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；称为是声明式编程；

命令式Vuespanclasstokenvue.jsjavascript前端前端框架

有关【Vue】Vue简介、引入、命令式和声明式编程的更多相关文章

  1. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  2. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  3. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

  4. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  6. HBase Region 简介和建议数量&大小 - 2

    Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile

  7. ruby - 从 Ruby : capturing the output while displaying the output? 运行 shell 命令 - 2

    我有一个问题。我想从另一个ruby​​脚本运行一个ruby​​脚本并捕获它的输出信息，同时让它也输出到屏幕。亚军#!/usr/bin/envrubyprint"Enteryourpassword:"password=gets.chompputs"Hereisyourpassword:#{password}"我运行的脚本文件:开始.rboutput=`runner`putsoutput.match(/Hereisyour(password:.*)/).captures[0].to_s正如您在此处看到的那样，存在问题。在start.rb的第一行，屏幕是空的。我在运行程序中看不到“输入您的密

  8. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  9. ruby - 在 Ruby 的 if 语句中检查 bash 命令 - 2

    如何在Ruby的if语句中检查bash命令的返回值(true/false)。我想要这样的东西，if("/usr/bin/fswscell>/dev/null2>&1")has_afs="true"elsehas_afs="false"end它会提示以下错误含义，它总是返回true。(irb):5:warning:stringliteralincondition正确的语法是什么？更新:/usr/bin/fswscell寻找afs安装和运行状态。它会抛出这样的字符串，Thisworkstationbelongstocell如果afs没有运行，命令以状态1退出 最

  10. ruby - 可以正常中断的来自 Rake 的长时间运行的 shell 命令？ - 2

    在几个项目中，我希望有一个类似rakeserver的rake任务，它将通过任何需要的方式开始为该应用程序提供服务。这是一个示例:task:serverdo%x{bundleexecrackup-p1234}end这行得通，但是当我准备停止它时，按Ctrl+c并没有正常关闭；它中断了Rake任务本身，它说rakeaborted!并给出堆栈跟踪。在某些情况下，我必须执行Ctrl+c两次。我可能可以用Signal.trap写一些东西来更优雅地中断它。有没有更简单的方法？ 最佳答案 trap('SIGINT'){puts"Yourmessa

随机推荐