Vue簡介、引入、命令式與聲明式編程詳解

更新時間：2022年10月10日 11:07:25 作者：東非不開森

原生開發(fā)和Vue開發(fā)的模式和特點,我們會發(fā)現(xiàn)是完全不同的,這里其實涉及到兩種不同的編程范式:命令式編程和聲明式編程,下面這篇文章主要給大家介紹了關于Vue簡介、引入、命令式與聲明式編程的相關資料,需要的朋友可以參考下

一、初識Vue

1.1.vue簡介

Vue 是一套用于構建用戶界面的漸進式 JavaScript框架。

全稱是Vue.js或者Vuejs；
它基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型；
幫助你高效地開發(fā)用戶界面，無論任務是簡單還是復雜；

注：漸進式框架是表示我們可以在項目中一點點來引入和使用Vue，而不一定需要全部使用Vue來開發(fā)整個項目；

Vue3命名為One Piece（海賊王）

1.2.Vue引入方式

在頁面中通過CDN的方式來引入；

<script src="https://unpkg.com/vue@next"></script>

下載Vue的JavaScript文件，并且自己手動引入；下載Vue的源碼，可以直接打開CDN的鏈接復制所有代碼到一個新的文件夾里vue.js
然后引入

<script src="../vue.js"></script>

注意路徑問題，根據(jù)自己的情況而定

1.3.計數(shù)器案例原生js和vue開發(fā)不同

原生js實現(xiàn)計數(shù)器功能

<h2>當前計數(shù)：<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.定義一個變量記錄數(shù)據(jù)
let counter = 100;
counterE1.textContent = counter;
//3.監(jiān)聽按鈕的點擊
addBtnE1.onclick = function () {
      counter++;
      counterE1.textContent = counter;
    };
subBtnE1.onclick = function () {
      counter--;
      counterE1.textContent = counter;
    };

步驟：

獲取事件
注冊事件
綁定事件
添加事件處理程序

Vue實現(xiàn)計數(shù)器功能

<div id="app">
	<h2>當前計數(shù):{{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");

從兩個對比來看，我們可以發(fā)現(xiàn)Vue是不是更為簡潔，而原生JS就是根據(jù)命令一步步去執(zhí)行