VueVue简介引入命令式和声明式编程

Posted 东非不开森

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueVue简介引入命令式和声明式编程相关的知识,希望对你有一定的参考价值。

💭💭

✨: 开始陆陆续续更新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;
    ;

步骤:

  • 获取事件
  • 注册事件
  • 绑定事件
  • 添加事件处理程序
  • 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;称为是声明式编程;

以上是关于VueVue简介引入命令式和声明式编程的主要内容,如果未能解决你的问题,请参考以下文章

RxJS简介

编程范式 —— 函数式编程入门

快速了解函数式编程

JdbcTemplate和声明式事务(Spring框架)

JdbcTemplate和声明式事务(Spring框架)

Spring框架——事务处理(编程式和声明式)