????

?： 開始陸陸續(xù)續(xù)更新vue啦
?
??：東非不開森的主頁
?
??：如果有幸和你一起學習一起進步，那就太棒啦，一起學習吧。????
?

一、初識Vue

1.1.vue簡介

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

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

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

Vue3命名為One Piece（海賊王）
?

1.2.Vue引入方式

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

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

3. 下載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;
    };

步驟：

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

我們因此可以發(fā)現(xiàn)，在原生實現(xiàn)的過程中，我們每完成一個操作，都需要通過JavaScript編寫一個代碼，來給瀏覽器一個指令。一步一步的步驟操作，一步一步的執(zhí)行。
?

• 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í)行

1.4.聲明式編程和命令式編程

????
從剛剛計數(shù)器的案例我們可以發(fā)現(xiàn)二者的不同點

• 在原生js中：
  每完成一個操作，都需要通過JavaScript編寫一條代碼，來給瀏覽器一個指令；
  每一步的指令都是按順序執(zhí)行的，稱為命令式編程

• 在vue的實現(xiàn)過程中：
  我們會在createApp傳入的對象中聲明需要的內容，模板template、數(shù)據(jù)data、方法methods；稱為是聲明式編程；文章來源地址http://www.zghlxwxcb.cn/news/detail-790947.html

到了這里，關于【Vue】Vue簡介、引入、命令式和聲明式編程的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！