快捷導(dǎo)航

Vue簡(jiǎn)介、引入、命令式與聲明式編程詳解

更新時(shí)間：2022年10月10日 11:07:25 作者：東非不開(kāi)森

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

一、初識(shí)Vue

1.1.vue簡(jiǎn)介

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式 JavaScript框架。

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

注：漸進(jìn)式框架是表示我們可以在項(xiàng)目中一點(diǎn)點(diǎn)來(lái)引入和使用Vue，而不一定需要全部使用Vue來(lái)開(kāi)發(fā)整個(gè)項(xiàng)目；

Vue3命名為One Piece（海賊王）

1.2.Vue引入方式

在頁(yè)面中通過(guò)CDN的方式來(lái)引入；

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

下載Vue的JavaScript文件，并且自己手動(dòng)引入；下載Vue的源碼，可以直接打開(kāi)CDN的鏈接復(fù)制所有代碼到一個(gè)新的文件夾里vue.js
然后引入

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

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

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

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

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

步驟：

獲取事件
注冊(cè)事件
綁定事件
添加事件處理程序

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

<div id="app">
	<h2>當(dāng)前計(jì)數(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");

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