從「心」認識vue(一) 我的第乙個vue

2021-10-16 13:15:21 字數 1092 閱讀 8583

三、第乙個vue

總結開始學習vue了,但是程式設計的思想還是不容易轉變過來,一兩周過去了,只知道個大概,知其然而不知其所以然,打算開乙個系列帖,重新認識下vue。

vue是一套構建使用者介面的漸進式的自底向上增量開發mvvm框架.

漸進式 : 不做職責以外的事情,可以區域性使用也可以全域性使用

自底向上增量開發:從基礎到複雜的開發過程

在沒有學習框架以前,我們只要學習的是命令式程式設計,即需要一步一步告訴計算機先做什麼,後做什麼。

如:有乙個變數想展示在div裡,js裡需要這樣做:

// 1.建立div元素,設定id屬性,js裡拿到元素節點

// 2.定義乙個變數

// 3.設定元素節點html或text的值,將變數放在div元素中顯示

// 4.在需要修改資料時,將資料賦值給變數

學習vue之後,我們關注的是資料展示,即只要告訴計算機應該做什麼,但不指定具體要怎麼做。

如在vue中,只需要定義資料,然後讓它在html裡展示,而其中的過程不需要我們去管。

<

!doctype html>

"en"

>

"utf-8"

>

document<

/title>

"node_modules/vue/dist/vue.min.js"

>

<

/script>

<

/head>

>

}<

/div>

newvue(}

)<

/script>

<

/body>

<

/html>

//偽**:vue.js裡有類似的**

function

vue(***,***)

我們在修改定義的資料時,html裡的資料會進行同步修改。

如:在控制台修改資料時,頁面上的資料同步更新。

第乙個Vue應用

不管我們學習哪種語言,我們第乙個寫的估計就是hello world了,這裡我們也是先通過乙個簡單的html 開始,來對vue有乙個直觀的感覺。charset utf 8 vue 示例教程title head type text v model name placeholder 您的輸入 onkeyd...

第乙個vue執行

1,我剛入手,所以直接在網上d的模板,用的element,倉庫 2,vue搭建環境 vue需要nodejs支援,需要用到npm npm的作用就是對node.js依賴的包進行管理 新版本安裝的時候,nodejs會將其一起安裝上。一般用lts,穩定版本 2 安裝完以後可以嘗試用命令裝x一下。測試下版本 ...

第乙個Vue程式

1 匯入vue.js檔案 2 建立vue01.html doctype html en utf 8 title title 導js庫 js vue.js script head 將來new的vue例項,會控制這個元素中的所有內容 p div var data 建立vue的例項,當我們匯入js庫後,在...