从零开始学WEB前端——VUE介绍
📓項目介紹
先做個自我介紹，本人是一個沒人寫前端所以就自學(xué)前端的后端程序員🙇。在此項目中我會和大家一起從零基礎(chǔ)開始學(xué)習(xí)前端，從后端程序員的視角來看前端，受限于作者的水平本項目暫時只會更新到前端框架VUE，不會涉及node.js。該項目適合零基礎(chǔ)的小白或者和我一樣開發(fā)網(wǎng)站沒人寫前端所以自學(xué)前端的后端程序員😂。
該項目的學(xué)習(xí)順序是按照我自己學(xué)習(xí)時總結(jié)出來的，其中的每個知識點都是我認(rèn)真去理解的，同時也查了很多的資料，所有的參考資料我都放在了文章末尾。尊重開源，尊重知識產(chǎn)權(quán)。每一個案例我都親手寫過并覺得不錯才放上去的。每次的代碼和筆記我都放在了開源倉庫里，有需要的同學(xué)請不要吝嗇給我一個star。如果覺得本文寫的不錯的話記得點贊+關(guān)注，你們的支持是我堅持下去的動力😃。
秋風(fēng)清，秋月明，
落葉聚還散，寒鴉棲復(fù)驚。
相思相見知何日？此時此夜難為情！
入我相思門，知我相思苦，
長相思兮長相憶，短相思兮無窮極，
早知如此絆人心，何如當(dāng)初莫相識。
——李白《三五七言》
語雀地址：https://www.yuque.com/beilayanmen
Github地址：https://github.com/SuZui-cn/my-web
Gitee地址：https://gitee.com/north_gate/my-web
個人博客地址：https://foollyone.cn/
?本文知識點
- 什么是VUE
- VUE的特點
- 我們的第一個VUE程序
- 什么是MVVM
從本節(jié)開始我們就要介紹前端框架VUE，并且需要逐漸的適應(yīng)前端工程化的開發(fā)。VUE作為國人開發(fā)的框架，本人是非常喜歡的，但是由于本人的水平一般，所以很多地方講的不好而且內(nèi)容較少。如果要深入前端學(xué)習(xí)的同學(xué)建議多花點時間在JavaScript上面，有了良好的JavaScript基礎(chǔ)，再來學(xué)習(xí)前端框架會非常的輕松。
什么是VUE
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。
——VUE官方文檔
VUE由國人尤雨溪所開發(fā)。
尤雨溪是一位美籍華人，在上海復(fù)旦大學(xué)附中讀完高中后，在美國完成大學(xué)學(xué)業(yè)，本科畢業(yè)于 Colgate University，后在 Parsons 設(shè)計學(xué)院獲得 Design & Technology 藝術(shù)碩士學(xué)位。他是 Vue Technology LLC 創(chuàng)始人，曾經(jīng)在 Google Creative Lab 就職，參與過多個項目的界面原型研發(fā)，后加入 Meteor，參與 Meteor 框架本身的維護(hù)和 Meteor Galaxy 平臺的交互設(shè)計與前端開發(fā)。
2014 年 2 月，尤雨溪開源了一個前端開發(fā)庫 Vue.js。Vue.js 是構(gòu)建 Web 界面的 JavaScript 庫，也是一個通過簡潔的 API 提供高效數(shù)據(jù)綁定和靈活組件的系統(tǒng)。
2016 年 9 月 3 日，在南京的 JSConf 上，尤雨溪正式宣布以技術(shù)顧問的身份加盟阿里巴巴 Weex 團(tuán)隊，來做 Vue 和 Weex 的 JavaScript runtime 整合，目標(biāo)是讓大家能用 Vue 的語法跨三端。
目前，尤雨溪全職投入 Vue.js 的開發(fā)與維護(hù)，立志將 Vue.js 打造成與 Angular/React 平起平坐的世界頂級框架。
VUE的特點
以下取自C語言中文網(wǎng)：http://c.biancheng.net/view/6714.html
-
輕量級的框架——Vue.js 能夠自動追蹤依賴的模板表達(dá)式和計算屬性，提供 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的 API，使讀者更加容易理解，能夠更快上手。
-
雙向數(shù)據(jù)綁定——聲明式渲染是數(shù)據(jù)雙向綁定的主要體現(xiàn)，同樣也是 Vue.js 的核心，它允許采用簡潔的模板語法將數(shù)據(jù)聲明式渲染整合進(jìn) DOM。
-
指令——Vue.js 與頁面進(jìn)行交互，主要就是通過內(nèi)置指令來完成的，指令的作用是當(dāng)其表達(dá)式的值改變時相應(yīng)地將某些行為應(yīng)用到 DOM 上。
-
組件化——組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在 Vue 中，父子組件通過 props 傳遞通信，從父向子單向傳遞。子組件與父組件通信，通過觸發(fā)事件通知父組件改變數(shù)據(jù)。這樣就形成了一個基本的父子通信模式。在開發(fā)中組件和 HTML、JavaScript 等有非常緊密的關(guān)系時，可以根據(jù)實際的需要自定義組件，使開發(fā)變得更加便利，可大量減少代碼編寫量。組件還支持熱重載（hotreload）。當(dāng)我們做了修改時，不會刷新頁面，只是對組件本身進(jìn)行立刻重載，不會影響整個應(yīng)用當(dāng)前的狀態(tài)。CSS 也支持熱重載。
-
客戶端路由——Vue-router 是 Vue.js 官方的路由插件，與 Vue.js 深度集成，用于構(gòu)建單頁面應(yīng)用。Vue 單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來，傳統(tǒng)的頁面是通過超鏈接實現(xiàn)頁面的切換和跳轉(zhuǎn)的。
-
狀態(tài)管理——狀態(tài)管理實際就是一個單向的數(shù)據(jù)流，State 驅(qū)動 View 的渲染，而用戶對 View 進(jìn)行操作產(chǎn)生 Action，使 State 產(chǎn)生變化，從而使 View 重新渲染，形成一個單獨的組件。
我們的第一個VUE程序
我們先打開VUE的官網(wǎng)
地址：https://cn.vuejs.org/
之后點擊“起步”
在這個位置，我們將CDN復(fù)制下來。
之后我們創(chuàng)建一個.html結(jié)尾的文件并寫入下面的內(nèi)容。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><body><!-- 這里的{{}}是插值表達(dá)式，用于將data里的數(shù)據(jù)渲染到頁面上 --><!-- VUE2需要一個根節(jié)點，以這個根節(jié)點為基礎(chǔ)來編寫代碼 --><div id="app">{{msg}}</div><script>// 這里實例化了一個Vue對象，注意V是大寫的。new Vue({// 掛載剛剛到根節(jié)點。el: '#app',// data對象用于存放數(shù)據(jù)。data: {msg: '帥者的肯定',},});</script></body> </html>什么是MVVM
- Model是代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。
- View是代表UI組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)出來。
- ViewModel是一個同步View和Model的對象。
代碼演示如下：
總結(jié)
以上是生活随笔為你收集整理的从零开始学WEB前端——VUE介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： T-SQL 字符串前加 N 是什么意思
- 下一篇： 必须掌握的前端模板引擎之art-temp