從“心”認識vue（一）：我的第一個vue
阿新 • • 發佈：2021-02-04
從“心”認識vue（一）：我的第一個vue
前言
開始學習vue了，但是程式設計的思想還是不容易轉變過來，一兩週過去了，只知道個大概，知其然而不知其所以然，打算開一個系列帖，重新認識下vue。
一、vue是什麼？
vue是一套構建使用者介面的漸進式的自底向上增量開發MVVM框架.
漸進式 : 不做職責以外的事情，可以區域性使用也可以全域性使用
自底向上增量開發：從基礎到複雜的開發過程
二、程式設計正規化
1.指令式程式設計
在沒有學習框架以前，我們只要學習的是指令式程式設計，即需要一步一步告訴計算機先做什麼，後做什麼。
如：有一個變數想展示在div裡，js裡需要這樣做：
// 1.建立div元素，設定id屬性，js裡拿到元素節點
// 2.定義一個變數
// 3.設定元素節點html或text的值，將變數放在div元素中顯示
// 4.在需要修改資料時，將資料賦值給變數
2.宣告式程式設計
學習vue之後，我們關注的是資料展示，即只要告訴計算機應該做什麼，但不指定具體要怎麼做。
如在vue中，只需要定義資料，然後讓它在html裡展示，而其中的過程不需要我們去管。
三、第一個vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{text} 1.vue都做了什麼？
- 首先js裡實例化出了一個vue物件，那麼在匯入的vue.js裡一定會有這樣的程式碼，以供我們可以例項化物件。
//虛擬碼：Vue.js裡有類似的程式碼
function Vue(xxx,xxx){
}
- el:用於要掛載要管理的元素，在這個元素節點裡可以進行vue的各種操作
- data:對於定義資料
- html元素裡雙大括號用於展示定義後的資料
- js裡整個程式碼對原html進行解析和修改
2.vue的響應式
我們在修改定義的資料時，html裡的資料會進行同步修改。
如：在控制檯修改資料時，頁面上的資料同步更新。
總結
建立vue例項的步驟：
- 1.建立元素，並設定好節點名稱,id等
- 2.例項vue物件，設定vue掛載元素
- 3.定義資料
- 4.在html裡展示資料